본문으로 바로가기



HTML5 에 대해 들어보셨지만 HTML 과 HTML5 의 차이가 뭐가 있지? 라는 의문 점을 가질 수 있습니다.


이번 시간에는 HTML5 Semantic 태그에 대해 알아보도록 하겠습니다.


HTML5 Semantic


여기 아주 좋은 예가 있네요, 많은 분들이 들어보신 Bootstrap 도큐멘트 사이트인 http://getbootstrap.com 에 거의 모든 HTML5 Semantic 태그가 사용 되었습니다.


HTML5 Semantic 태그를 사용하면 구글 검색 등에서 상위에 잘 노출된다고 하니 귀찮지만 웹디자인 하실 때 적용하는 것이 좋겠습니다. 적용하는 것이 그렇게 어려운 것은 아니고요, 아래에 있는 태그들을 <DIV> 클래스 대신 적절히 사용해주기만 하면 됩니다.


제 블로그 HTML 강좌를 정주행하고 계시는 분이라면 아래 첨부된 이미지가 무엇을 뜻하는 것인지 아실거라 믿습니다.



<NAV> 태그: 바로가기

<HEADER> 태그: 바로가기

<ARTICLE> 태그: 바로가기

<SECTION> 태그: 바로가기

<ASIDE> 태그: 바로가기

<UL>, <LI> 태그: 바로가기

<FOOTER> 태그: 바로가기



<NAV> 태그는 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여기가 사이트의 상단부다! 라는 정의를 하는 것입니다. <NAV> 태그는 Navigation 을 줄인 말입니다. 우리가 차에 타고 어딘가로 이동할 때 내비게이션을 주로 사용하죠? <NAV> 태그 안에 이용해 사이트에 있는 다른 곳으로 이동하는 버튼을 두게 됩니다. 예를 들어 블로그의 카테고리 메뉴를 <NAV> 에 배치시킵니다.


아래 예제를 이용하면 이해하기 쉬울 것입니다. 예제에 사용된 <UL>, <LI> 태그는 배열 (리스트) 생성을 위한 태그로, 여기를 참고하시기 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <nav>
            <ul>
                <li>메뉴 1</li>
                <li>메뉴 2</li>
                <li>메뉴 3</li>
                <li>메뉴 4</li>
            </ul>
        </nav>
    </body>
</html>
cs


( * 위로 이동하기 )



<HEADER> 태그도 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여기가 사이트의 상단부다! 라는 정의를 하는 것입니다. <HEADER> 태그는 상단에서 페이지의 제목과 간략한 설명 등의 페이지에 대한 정보를 담아 페이지에 방문하는 사람들이 쉽게 접속한 페이지에 무슨 페이지인지 인지하게 돕습니다. 예를 들어 블로그의 글 제목과 작성일, 작성자 등이 되겠습니다. 또는 블로그의 이름만 붙기도 합니다.


아래 예제를 참고하면 도움이 될 것 같습니다. 아래 예제에 사용된 <h1> 은 주로 제목을 나타낼 때 사용되는데요, 텍스트 크기에 따라 <h1> ~ <h6> 까지 존재하고 있으니 여기를 클릭해 자세히 알아보도록 합시다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <header>
            <h1>게시글 제목</h1>
            <p>작성자: nano_</p>
            <p>작성일: 20160801</p>
        </header>
    </body>
</html>
cs


( * 위로 이동하기 )


<ARTICLE> 태그


<ARTICLE> 태그도 마찬가지로 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여기가 블로그의 본문이다! 라는 정의를 하는 것입니다. 게시글의 본문이 위치하게 됩니다. <ARTICLE> 안에는 <SECTION> 이 사용되니 아래에서 확인해 보도록 합니다.


( * <SECTION> 태그)

( * 위로 이동하기 )


<SECTION> 태그


<SECTION> 태그도 마찬가지로 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여긴 블로그 본문의 일부다! 라는 정의를 하는 것입니다. 블로그의 메인 페이지에 가게 되면 대략 3개에서 5개 정도의 글이 한꺼번에 나오게 되죠, 그 때 <SECTION> 태그가 활약을 하게 됩니다. <ARTICLE> 의 본문 안에서 <SECTION> 태그를 이용해 각각의 글을 감싸 나누는 역할을 하는 것이죠.


어려울 수도 있으니 아래의 예제를 통해 살펴보도록 합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <article>
            <section>
                <h1>다람쥐</h1>
                <p>헌 쳇바퀴에 타고파</p>
            </section>
            <section>
                <h1>다람쥐</h1>
                <p>헌 쳇바퀴에 타고파</p>
            </section>
            <section>
                <h1>다람쥐</h1>
                <p>헌 쳇바퀴에 타고파</p>
            </section>
        </article>
    </body>
</html>
cs


( * 위로 이동하기 )


<ASIDE> 태그


<ASIDE> 태그도 마찬가지로 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여기가 사이트의 옆 부분이다! 라는 정의를 하는 것입니다. 블로그에서 주로 위젯 등을 배치하는데 사용되는 공간입니다.


( * 위로 이동하기 )


<UL>, <LI> 태그


<UL>, <LI> 는 <DIV> 의 역할을 하고 있지만 다른 특수한 기능을 가지고 있습니다. 이들은 배열 (리스트) 의 형태를 이루게 됩니다. 어렵게 느껴지신다면 직접 <HTML> 로 아래 코드를 작성해 테스트해 보시기 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <ul>
            <li>TEST 1</li>
            <li>TEST 2</li>
            <li>TEST 3</li>
            <li>TEST 4</li>
            <li>TEST 5</li>
        </ul>
    </body>
</html>
cs


( * 위로 이동하기 )



<FOOTER> 태그는 <DIV> 처럼 특수한 기능은 하지 않고, 단순히 여기가 사이트의 최하단이다! 라는 정의를 하는 것입니다. 블로그나 사이트에서 맨 아래의 저작권 문구 등을 사용하는 공간입니다.


( * 위로 이동하기 )



댓글을 달아 주세요