본문 바로가기
웹표준

HTMl5 레이아웃 만들기

by 샷타이거 2010. 2. 20.

HTMl5 간단한 레이아웃 만들기

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

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

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

html5 소스

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

소스는 다음과 같다.

html5 simple test

header

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/

댓글