프로그래밍/웹관련
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
2012. 1. 6. 13:25

IBM에서 제공하는 강좌를 보고 정리한 내용입니다.
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기

IBM의 디벨로퍼워크스는 정말 좋은 내용이 많습니다.
그것도 번역된걸로 말이죠 ㅎㅎㅎ


0.베이스 코드
원래 IBM강좌에서 처럼 CSS를 분리하는 것이 좋습니다만....귀찬으니 하나로 하겠습니다.
이 베이스코드를 기준으로 한단계씩 CSS를 적용하여 문서에서 자주쓰는 CSS가 어떻게 정의하는지 알아보겠습니다.
따로 에디터를 사용하지 않고 메모장으로 합니다.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="euc-kr" />
        <title>HTML5 연습 - 텍스트 스타일</title>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->

    <style type="text/css">
 /* 여기서 스타일을 연습해 봅시다 */


    </style>

    </head>
    <body>

<header>
    <hgroup>
        <h1>그룹이름</h1>
        <h2>서브 타이틀</h2>
    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">어바웃</a></li>
        <li><a href="#">콘택트</a></li>
    </ul>
    <ul>
        <li><a href="#">다음줄</a></li>
        <li><a href="#">로우</a></li>
        <li><a href="#">괜춘합니다잉~</a></li>
    </ul>
</nav>

<article>
    <header>
        <time datetime="2012-01-06" pubdate>
            <span>1월</span> 6
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">그림자 효과</a>
        </h1>
    </header>
    <p>바디 및 헤더, 푸터를 사용하는 것은 상당이 좋은것 같습니다.</p>
    <p>위에 는 헤더1입니다.</p>
    <section>
        <header>
            <h1>여긴 다음 헤더입니다.</h1>
        </header>
        <p>각각의 해더이지요.</p>
        <p>HTML문서가 더 구조화되서 참 좋은것 같습니다.</p>
    </section>
</article>

<footer>
    <p> 여기는 푸터 입니다. </p>
    <p> 문서의 푸터로 되있지만 해더와 짝을 이루어 사용하는 것도 좋을것 같습니다. </p>
</footer>


    </body>
</html>



1.섹션(section)
문서 구조화에 큰도움을 주는 섹션입니다.
(참고 : W3C - 4.4.2 section 요소)


<section>
    <header>
        <h1>여긴 다음 헤더입니다.</h1>
    </header>
    <p>각각의 해더이지요.</p>
    <p>HTML문서가 더 구조화되서 참 좋은것 같습니다.</p>
</section>


페이지에 여러 섹션(section, 주제)이나 문서가 들어가는 경우 각각을 구분할때 사용합니다.
일반적으로 html문서의 바디(bady)는 한개인데 이 한개의 바디에서 여러개의 주제를 넣는 경우 섹션으로 나누어 그룹으로 관리합니다.

이렇게 그룹화가 되어 있으면 가독성이 올라가고 html문서 자체가 XML처럼 구조화 되여 다른 곳에서 참조하거나 할때 큰 도움이 됩니다.


2. 헤더(header)
섹션을 구분해주는 헤더입니다.
(참고 : W3C - 4.4.8 header 요소)

<header>
    <hgroup>
        <h1>그룹이름</h1>
        <h2>서브 타이틀</h2>
    </hgroup>
</header>


페이지에 여러 섹션(section)이나 문서가 들어가는 경우 각각을 머리입니다.

헤더는 꼭 섹션에서만 쓰는것은 아니지만 제가봐선 여러 섹션이 있는 경우에는 짝을 이루는 것이 좋을 듯 합니다.

3.h그룹(hgroup)
섹션에 제목을 구룹화 하는 테그입니다.
(참고 : W3C - 4.4.7 hgroup 요소)
<header>
    <hgroup>
        <h1>그룹이름</h1>
        <h2>서브 타이틀</h2>
    </hgroup>
</header>

어떻경우에 사용하는 것이지 잘모르겠습니다.
h1이나 h2같은 서브타이틀이 많을 경우 그룹화를 하기 위해 사용한다는데 제가봐선 서브타이틀에 서브타이틀이 있는경우 각각의 서브 타이틀을 그룹화 하기 위해 사용하는 것 같습니다.

1. 주타이틀
  1-1.서브타이틀1
    1-1-1. 서브1에 서브1
    1-1-2. 서브1에 서브2
  1-2.서브타이틀2
    1-2-1. 서브2에 서브1
    1-2-2. 서브2에 서브2

이런 식으로 말이죠.


4.네비(nav)
네비게이션을 구성할때 사용하는 태그입니다.
(참고 : W3C - 4.4.3 nav 요소)
<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">어바웃</a></li>
        <li><a href="#">콘택트</a></li>
    </ul>
    <ul>
        <li><a href="#">다음줄</a></li>
        <li><a href="#">로우</a></li>
        <li><a href="#">괜춘합니다잉~</a></li>
    </ul>
</nav>

네비게이션은 보통 페이지의 빠른 이동을 위해 만들어두는 메뉴를 말합니다.

제가봐선 네비게이션 기능은 구지 nav로 구현할 필요는 없습니다.
하지만 여러페이지에 동일하게 들어가는 네비게이션이라면 nav로 구현하면 일괄성 유지도 쉽고 문서도 구조적으로 좋아 질것 같습니다.


5.아티클(article)
배포나 재사용이 가능한 섹션을 나타 냅니다.
(참고 : W3C - 4.4.4 article 요소)
<article>
    <header>
        <time datetime="2012-01-06" pubdate>
            <span>1월</span> 6
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">그림자 효과</a>
        </h1>
    </header>
    <p>바디 및 헤더, 푸터를 사용하는 것은 상당이 좋은것 같습니다.</p>
    <p>위에 는 헤더1입니다.</p>
    <section>
        <header>
            <h1>여긴 다음 헤더입니다.</h1>
        </header>
        <p>각각의 해더이지요.</p>
        <p>HTML문서가 더 구조화되서 참 좋은것 같습니다.</p>
    </section>
</article>

설명만 봐서는 무슨말인지 잘 모르겠습니다만 아마도 저작권관련하여 특정세션을 퍼가거나 재사용해도 된다는 의미 인것 같습니다.
혹은 재사용한(참조, 인용한 내용)을 표시하는것 같기도 하고요 ㅡ,.ㅡ;

구조적으로 퍼가도 되는 부분을 명시해주는 태그인것 같습니다.


6.타임(time)
시간을 나타네는 태그입니다.
(참고 : W3C - 4.6.10 time 요소)
<time datetime="2012-01-06" pubdate>
    <span>1월</span> 6
</time>

제가봐서는 타임 테그 자체가 문서에 의미있는 동작을 하진 않는것 같습니다.
화면에 표시되는 것이 없죠.

이 태그의 내용을 토데로 날짜를 출력한다던가 하는 동작을 따로 구현할때 구조적으로 날자데이터의 통일성을 유지시키는 용도로 사용해야 할듯합니다.
한마디로 datetime에 명시되있는 내용에 따라 오늘,내일등으로 변환해서 사용한다던가 하는 동작을 가능하게 해주죠

pubate속성은 넣게 되면 이 타임테그가 가지고 있는 시간은 가까운 아티클이나 아티클이 없다면 문서의 작성날짜임을 의미한다고 합니다.
이것이 무슨 의미인지 모르겠습니다 ㅡ.-;;;


7.푸터(footer)
문서나 섹션의 끝을 표현할때 사용하는 태그입니다.
(참고 : W3C - 4.4.9 footer 요소)
<footer>
    <p> 여기는 푸터 입니다. </p>
    <p> 문서의 푸터로 되있지만 해더와 짝을 이루어 사용하는 것도 좋을것 같습니다. </p>
</footer>

푸터 핸섭~
....
아 죄송합니다.
몹쓸 개그 본능 ㅎㅎㅎ

헤더와 마찬가지로 문서나 섹션의 끝을 나타네는 태그입니다.
일반적으로 출처나 작성자, 저작권알림 같은것들이 들어가겠습니다.


후기
HTML5를 접하고 난뒤 드는 생각은
"구조화하기 편해 젔구나"
입니다.

이말은 웹스캔같은 기술로 html을 처리하기 편해젔다는 의미이기도 하고 xml과 상호 변환이 쉬워진다는 의미도 됩니다.
설계만 잘한다면 html눈에 보이기 쉬우면서도 xml처럼 사용하는 것도 가능할듯 합니다.

그래도 새로운거 배우는건 언제나 힘들군요 ㅜㅡ



티스토리툴바