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

2011. 5. 26. 02:07ㆍIT/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다. - [본문으로]

관련글

댓글 8

티스토리툴바