HTML5로 간단한 레이아웃 만들기

hmtl5로 간단한 레이아웃을 만들어 보자.

생각하는 레이아웃의 모양은 이렇다.

각 엘리먼트의 크기는 그림에 나와있는 수치대로 할것이다.

HTML5 소스

위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, article) 맨아래 풋터(footer)를 둘것이다.

소스는 다음과 같다.

<div>
<!--헤더시작-->
<header>
<h1>html5 simple test</h1>
<p>header</p>
</header>
<!--네비게이션-->
<nav>
<p>nav</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<!--사이드바-->
<aside>
<p>aside</p>
</aside>
<!--콘텐츠부분-->
<section>
<p>section</p>
<article>
<p>article</p>
</article>
</section>
<!--풋터-->
<footer>footer</footer>
</div>

위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다.

CSS로 완성

이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을 none으로 한다.

*{ margin:0; padding:0;}
ul,li{list-style:none;}

중앙에 배치하기

대부분의 사이트는 가운데 배치한다 그방법중 하나가 body엘리먼트의 텍스트위치를 가운데로 잡아주고 그다음 div엘리먼트로 감싸서 margin:0 auto; 이렇게 주어 가운데로 배치하는방법이다.

body{ text-align:center; color:#FFF; background:#000;}
div#wapper{ text-align:left; width:800px; margin:0 auto; }
/*가로 넓이는 그림처럼 800px로 잡아주었다*/

display block

html5의 새로추가된 엘리먼트를 display:block; 으로 해줘야 된다 그래야 css가 먹힌다. 브라우저의 문제인지 정확한 이유는모르겠지만 어쨌든 display:block;으로 잡아주자.

header, footer, nav, aside, section, article {
display:block; 
}

너비 잡아주기

각각의 너비를 잡아주자 그림을 참고하자. 그리고 aside는 왼쪽으로 배치 section은 오르쪽으로 배치시켰다.

header, nav, footer{
width:100%;
}
aside{
width:30%;
float:left;
}
section {
margin-bottom:10px;
width:65%;
float:right;
}

남은 건 마진, 패딩 조금 주는 거, 그리고 배경색 결정 등이다.

header, footer, nav, aside, section{
margin-top:10px;
}
header, nav, aside, section, footer {
background-color: #666;
}
footer {
clear:both;
/* asdie와 section을 float시켰기
째문에 그아래위치하도록 clear*/
}

article부분은 약간 다르게 꾸며 주었다.

 
article {
width:90%;
margin:20px;
background-color: #999;
}

이렇게 함으로서 완성이 된다.

출처 : http://grid4me.boonpil.com/2012/04/03/html5로-간단한-레이아웃-만들기