메모장



HTML5의 구조 태그 html5



HTML5와 CSS3, ECMAScript 5의 working draft단계이거나 최종 초안이 공개되었고
그에 맞춰 따라가야한다는 생각에 먼저 HTML5에 관련된 내용을 찾아 봤습니다.
HTML5의 맛은 봤으니 CSS3에 대해서 찾아논 자료를 공부해봐야할거 같네요.

HTML5명세서는 몇가지 흥미롭고 구조적인 마크업을 유용하게 할 수 있는 태그들을 추가했다.
이러한 태그들(매일 사용하는 주요한 것들)은 우리가 사용하는 코드(일반적으로 div)를
변경시켜줄 것이다.

그럼 한번 무엇인지 알아보자

1. Defining Structure(구조 정의)
 - <section></section>
   section은 내용을 모아 주제화 하는 것이고, header태그가 section태그보다 선행되어야 하고, section태그 뒤에는
   fotter태그가 와야 한다. section은 각각 부분마다 정의 될 수 있다.
 - <header></header>
   section의 header는 제목 혹은 제목을 그룹핑하거나 section의 보중 설명을 포함한다.
 - <footer></footer>
   footer는 누가 쓴것인지, 어떤 문서와 링크가 연결되어 있는지, copyright, 기타등등의 내용들을 포함하고 있다.
 - <nav></nav>
   이 태그에는 navigation영역을 정의한다. 링크의 리스트등과 같은 것들. nav의 정의 위치는 section,
   header, footer와 같은 주요한 태그 다음이어야한다.
 - <article></article>
   블로그, 매거진, 개요등과 같은 내용을 독립적으로 구성 할 수 있다.
 - <aside></aside>
   aside는 내용과 관련된 것을 나타낸다.

일반적인 블로그 페이지를 새로운 구조 태그로 적용해보자.
<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

그럼 이 태그를 사용할 수 있을까?

현재 나온 브라우져들은 지원을 하고 있고 IE6에서 또한 적용이 가능하다. 다만 몇가지 작은 변덕이 있는데
이 태그들을 사용하고자 하면 작은 문제들을 넘어가는 것이 필요하다.
첫번째, 새로운 HTML5 doctype은 대부분의 브라우져들이 이해하지 못한다.
다행히도 이런 내용에 유동적인 브라우져들 때문에 그들은 알 수 없는 태그들을 대처 할 수 있다.
이러한 알려지지 않은 태그(기본적인 스타일이 없는)이고, 이것들은 inline태그로 다루어져 왔다.
이러한 새로운 HTML5 태그들은 구조적인 내용이고 명확한 block level 요소이다.
그렇기 때문에 우리는 태그들에 css 스타일을 적용해주어야 한다. (display:block같은 속성)
css를 간단하게 부분적으로 확장하고 이러한 새로운 태그들은 바로 사용하기 때문에 바로 사용 할 수 있다.
물론 HTML5가 더욱더 지원되어지고, display:block과 같은 쓸모없는 속성은 제거되어져야 하고, 그것은
브라우져의 기본적인 style로 지원될것이다.

IE 지원
만약 IE지원을 요구한다라면 더 많은 이슈가 있을것이다.IE rendering engine은 새로운 태그들을 적용할 것이지만
어떠한 CSS내용도 인식하지 못할 것이다. 다행히도 IE는 매우 간단한 자바스크립트로 신속하게 대처하고 있다.
HTML5를 사용하기 위해선 각각 새로운 태그들을 위해 자바스크립트로 DOM을 만든다
이렇게 하면 새로운 태그에 대한 문제점을 없앨 수 있다. 그 코드는 다음과 같다.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

이 코드를 적용하기 이전에 HTML5에서의 script태그에 대해 얘기해보자.
HTML 어떠한 script태그에도 type="text/javascript"가 작성되었다고 가정한다. 기존에 넣었던 이 속성을 넣지
않아도 되고 매우 간단해 전다.

HTML5가 제공하는 태그들을 사용하여 문서의 구조를 만들 수 있다(몇가지 편법과 함께)
새로운 웹사이트를 작업할때 더욱 더 구조적으로 마크업을 정의하여 (HTML5를 고려하여)야 한다.


http://orderedlist.com/articles/structural-tags-in-html5
 (원문)


핑백

덧글

  • shasha 2010/07/12 16:50 # 삭제 답글

    HTML5 를 공부하려고요
    좋은 정보 감사해요..
    차근차근 보고 있어요
  • seye2 2010/07/13 16:17 # 답글

    별말씀을요 요즘 바뻐서 자주 업데이트를 못하고 올려놓은 자료들도 수정 좀 하고 보기 편하게 해야하는데 귀찮...조금이라도 도움이 된다면~더운데 수고하세요~
댓글 입력 영역