HTML 레이아웃 잡는 2가지 방법

HTML 레이아웃을 알기 전에 의미를 먼저 알아보겠습니다. 계획된 정보를 가지고 특정 공간에서 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 레이아웃이라고 합니다. 키보드의 키 배치가 여기에 해당합니다.
웹 페이지의 레이아웃은 메뉴의 위치, 디자인 등 외관을 결정짓는 매우 중요한 요소입니다.

div 요소를 이용한 레이아웃

div 태그를 이용하여 레이아웃을 잡는 방법입니다.

<h1>div 요소를 이용한 레이아웃</h1>
<div class="header">
 <h2>HEADER 영역</h2>
</div>
<div class="nav">
 <h2>NAV 영역</h2>
</div>
<div class="section">
 <h2>SECTION 영역</h2>
</div>
<div class="footer">
 <h2>FOOTER 영역</h2>
</div>

body{text-align:center;}
.header, .footer{height:100px;line-height:100px;}
.nav, .section{float:left;width:200px;line-height:240px}
.header{background-color:#8ce99a;}
.nav{background-color:#c0eb75;color:#fff;height:300px;}
.section{text-align:left;padding:10px;}
.footer{background-color:#ffc078;clear:both;}

HTML5 의미 요소를 이용한 레이아웃

HTML5에서 새롭게 추가된 의미 요소를 이용하여 레이아웃을 잡는 방법입니다. div 요소가 어떻게 변화하는지 비교해보세요.

<h1>HTML5 의미 요소를 이용한 레이아웃</h1>
<header>
 <h2>HEADER 영역</h2>
</header>
<nav>
 <h2>NAV 영역</h2>
</nav>
<section>
 <h2>SECTION 영역</h2>
</section>
<footer>
 <h2>FOOTER 영역</h2>
</footer>

body{text-align:center;}
header, footer{height:100px;line-height:100px;}
nav, section{width:200px;float:left;line-height:240px;}
header{background-color:#8ce99a;}
nav{background-color:#c0eb75;color:#fff;height:300px;}
section{text-align:center;padding:10px;}
footer{background-color:#ffc078;clear:both;}

어떤가요? 이 둘의 차이점을 알 수 있나요? div 요소의 경우에는 해당 코드를 봐야 어떤 의미가 있는지 알 수 있습니다. 하지만 의미 요소는 이름에서 나와 있듯이 명확하게 전달해 줍니다. 마찬가지로 크롬과 같은 브라우저도 이 둘의 차이를 명확하게 알고 있습니다.
따라서 레이아웃을 잡을 때 HTML5 의미 요소를 이용하면 명확하고 의미를 전달하기 때문에 사용하는 것이 좋습니다.