●웹표준 레이아웃
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}
#wrap{margin:0; auto; width:900px; }
#header{float:left; width:900px; height:145; margin-bottom:15px;}
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; margin-top:20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">a</div>
<div id="sidebar">b</div>
<div id="content">c</div>
<div id="footer">d</div>
</div>
</body>
</html> |
●#wrap{margin:0 auto; width:900px;}
- table에서는 align="center"로 중앙 정렬을 했지만, 웹표준에서는 따로 중앙정렬은 없다. 그래서 중앙정렬을 하려면 가장 바깥 div에 'margin:0 auto'를 선언해 준다. 'margin:0'은 상하 0px라는 뜻이고 'auto'는 좌우를 중앙에 위치하게 한다.
●큰 div(wrap,header,sidebar,content,footer 등)를 만들고 그 안에 세부적인 div를 만든다. 큰 div는 height값을 주지 않고 세부적인 div에 height를 준다.
●width, margin, padding, height 수치를 정확히 계산해서 레이아웃을 만든다. 만들 레이아웃 디자인을 프린트하고 계산기로 위의 값을 계산하면서 하면 편하다.
●margin은 바깥쪽 여백, padding는 안쪽 여백이다.
●padding값은 width값에 포함하지 않는다. 계산할때 따로 더해주어야 한다.
ex)
<div style="padding:10px; width:80px; height:80px;"></div>
여기서 총 길이는 width값 80px와 양쪽 padding값 10px+10px인 100px이다.
●값에 숫자만 쓰면 안되고 px등 단위를 써주어야한다.
●div에 테두리를 사용하려면 'border:1px solid ;border-color:blue;' 를 css에 입력한다.
ex)
#header{float:left; width:900px; height:145px; border:1px solid ; border-color:blue; margin-bottom:15px; }
●연습 예
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
/* 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}
/* 큰 div */
#wrap{margin:20px auto; width:900px; }
#header{float:left; width:900px; height:145px; background:green; margin-bottom:15px; }
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; height:80px; background:green; margin-top:15px; margin-bottom:30px; }
/* sidebar 세부 div */
#sidebar_a{width:250px ;height:150px ;background:green; margin-bottom:10px; }
#sidebar_b{width:250px ;height:160px ;background:green; margin-bottom:10px; }
#sidebar_c{width:230px ;height:300px ;background:green; padding:10px; }
#sidebar_c_1{width:230px ;height:145px ;background:yellow; margin-bottom:10px; }
#sidebar_c_2{width:230px ;height:145px ;background:yellow; }
/* content 세부 div */
#content_a{width:625px ; background:green ;margin-bottom:10px; padding:10px; }
#content_a_1{width:625px ;height:90px ;background:yellow ;margin-bottom:10px; }
#content_a_2{width:625px ;height:90px ;background:yellow; ;margin-bottom:10px ; }
#content_a_3{width:625px ;height:100px ;background:yellow; ; }
#content_b{width:645px ;height:150px ;background:green ;margin-bottom:10px ; }
#content_c{width:645px ;height:160px ;background:green ; }
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="sidebar">
<div id="sidebar_a"></div>
<div id="sidebar_b"></div>
<div id="sidebar_c">
<div id="sidebar_c_1"></div>
<div id="sidebar_c_2"></div>
</div>
</div>
<div id="content">
<div id="content_a">
<div id="content_a_1"></div>
<div id="content_a_2"></div>
<div id="content_a_3"></div>
</div>
<div id="content_b"></div>
<div id="content_c"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html> |
댓글