Html5 규정 통과한 레이아웃 공개합니다. 정보
Html5 규정 통과한 레이아웃 공개합니다.
본문
- 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 레이아웃 입문단계이신 분들을 위한 저만의 코딩노하우를 살짝 공개합니다.
아직 성숙하지 못한 실력이지만 이러한 교류가 늘어야 한다는 생각에 올리게 되었습니다.
앞으로 잘 부탁드립니다.
추천
10
10
댓글 14개
초보자분들께는 아주 유용한 팁 인것같습니다 좋은정보 공유 감사합니다 :)
좋은 정보감사합니다.^^
좋은 팁 감사합니다
좋은 정보 감사합니다 ^^
좋은 정보 감사합니다 ^^
감사합니다.
고맙습니다!
감사합니다 저도 공부해야하는데..ㅠㅠ
좋은 자료를 얻어갑니다 ㅎ
좋은 자료를 얻어갑니다 ㅎ
이걸 어케 써먹죠? 저는 배추빌더 유저인뎅...
좋은 팁 감사합니다.
오홍홍 감사합니다 ^^
감사합니다
감사합니다
감사합니다.~~
