- layout_main.css
#wrap {text-align:center; width:100%; }
/* 최 상단 퀵메뉴 */
#y1 {text-align:center; width:100%; height:29px; }
#y1 .box { width:1000px; height:29px; margin:0 auto; }
#y1 .box .x1 {float:left; padding:7px 0 7px 0; }
#y1 .box .x2 {float:right; padding:7px 0 7px 0; }
/* 상단 */
#y2 {margin:0 auto; width:1000px; height:100px; }
#y2 .x1 {float:left; width:200px; }
#y2 .x2 {float:left; width:120px; }
#y2 .x3 {float:left; width:480px; }
#y2 .x4 {float:left; width:200px; }
/* 가로 메뉴바 */
#y3 {margin:0 auto; width:1000px; height:40px; }
#y3 .x1 {float:left; width:600px; padding:16px 0 0px 0; }
#y3 .x2 {float:left; width:180px; padding:16px 0 0px 0; }
#y3 .x3 {float:left; width:220px; padding:16px 0 0px 0; }
/* 메인 컨텐츠 */
#y4 {margin:0 auto; width:1000px; clear:both; }
#y4 .x1 {float:left; width:220pxpx; }
#y4 .x1 div {width:220px; padding:10px 0 0 0; clear:both;}
#y4 .x2 {float:left; width:540px; margin:0 10px 0 10px; }
#y4 .x2 div {width:540px; padding:10px 0 0 0; clear:both; }
#y4 .x3 {float:left; width:220px; }
#y4 .x3 div {width:220px; padding:10px 0 0 0; clear:both; }
/* 하단 카피라이트 */
#y5 {margin:0 auto; width:1000px; height:200px; clear:both; padding:10px 0 0 0; }
#y5 .x1 {float:left; width:200px; }
#y5 .x2 {float:left; width:580px; margin:0 10px 0 10px; }
#y5 .x3 {float:left; width:200px; }
- style.css
div {font-size:9pt; text-align:left; }
body {margin:0px; border:0px; padding:0px; }
img {border:0px;}
- index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>메인</title>
<link rel="stylesheet" href="./style.css" type="text/css" >
<link rel="stylesheet" href="./layout_main.css" type="text/css" >
</head>
<body>
<div id="wrap">
<!-- 최 상단 퀵메뉴 -->
<div id="y1">
<div class="box">
<div class="x1"></div>
<div class="x2"></div>
</div>
</div>
<!-- 상단 -->
<div id="y2">
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
</div>
<!-- 가로 메뉴바 -->
<div id="y3">
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
</div>
<!-- 메인 컨텐츠 -->
<div id="y4">
<!-- 좌측 -->
<div class="x1">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
</div>
<!-- 우측 -->
<div class="x2">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
<div class="y5"></div>
</div>
<div class="x3">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
</div>
</div>
<!-- 하단 카피라이트 -->
<div id="y5">
<div class="x1"></div>
<div class="x2"></div>
<div class="x4"></div>
</div>
</div>
</body>
</html>
html5기준에 맞춘 코딩이지만 header 등의 html5특유의 태그를 사용하지 않았습니다. html5입문단계 div 레이아웃 입문단계이신 분들을 위한 저만의 코딩노하우를 살짝 공개합니다.
아직 성숙하지 못한 실력이지만 이러한 교류가 늘어야 한다는 생각에 올리게 되었습니다.
앞으로 잘 부탁드립니다.
댓글 14개
게시글 목록
| 번호 | 제목 |
|---|---|
| 34706 | |
| 34693 | |
| 34563 | |
| 34536 | |
| 34521 | |
| 34480 | |
| 34479 | |
| 34466 | |
| 34437 | |
| 34436 | |
| 34435 | |
| 34406 | |
| 34398 | |
| 34387 | |
| 34382 | |
| 34375 | |
| 34364 | |
| 34336 | |
| 34294 | |
| 34293 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기