타이틀이미지

문서의 구조

표준에서 마크업을 할 때 생각해야 할 부분이 시멘틱(Symentic, 의미에 맞는)이라 생각합니다. 이런 부분은 XHTML 에서 독타입(DTD)과 아울러 중요하게 여기던 것이었는데요. 그래서 여러분도 아시다시피 표준에서는 <table> Coding 을 하지 말고 구조적인 방식으로 <div> Coding 을 하도록 주문했었습니다.

사실 이런 <div> Element 로 구조를 짠다는 것은 시멘틱이라고 하기는 어렵습니다. 왜냐하면 단순하게 구조 부분에 <div>를 적용한다고 해서 구조의 '의미'를 쉽게 알 수가 없다는 것이죠. 그래서 우리는 의미를 쉽게 알기 위해 선택자를 만들어 적용하고 그 선택자를 통해 의미를 이해하려 했습니다. 예를들면,

XHTML 구조   HTML5 구조

<div id="header">

   ...

</div>

  

<header>

   ...

</header>

위 비교에서처럼 HTML5는 태그 자체로 의미를 가진다고 하겠습니다. 기존에 의미는 없고 단순히 블럭형태의 구조를 짜는 식의 설계가 아닌 의미에 맞는 설계가 가능하다는 이야기입니다.

HTML5 기본 문법구조

<!DOCTYPE html>

<html lang="ko">

<head>

     <meta charset="UTF-8 /">

     <title>HTML5 기본 문법구조</title>

</head>

<body>

     <header>

         <hgroup>

             <h1>머리말 제목</h1>

         </hgroup>

     </header>

     <nav>

         <ul>

             메뉴01

         </ul>

     </nav>

     <section>

         <article>

             <header>

                 <h1>섹션 제목</h1>

             </header>

             <section>

                <h2>섹션 소제목</h2>

             </section>

          </article>

       </section>

       <aside>

          콘텐츠를 제외한 배너

      </aside>

       <footer>

           <small>Copyright ⓒ jopenbusiness 2010, All Rights Reserved.</small>

       </footer>

   </body>

</html>

Metadata Content

콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다. :: <head> 태그 내에서 사용되며, title, meta, link, script, style 태그가 있다.

Flow Content

일반적으로 <body> 태그내에서 사용되는 대부분의 태그를 의미 한다.

iframe

Sectioning Root

body, blockquote, figure 태그가 대표적이다.

Sectioning Content

header과 footer의 범위를 결정하는 요소로 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가지고 있다. :: section, article, nav 태그가 대표적이다.

4단 레이아웃의 비교

비교적 많이 사용되는 4단 레이아웃으로 XHTML과 HTML5의 비교를 해보겠습니다. 물론, 비교하는 엘리먼트는 새로이 추가된 엘리먼트로 뒤에 자세한 의미와 함께 설명하겠습니다.

<header><side-bar><contents><footer> 부분을 가진 4단 레이아웃을 가지고 구조를 만들어 보겠습니다. 단순히 '의미'에 맞는 구조라는 측면에서의 CODE 이니 스타일은 제외하겠습니다.

XHTML 구조   HTML5 구조

<div id="header">

   <h1>제목</h1>

</div>

<div id="nav">

   <h2>메뉴</h2>

   <ul>

      <li>내소개</li>

      <li>포트폴리오</li>

   </ul>

</div>

<div id="contents">

   <h2>본문 제목</h2>

   <p>내용</p>

</div>

<div id="footer">

   <p>저작문구</p>

</div>

  

<header>

   <h1>제목</h1>

</header>

<nav>

   <h2>메뉴</h2>

   <ul>

      <li>내소개</li>

      <li>포트폴리오</li>

   </ul>

</nav>

<section>

   <h2>본문 제목</h2>

   <p>내용</p>

</section>

<footer>

   <small>저작문구</small>

</footer>

HTML5에서는 엘리먼트만으로도 쉽게 어떤 구조인지가 쉽게 구분할 수 있도록 바꼈습니다. 이를 비롯해 비디오, 오디오, 도큐먼트 자체를 켄버스로 지정해서 그림을 표현할 수 있는 엘리먼트를 비롯해 API(애플리케이션)을 활용할 수 있는 다양한 방법이 추가되었습니다.

다음 강좌는 새로이 추가된 엘리먼트들에 대해서 알아 보겠습니다.

위로