22. div태그로 레이아웃 설정하기
.NET프로그래밍/CSS 2.0 2009. 7. 29. 19:15 |<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100% }
#header {
width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 0px 10px 0px;
} /* 770px ==> 좌우 스크롤바 안생기는 크기 */
#left {
width:180px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 10px 0px 0px;
float:left;
}
#content {
width:340px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 0px 0px 0px;
float:left;
}
#right {
width:180px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 10px 0px 10px;
float:left;
}
#footer {
clear:both;
width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">Navigator</div>
<div style="width:770px;text-align:center">
<div id="left">카테고리</div>
<div id="content">메인</div>
<div id="right">카테고리</div>
</div>
<div id="footer">Copyright</div>
<hr />
<!-- 여기는 table태그로 만들었음 -->
<table border="1" width="100%">
<tr>
<td colspan="3">Navigator</td>
</tr>
<tr>
<td style="width:185px;height:100px">Left</td>
<td>Content</td>
<td style="width:185px;height:100px">Right</td>
</tr>
<tr>
<td colspan="3" align="center">Copyright XHTML/CSS All right reserved.</td>
</tr>
</table>
</body>
</html>
<!--
- 위에서 <div>태그를 이용해서 테이블과 비슷한 레이아웃을 설정해 봄
- padding: 5px 5px 5px 5px; ==> '안쪽' 여백("상우하좌" 순서로 적용됨)
- margin:0px 0px 10px 0px; ==> '바깥쪽' 여백(아래쪽 여백만 10px 적용함)
-->
< 실행결과 >
22.div태그로레이아웃설정.htm
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 24. CSS 2.0관련 속성정리 (0) | 2009.07.29 |
|---|---|
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |