CSS 레이아웃:border
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box1 {
width:100px;
height:100px;
border:1px orange solid;
/*
border-style:solid;
border-color:orange;
border-width:1px;
*/
font-size:12px;
}
#box2 {
width:100px;
height:100px;
border:dotted orange 1px;
}
#box3 {
width:100px;
height:100px;
border:inset orange 7px;
}
#item {
font-size:12px;
/*
border:10px dotted red;
border-top-style:dotted;
border-bottom-width:1px;
border-left-color:yellow;
*/
border:1px solid red;
/*그룹화 순서 12시방향에서 시계방향으로 돌아간다. top right bottom left*/
/*
border-width:5px 15px 30px 45px;
border-width:10px 30px;
*/
border-width:1px 12px;
padding:3px;
}
</style>
</head>
<body>
<!-- Ex19_border.htm -->
<div id="box1">div가 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>
<br />
<div id="box2">div가 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>
<br />
<div id="box3">div가 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>
<br /><br />
<div id="item">테두리를 위아래 왼쪽 오른쪽 각각 스타일을 줄수 있다.</div>
<br />
<p>그룹화 순서 12시방향에서 시계방향으로 돌아간다. top right bottom left</p>
</body>
</html>
결과