[HTML] #3-3 시맨틱 요소(semantic element) 알아보기

1. 고정화 된 시멘틱 요소

 

 이전 게시글(#3-1)에서도 언급했듯 개발자들이 웹페이지를 만들 때 사용하는 코드들은 대체적으로 유사하다.

 그렇기에 그런 코드들을 하나로 묶어 하나의 코드화 시키는 과정들이 진행되며 새로운 요소들이 만들어졌다.

 이를 시멘틱 요소, 라고 부른다.

 

 시멘틱, 시멘틱.

 고정되었다는 뜻이라고 하길래 공사장에서 흔히 쓰는 결합제인 시멘트(cement)인 줄 알았는데 전혀 아니다.

 (농담따먹기가 아니라, 진담이다 ㅎ)

 

 시멘틱(semantic)은 '의미'라는 뜻이다.

 즉 태그의 이름의 의미만으로도 그 용도를 짐작할 수 있는 태그라는 뜻이다.

 우리는 이 전 게시물에서 헤더 부분을 만들 때 <div>를 사용해서 블럭을 잡아주는 여러 코드를 입력해야했지만 <header>코드 하나만으로 그 작업들을 모두 해준다는 의미다.

 

 시멘틱 요소들의 큰 종류는 아래와 같다.

다양한 시맨틱 요소

 

 위의 태그들 중에서 설명이 필요한 태그들에 대한 설명은 아래를 참고해보자.

<article>	주로 내용이 있는 부분들을 지정하는 경우 사용. 내용이 없는 부분은 사용하지 않음.
<aside>	헤더, 메인, 푸터가 아닌 영역을 지정할 때 사용.
<nav>	링크로 구성되어있는 섹션이 필요할 때 사용.
<section>	일련번호로 구성된 제목을 지정하는 경우에 사용 <article> / <nav> / <aside>로 나눌 수 있다

 이제 이 시맨틱 요소를 사용하여 이전 게시물(#3-2)에서 만들었던 웹사이트를 똑같이 만들어보자.

 

 

2. 동행복권 웹페이지와 시맨틱 요소

 

 시맨틱 요소를 사용해서 똑같은 동행복권 웹페이지를 한번 더 만들어보자!

 

 1) 헤더

 

 헤더는 똑같이 두 가지의 섹션으로 나누려한다.

 첫 번째 섹션은 보이는 것과 똑같이 제목과 버튼을 출력시킨다.

 그리고 두 번째 섹션에 보이는 버튼들은 앞에서 했던 것과는 조금 다르게 출력시킬 것이다.

 왜냐하면 마우스를 올렸을 때 하단에 새로운 창이 뜨는 버튼들이기 때문이다.

 

마우스를 올리면 새로운 창이 아래에 열린다.

 

 이것은 버튼에 새로운 페이지가 링크되어있는 경우이다.

 이럴 경우에는 위에서 살펴보았던 시맨틱 요소 중 <nav> 태그를 활용한다.

 그래서 <nav> 태그를 섹션 아래에 하나 잡아준 뒤, 버튼마다 링크를 가져올 수 있도록 <a href> 태그를 사용한다(링크를 따로 걸진 않았다).

 

 헤더의 코드는 아래와 같다.

<header>
    <section>
        <span>동행복권</span>
        <input type="button" value="로그인">
        <input type="button" value="회원가입">
        <input type="button" value="마이페이지">
        <input type="button" value="고객센터">
    </section>
    <section>
        <h1 style="display: none;">대분류</h1>
        <nav>
            <ul style="list-style: none;">
                <li><a href="">복권구매</a></li>
                <li><a href="">복권정보</a></li>
                <li><a href="">당첨결과</a></li>
                <li><a href="">판매점</a></li>
                <li><a href="">이벤트</a></li>
                <li><a href="">행복공감</a></li>
            </ul>
        </nav>
    </section>
</header><!-- header end -->

 

 이렇게 하고 출력을 하면 아래와 같이 2번째 섹션의 각각의 항목이 클릭을 할 수 있는 하이퍼링크 상태가 된다.

 

 

 

 2) 메인

 메인도 이전 게시글에서 했던 것과 같이 왼쪽 섹션과 오른쪽 섹션을 구분해두려한다.

 왼쪽을 sub, 오른쪽을 content로 명명해서 블럭을 나누어서 코드를 입력하고 출력한다.

 

 - sub

 위에서 했던 작업과 똑같이 진행된다.

 각 항목은 또 다른 페이지로 넘어가는 링크의 역할을 할 수 있는 항목이 되어야 하기 때문에 <nav> 태그를 사용하고 링크를 걸 수 있도록 만들어주었다.

 

 

 - content

 <article>을 사용하여서 진행해보려 한다.

 이 태그는 섹션보다 더 작은 부분을 표현할 때 사용했다.

 다른 페이지의 복권에 대한 내용들을 담았다.

 자세한 내용은 코드와 출력 결과를 살펴보자!

 

<main>
    <h1 style="display: none;">본문</h1>
    <div id="sub">
    <h2 style="display: none">중분류</h2>
        <span>판매점</span><br>
        <nav>
        <ul style="list-style: none;">
            <li><a href="">구입처안내</a></li>
            <li><a href="">당첨판매점</a></li>
        </ul>
        </nav>
    </div><!-- sub end -->
    <div id="content">
        <article>로또는 온라인 복권입니다</article>
        <article>자동, 반자동, 수동으로 고객들이 선택하여 구입할 수 있습니다</article>
        <article>판매량에 따라 복권기금과 1등 당첨금액이 결정됩니다</article>
    </div><!-- content end -->
</main><!-- main end -->

main의 출력 결과물

 

 3) 어사이드(aside)

 웹 사이트의 퀵 메뉴, 광고 등이 담기는 공간이다(상단의 그림을 참고해보자).

 시맨틱 요소가 담긴 태그를 활용하여 쉽게 만들 수 있다.

<aside>
    퀵메뉴 및 광고
</aside><!-- aside end -->

 

 4) 푸터

<footer>
    <section>
        <h1 style="display: none;">꼬리말</h1>
        <nav>
        <ol style="list-style: none;">
        <li><a href="">이용약관</a></li>
        <li><a href="">개인정보 처리방침</a></li>
        <li><a href="">인쇄복권당첨금지급기준</a></li>
        </ol>
        </nav>
    </section>
    <section>
        <article>주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-3063</article>
    </section>
</footer><!-- footer end -->

 

 푸터 부분도 <div>를 사용해 두 부분으로 나누어 작업을 진행했었다.

 그 작업을 이번엔 2개의 <section>으로 나누어 진행했다.

 각 항목들 중 링크를 걸어야하는 경우에는 <nav>를 사용하였다.

 

어사이드와 푸터 부분이 출력된 모습이다, 어사이드부분이 퀵메뉴처럼 배치되고 보이기 위해선 CSS에서의 추가 작업이 필요하다

 

 

 

3. 동행복권 웹페이지, 코드 비교