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 레이아웃 입문단계이신 분들을 위한 저만의 코딩노하우를 살짝 공개합니다.
아직 성숙하지 못한 실력이지만 이러한 교류가 늘어야 한다는 생각에 올리게 되었습니다.
앞으로 잘 부탁드립니다.
댓글 14개
14년 전
초보자분들께는 아주 유용한 팁 인것같습니다 좋은정보 공유 감사합니다 :)
14년 전
좋은 정보감사합니다.^^
14년 전
좋은 팁 감사합니다
EunEl
14년 전
좋은 정보 감사합니다 ^^
14년 전
좋은 정보 감사합니다 ^^
14년 전
감사합니다.
14년 전
고맙습니다!
hades708
14년 전
감사합니다 저도 공부해야하는데..ㅠㅠ
좋은 자료를 얻어갑니다 ㅎ
좋은 자료를 얻어갑니다 ㅎ
14년 전
이걸 어케 써먹죠? 저는 배추빌더 유저인뎅...
14년 전
좋은 팁 감사합니다.
14년 전
오홍홍 감사합니다 ^^
base64
14년 전
감사합니다
14년 전
감사합니다
12년 전
감사합니다.~~
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3309 | 3년 전 | 1805 | ||
| 3308 | 11년 전 | 2093 | ||
| 3307 |
uPAmJ903
|
6년 전 | 4752 | |
| 3306 |
바른사나이
|
6년 전 | 3274 | |
| 3305 | 6년 전 | 12312 | ||
| 3304 | 7년 전 | 3705 | ||
| 3303 | 7년 전 | 3744 | ||
| 3302 |
지리산초보
|
7년 전 | 13597 | |
| 3301 |
sozet
|
8년 전 | 4905 | |
| 3300 |
sozet
|
8년 전 | 5974 | |
| 3299 |
sozet
|
8년 전 | 10863 | |
| 3298 | 8년 전 | 4017 | ||
| 3297 |
또치하우스
|
8년 전 | 4444 | |
| 3296 | 8년 전 | 11972 | ||
| 3295 |
또치하우스
|
8년 전 | 14988 | |
| 3294 | 8년 전 | 6028 | ||
| 3293 | 8년 전 | 5592 | ||
| 3292 |
 bluells |
9년 전 | 5320 | |
| 3291 | 9년 전 | 13683 | ||
| 3290 | 9년 전 | 5055 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기