HTMl5 레이아웃 만들기

HTMl5 간단한 레이아웃 만들기

html5를 이용해서 간단한 레이아웃을 만들어보자

먼저 생각하는 레이아웃의 모양은 다음과 같다.

각 엘리먼트와 그 크기는 그림과 같이 할것이다

html5 소스

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

소스는 다음과 같다.

html5 simple test
header



nav

link
link
link




aside



section

article



footer

위에서 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://sianasiatiger.cafe24.com/study/5_html.html

html5 지원 브라우저

개인적으로 확인한 바로는 다음과 같다. 더낮은 버전이 지원가능할수도 있다. 정확한 자료가있다면 코멘트를...

• 파이어 폭스 3.5
• 오페라 10.0
• 구글크롬 4.0
• 사파리 3.0
• IE8

IE의 경우 6,7은 지원되지않는다. IE8의 경우도 역시 확실하지않다.

마지막으로 html5로 만들어진 여러 사이트를 구경하고싶다면 아래 사이트를 가보로독

http://html5gallery.com/