HTMl5 레이아웃 만들기

웹표준 2010. 2. 20. 15:57

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/


설정

트랙백

댓글

  • 바삭 2010.04.11 19:36 ADDR 수정/삭제 답글

    홈페이지 만들기에 관심이 있어 들어왔다가 초보라.. 질문드려요~^^;//
    마지막에 있는 사이트에 들어가서 html5로 만들어진 사이트들을 둘러봤는데용,
    대부분이 IE8 에서 오류없이 잘 보이는데용,
    http://sianasiatiger.cafe24.com/study/5_html.html 요거는 파폭에서는 잘 보이지만
    IE8에서는 잘 안보이는데 어떤 차이인가요..?

    • Favicon of https://siana.tistory.com 샷타이거 2014.10.12 10:39 신고 수정/삭제

      IE의 경우를 대비해서 별도로 자바스크립트를 사용해야하지요..

      만약 브라우저가 IE라면 내용의 자바스크립트를 이용해야지요
      <!--[if IE] 스크립트 [endif]-->

      사용한 예시는 결과는 아래에서확인 할 수 있습니다.
      http://sianasiatiger.cafe24.com/study/5_html_IE.html

      이에 대해서는 간단히 트랙백으로 HTML5 IE핵을 설명해 올렸습니다
      http://siana.tistory.com/entry/HTML5-IE-%ED%95%B5

  • 감사합니다. 너무 너무 잘 읽었습니다. AD 클릭도 하고갑니당.