출처 : http://blog.naver.com/maglitt/60053112481
기본레이아웃
마크업(markup)
1.시작 단계에서 고려할점
디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다.
| <!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>Simple CSS Layout</title> </head> <body> <div id="head">Site Top Area</div> <hr> <div id="sub">Site Left Area</div> <hr> <div id="body">Main Content Area </div> <hr> <div id="foot">Site Bottom Area</div> </body> </html> |
CSS
body { margin: 0; padding: 0; } | 브라우저 마다 다른 body값의 통일 |
hr { display: noen; } | 각부분을 구분지어 주는 역활을 하므로 디자인상 화면에 나타나지 않도록 display:none; 시켜준다. |
#head { height: 170px; background: #eee; } | 상단 로고, 메뉴 등은 고정된 높이를 갖는 경우가 많다. 따라서 높이를 지정하고 배경색만 지정해준다. |
#sub { postioin: absolute; top: 170px; left: 0; width: 160px; background: #c4e8fd; } | 1. 일정한 높이를 가지고 있는 경우 2. head 부분 바로 아래 , 왼쪽에 위치시킨다. (top: 170px; left: 0;) 3. main content영역과 겹치는 현상 |
#body padding-left: 170px; width: 700px; min-height: 400px; background: #ffff80; } | 1. 왼쪽 메뉴와 겹침 현상 방지를 위해 padding-left 지정 margin값을 사용하지 않은 이유는 Side Left를 포함한 body전체에 배경을 지정하기 위해서이다. 2. Main Content 높이가 Side left가 낮을 경우 배경 footer가 Side Left에 가리는 것을 방지하기 위해서 최소 높이 지정 |
<결과>
relative 와 absolute의 관계
absolute position 을 relative position과 함께 사용할 경우 보다 자유롭게 offset 설정가능(하위 absolute position의 offset 기준은 더 이상 브라우저가 아닌 상위 relative postion에 있다.) |
| <div id="board_list" class="freeboard_item"> <ul id="board_list_item"> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> </ul> </div> |
#board-list-item li { position: [출처] 웹표준가이드(7)/css 레이아웃기초-1|작성자 마그리뜨 |
'Development > HTML' 카테고리의 다른 글
| 웹표준가이드(9)/List (ul, ol, dl, dt, dd) (0) | 2013.05.29 |
|---|---|
| 웹표준가이드(8)/css 레이아웃기초-2 (0) | 2013.05.29 |
| 웹표준가이드(6)/css 레이아웃기초 (0) | 2013.05.29 |
| 웹표준가이드(5) / css적용 체크포인트 4가지 (0) | 2013.05.29 |
| 웹표준가이드(4) / css선택자와 선언종류 (0) | 2013.05.29 |
댓글