Default XHTML+CSS 두번째
2010. 5. 9. 22:01<!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>
... ...
</head>
<body class="column-left">
<div id="container">
<div id="container-inner">
<!-- Navigation -->
<div id="nav">
<div id="nav-inner">... ....(생략)
</div>
</div>
<!-- Elsewhere -->
<div id="elsewhere">
<div id="elsewhere-inner">... ....(생략)
</div>
</div>
<!-- Project -->
<div id="project">
<div id="project-inner">... ....(생략)
</div>
</div>
<!-- mylog -->
<div id="mylog">
<div id="mylog-inner">... ....(생략)
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footer-inner">... ....(생략)
</div>
</div></div>
</div>
</body>
</html>
컨 테이너(container)로 전체를 두르고, 그 다음 #nav, #elsewhere, #project, #mylog, #footer가 선택자명만 다를 뿐 똑같은 레이아웃 CSS가 반복되어 사용되었습니다. 디폴트 XHTML+CSS로 쉽게 레이아웃을 짜는 것이 보이신다면 이미 이 프로젝트는 끝난거나 다름 없습니다.
앞서 inner에 대해서 미리 언급 했었는데, #nav와 #nav-inner를 구별시킨 이유로서 메인페이지의 경우 #nav는 화면 가득 채우기 위해 width:100%;로(검정바탕) 설정되었고 #nav-inner는 중앙 정렬을 위해 width:980px; 그리고 margin: 0 auto;이 설정되었습니다. 웹페이지의 화면 전체를 활용할 때 유용하고 편리하게 관리가 됩니다. 화면 전체 뿐만 아니라 세부적인 요소 안에서도 편리하게 관리할 수 있습니다.
아래 이미지에 #nav와 #nav-inner의 실제 적용방법을 그려봤습니다. 그밖에 다른 선택자 역시 #alpha와 #alpha-inner 그리고 #beta와 #beta-inner를 분리해 놓은 이유를 쉽게 설명하기 위해 레이아웃의 각 영역에 테두리를 둘러서 그림을 만들어봤습니다. 각 영역의 간격을 inner로 관리하는 것입니다.
'Customize' 카테고리의 다른 글
| Layout 만들기 #1 (0) | 2010.05.09 |
|---|---|
| 몇 가지 주의 사항 (0) | 2010.05.09 |
| column-left? column-right? (0) | 2010.05.09 |
| 열과 행으로 마무리 (0) | 2010.05.09 |
| Default XHTML+CSS (0) | 2010.05.09 |