5-5. 웹 페이지 레이아웃
웹 페이지를 제작할 때는 먼저 구획을 나누어 몇 개의 큰 박스를 화면에 배치한 다음 각 박스 안에서 세부적인 내부 요소들의 배치가 이루어집니다.
이와 같이 웹 페이지의 전체적인 윤곽을 잡는 작업을 웹 페이지 레이아웃이라고 합니다.
다음은 HTML5 레이아웃 태그를 이용한 웹 페이지 레이아웃의 한 예입니다.
<style>
.box { width: 800px; margin: 0 auto; }
header { height: 60px; background-color: yellow; }
aside { width: 200px; height: 300px; float: left; background-color: pink; }
section { width: 600px; height: 300px; float: right; background-color: orange; }
footer { clear: both; height: 60px; background-color: yellow; }
</style>
<body>
<div class="box">
<h2>HTML5의 레이아웃 태그</h2>
<header>
상단 헤더(<header> 태그)
</header>
<aside>
사이드바<br>(<aside> 태그)
</aside>
<section>
메인 콘텐트(<section> 태그)
</section>
<footer>
하단 푸터(<footer> 태그)
</footer>
</div> <!-- box -->
</body>
ex5-14.html의 실행 결과
