Semantic Tag

[- Disclaimer -] 아래 내용은 정보보안 공부 목적으로 작성된 것이나, 이를 토대로 허가되지 않은 대상에 실습을 진행할 경우 해킹 시도로 간주하여 법적 처벌을 받을 수 있음을 알려 드립니다.

Block Tag

✦ Block Box

✧ 새 Line에서 시작하며 왼쪽 끝부터 오른쪽 끝까지 한 줄 통째로 점유

<div>DIV</div><div>DIV</div>
<div>DIV</div>
<div>DIV</div>
Plain Text
복사

Inline Tag

✦ Inline Box

✧ 옆에 다른 Tag 배치 가능

<div>DIV <span>span</span>ㅇㅅㅇ <span>스팸 </span></div><div>DIV <span>span</span>ㅇㅅㅇ <span>스팸 </span></div>
Plain Text
복사

Web Page Layout - HTML 4 vs HTML 5

✦ HTML4는 화면 구성은 전부 <div>, <Table>로 id 속성줘서 구분해 복잡하였으나 HTML 5는 표준화된 Semantic Tag 사용으로 어떤 기기에서도 문서 구조 쉽게 이해 가능

Semantic Tag - <header>

✦ Web Page나 Section의 머리말

✧ Web Page 제목 및 소개 등 간단한 설명

→ Logo, Top Menu, Carousel

Semantic Tag - <nav>

✦ Hyperlink 모음

✧ Web Page 내 목차 용도

→ Menu 만들 때 ul, a 사용…?

Semantic Tag - <section>

✦ 문서의 장이나 절 구성 역할

✧ 일반 문서가 여러 장 있듯이 Web Page에도 여러 Section

→ h1 ~ h6의 Heading Tag 사용

Semantic Tag - <article>

✦ 본문과 연관있지만 독립적인 Contents 담음

✧ 혹은 보조 기사, 블로그 포스트, 댓글 등

Semantic Tag - <aside>

✦ 본문에서 약간 벗어난 Note나 Tip

✧ 신문, 잡지 등 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등

→ Web Page 오른쪽이나 왼쪽에 주로 배치

Semantic Tag - <footer>

✦ 꼬리말

✧ 저자, 저작권 등 기재

Semantic Tag - Ex)

    <head>
        <style>
            html, body { margin: 0; padding: 0; height: 100%; }
            header { width: 100%; height: 15%; background: yellow; }
            nav { width: 15%; height: 70%; float: left; background: orange; }
            section { width: 70%; height: 70%; float: left; background: olivedrab; }
            aside { width: 15%; height: 70%; float: right; background: orange; }
            footer { width: 100%; height: 15%; clear: both; background: plum; }
        </style>
    </head>
    <body>
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <section>section</section>
        <footer>footer</footer>
    </body>
Plain Text
복사