티스토리 스킨 만들기 2 - 페이지 구성 만들기 (HTML5)

2011. 5. 26. 02:07IT/Tistory Tips


IE8의 HTML5 Section 요소 지원 현황 < IE8의 HTML5 Section 요소 지원 현황>

티스토리 스킨 만들기 1 - 페이지 구성 만들기에서는 HTML4와 XHTML까지 사용하던 div 요소로 페이지를 구성했다. 시각적으로 아무런 문제가 없지만, 페이지 구성을 만들기 위한 요소와 기타 세부 구성을 위한 요소가 구별되지 않는다. 또 앞으로 HTML5가 주류를 이룰 것을 생각하면 새 스킨은 HTML4나 XHTML보단 HTML5 구성을 따르는 것이 나을 수 있다. 페이지의 구조적인 구성을 위해 HTML5에선 header, nav, article, aside, footer, hgroup, section 요소가 추가되었다. 앞의 글에서 IE 8 이하에서 HTML5의 section 요소1각주 1HTML5에 추가된 section 요소는 header, article, aside, footer, section, hgroup, nav다.를 지원하지 않는다고 했지만, html5shiv를 사용하면 HTML5 요소로 구성한 웹페이지를 IE에서도 제대로 표시할 수 있다.

먼저 HTML5로 페이지 구성을 만들고 HTML과 CSS에 각 하나씩만 추가하면 IE와 기타 브라우저에서 모두 제대로 사용할 수 있는 웹페이지가 완성된다.

일단 페이지 구성은 이전과 똑같이 하면서 div 요소만 상황에 맞는 HTML5 section 요소로 바꿔보자.

<header id="header">
<section id="content">
<article class="main">
<footer id="footer">

새로운 요소에 대해 잠깐 설명하자면, header는 이전의 div id="header"와 같은 웹페이지 전체 제목을 포함한 부분이고 footer는 div id="footer"와 같은 저작권 정보나 기타 정보를 표시하는 부분이다. aside는 사이드바고 nav는 내비게이션 메뉴(목록, 블로그 메뉴 등)를 표시하는 요소다. hgroup은 h1~h6의 제목 요소를 배열할 때 사용할 수 있는 항목이다.

여기서 중요한 것이 section과 article이다. section은 연관된 내용을 포함하는 한 부분을 의미하는 요소이고 article은 그 자체가 하나의 발행될 수 있는 문서임을 나타낼 때 사용하는 요소다. 예를 들자면 일관된 내용을 표현하는 웹페이지 전체를 article로 표현할 수 있고 블로그에선 메뉴나 사이드 바 등을 제외한 게시물 하나를 article로 표현할 수 있다. section은 쓰임이 좀 더 다양한데, article을 포함하는 큰 틀로 사용할 수도 있지만, article이나 aside에 포함되는 세부 항목을 표현할 때 div 대신 사용할 수도 있다. 그럼 이전에 사용하던 div는 어떤 때 사용할까? div는 article도 아니고 section도 아닌, 즉, 특별히 연관이 없는 항목 또는 시각적 구성을 위한 스타일 지정을 위해 생성하는 항목에 사용할 수 있다. article과 section 등 HTML5 section 요소에 대해선 기회가 있으면 다시 이야기하자. 어쨌든, 위 그림과 비슷하게 구성하면 대강 완성이다.

레이아웃 HTML 코드(HTML5)
<header id="header">header 내용</header>
<section id="content">
<article class="main">본문(article) 내용</article>
</section>
<aside id="aside">사이드 바 내용</aside>
<footer id="footer">footer 내용</footer>

블로그 구성을 마쳤으면 이제 html5shiv를 사용하겠다고 선언할 차례다. html5shiv를 사용하지 않으면 IE8 이하에선 HTML5 요소를 인식하지 못하므로 웹페이지가 제대로 표현되지 않는다. html5shiv 추가는 아주 간단하다. 스킨 편집 화면 [HTML/CSS 편집]의 skin.html 부분에 <head>와 </head>를 찾아서 그 사이에 아래의 내용을 삽입한다.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

간단하다. 이걸로 이제 IE8 이하에서도 HTML5 요소를 지원한다. 그런데 이게 웬걸. IE뿐 아니라 다른 모든 브라우저에서 내가 원하는 레이아웃이 표현되지 않는다. 왜? 각 브라우저의 User Agent CSS에 HTML5 section 요소의 스타일이 정의되지 않아서다. header, article, footer, aside 등은 block 속성을 지녀야 div 요소를 대체할 수 있는데 그렇지 못하므로 제대로 표현되지 않는다. 너비나 높이를 지정할 수 없는 요소를 페이지 구성에 사용할 수 있을 리가 없다. 그럼 어떻게 하지? 역시 간단하다. [HTML/CSS 편집]에서 style.css에 아래의 내용을 추가하면 div 요소를 사용할 때와 똑같아진다.

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

끝! 이제 완성이다. 물론 doctype을 포함한 많은 부분이 남았지만, 일단 기본적인 레이아웃은 완성이다. 페이지 구성에 필요한 너비 지정, 요소 배치 등의 CSS는 티스토리 스킨 만들기 1 - 페이지 구성 만들기를 참고 한다.


  1. HTML5에 추가된 section 요소는 header, article, aside, footer, section, hgroup, nav다. - [본문으로]
  • 프로필사진
    알 수 없는 사용자2011.07.19 02:50

    아 html5에서는 항상 들어가는 것들을 div id로 구분하는게 아니라 의미있는 속성으로 만들었군요.
    브라우저만 좀 잘쓰면 핵없이 되는데.. 익플8이하 쓰는 사람들이 꽤 많이 있어서 ㅠㅠ
    글 쭉보다 보니까 신경안쓰던 htm5 알게 되었네요 감사합니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.19 17:05 신고

      HTML5의 영역 요소를 사용하면 소스를 한 눈에 알아보기도 쉽고 각 공간을 의미에 맞게 사용할 수 있어서 좋죠~ 대신 IE8 이하를 사용하시는 분들이 많으니 html5shiv나 기타 Ie8 이하에서 HTML5 요소를 사용할 수 있게 만드는 스크립트를 사용해야 되더라구요.
      직접 웹페이지 만들 때도 div보단 header나 article로 구분하는 것이 원하는 부분을 찾아 수정하기에 쉽네요.^^

  • 프로필사진
    Favicon of http://www.interoasis.net BlogIcon interoasis2011.08.06 11:50

    지난 겨울방학때 웹표준에 대해서 조금 맛만보고 여름방학 맞아서 다시 조금 보고있는데 그 사이에HTML5가 거의 모습을 다 갖췄나보네요. 그때만해도 웹브라우저에 구현이 안됐던게 많아서 XHTML1.1로 블로그 만들었었는데... 이제 CSS3만 나오면 되는건지.ㅎㅎ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.06 16:28 신고

      IE를 제외하면 웬만한 웹 브라우저에선 기본적인 HTML5 요소를 지원하더라구요. 전 가장 많은 부분을 지원하는 크롬을 사용하고 있어서 내가 생각했던 게 다른 브라우저에센 제대로 나오지 않을 때가 많습니다. 그래서 기본 레이아웃 외엔 HTML5 요소를 거의 안쓰게 되네요.
      CSS3은 워낙 다양하기도 하지만, 애니메이션이나 화려한 부분은 거의 지원되지 않으니 좀 아쉽긴 합니다. CSS3의 모든 게 웹 브라우저에서 구현된다면 정말 재미있을텐데요^^

  • 프로필사진
    알 수 없는 사용자2012.01.21 18:26

    잘보고 갑니다. 저도 블로그스킨을 하나 만들고 싶은데,, 컴실력이 많이 딸립니다. 좋은 기술들 많이 배우고 갑니다. . 감사드립니다.

  • 프로필사진
    알 수 없는 사용자2013.04.26 16:02

    이제 막 티스토리 블로그를 시작 중인데요....열심히 공부해서 블로그를 잘 만들어 봐야겠습니다. 글 잘 읽고 갑니다.