HTML5 Sementic Tag

์‹œ๋งจํ‹ฑ(sementic) : '์˜๋ฏธ๊ฐ€ ํ†ตํ•˜๋Š”'์ด๋ผ๋Š” ๋œป์œผ๋กœ ์‹œ๋งจํ‹ฑํƒœ๊ทธ๋Š” ํƒœ๊ทธ๋งŒ ๋ณด๊ณ ๋„ ํŽ˜์ด์ง€ ๊ตฌ์กฐ๋ฅผ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ •์˜๋œ ํƒœ๊ทธ๋ฅผ ์˜๋ฏธ

HTML4 vs HTML5 ๋ฌธ์„œ

HTML4๋Š” divํƒœ๊ทธ๋กœ ์ฃผ๋กœ ํ™”๋ฉด ๊ตฌ์„ฑ์„ ํ•˜์˜€๊ณ , ์ˆ˜ ๋งŽ์€ ํƒœ๊ทธ๋“ค์„ ๋‹ค์‹œ id ์†์„ฑ์œผ๋กœ ๊ตฌ๋ถ„ํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ˆ˜์ฒœ ์ค„์ด ๋„˜๋Š” ์ฝ”๋“œ์—์„œ ์ผ์ผ์ด ํ—ค๋”, ๋ฉ”๋‰ด, ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ์ฐพ๋Š” ๊ฒƒ์€ ์‰ฝ์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋Ÿฌํ•œ ์ด์œ ๋•Œ๋ฌธ์— HTML5์—์„œ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๊ฐ€ ๋“ฑ์žฅํ–ˆ๋‹ค.

์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋กœ ์ž‘์„ฑํ•œ ์†Œ์Šค๋ฅผ ๋ณด๋ฉด ํƒœ๊ทธ๋งŒ ๋ณด๊ณ ๋„ ์–ด๋Š ๋ถ€๋ถ„์ด ์ œ๋ชฉ์ด๊ณ  ๋ฉ”๋‰ด์ด๊ณ  ์‹ค์ œ ๋‚ด์šฉ์ธ์ง€ ์‰ฝ๊ฒŒ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ์œ„ํ•œ HTML5 ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ

  • <header> : ๋จธ๋ฆฌ๋ง ์ง€์ •

    • ์ฃผ๋กœ ํŽ˜์ด์ง€ ๋งจ ์œ„์ชฝ์ด๋‚˜ ์™ผ์ชฝ์— ์‚ฝ์ž…ํ•œ๋‹ค.

    • <nav>๋ฅผ ์ด์šฉํ•ด ์‚ฌ์ดํŠธ ๋ฉ”๋‰ด๋ฅผ ๋„ฃ๋Š”๋‹ค.

  • ๊ทธ๋ฆฌ๊ณ  ๋ณธ๋ฌธ ์ค‘์— ์‚ฌ์šฉํ•ด ๋จธ๋ฆฌ๋ง๋กœ ์“ธ ์ˆ˜๋„ ์žˆ๋‹ค.

    • <header> ๋‚ด๋ถ€์— <header> ํ˜น์€ <footer>๊ฐ€ ์˜ฌ ์ˆ˜ ์—†๋‹ค.

  • <main> : ์ฃผ์š” ์ฝ˜ํ…์ธ 

    • ์ฃผ์š” ์ฝ˜ํ…์ธ ๋Š” ๋ฌธ์„œ์˜ ํ•ต์‹ฌ ์ฃผ์ œ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ•ต์‹ฌ ๊ฐ€๋Šฅ์„ฑ์— ๋Œ€ํ•œ ๋ถ€์—ฐ, ์ง์ ‘์ ์œผ๋กœ ์—ฐ๊ด€๋œ ์ฝ˜ํ…์ธ ๋กœ ์ด๋ฃจ์–ด์ง

    • IE์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๊ณ  ์žˆ๋‹ค.

    • ํ•œ ๋ฌธ์„œ์— ํ•˜๋‚˜์˜ ์š”์†Œ๋งŒ ํฌํ•จ ๊ฐ€๋Šฅ

  • <section> : ์ฃผ์ œ๋ณ„ ์ฝ˜ํ…์ธ  ์˜์—ญ ๋‚˜ํƒ€๋‚ด๊ธฐ / ๋ฌธ์„œ์˜ ์ผ๋ฐ˜์ ์ธ ์˜์—ญ์„ ์„ค์ • / ๋ฌธ์„œ๋ฅผ ๋‹ค๋ฅธ ์ฃผ์ œ๋กœ ๊ตฌ๋ถ„ ์ง“๊ธฐ์œ„ํ•ด ์‚ฌ์šฉ

    • ์„น์…˜์ œ๋ชฉ(h1~h6)

    • <section>์•ˆ์— <section>์„ ์“ธ ์ˆ˜ ์žˆ๋‹ค.

  • ๋ฌธ๋งฅ ํ๋ฆ„ ์ค‘์—์„œ ์ฝ˜ํ…์ธ ๋ฅผ ์ฃผ์ œ๋ณ„๋กœ ๋ฌถ์„ ๋•Œ ์‚ฌ์šฉ(article๋‚ด์—์„œ๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅ)

  • <article> : ์ฝ˜ํ…์ธ  ๋‚ด์šฉ ๋„ฃ๊ธฐ / ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜๊ฑฐ๋‚˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ์„ค์ •

    • ์›น์ƒ์˜ ์‹ค์ œ ๋‚ด์šฉ์„ ๋„ฃ๋Š”๋‹ค.

  • ํƒœ๊ทธ๋ฅผ ์ ์šฉํ•œ ๋ถ€๋ถ„์„ ๋–ผ์–ด ๋…๋ฆฝ์ ์œผ๋กœ ๋ฐฐํฌํ•˜๊ฑฐ๋‚˜ ์žฌ์‚ฌ์šฉํ•ด๋„ ์™„์ „ํ•œ ํ•˜๋‚˜์˜ ์ฝ˜ํ…์ธ ๊ฐ€ ๋œ๋‹ค๋ฉด ์‚ฌ์šฉ

    • ex) ๋ธ”๋กœ๊ทธ ๊ธ€, ํฌ๋Ÿผ, ๊ธฐ์‚ฌ ๋“ฑ

  • <aside> : ๋ณธ๋ฌธ ์ด์™ธ์˜ ๋‚ด์šฉ ํ‘œ์‹œ

  • ์‚ฌ์ด๋“œ๋ฐ”(ํ•„์ˆ˜ ์š”์†Œ ์•„๋‹˜) - ๊ด‘๊ณ , ๋งํฌ๋ชจ์Œ ๋“ฑ๋“ฑ

  • <nav> : ๋ฌธ์„œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋งํฌ(Navigation ์•ฝ์ž)

    • ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด๋ฟ๋งŒ ์•„๋‹ˆ๋ผ footer์— ์‚ฌ์ดํŠธ ๋งํฌ ๋ชจ์Œ์—๋„ ๋งŽ์ด ์‚ฌ์šฉ

  • <iframe> : ์™ธ๋ถ€ ๋ฌธ์„œ ์‚ฝ์ž…

    • ์›น ๋ฌธ์„œ ์•ˆ์— ๋‹ค๋ฅธ ์›น ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์™€ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ(inline frame)

      <iframe src="์‚ฝ์ž…ํ•  ๋ฌธ์„œ ์ฃผ์†Œ" [์†์„ฑ = "์†์„ฑ ๊ฐ’"]></iframe>

    ์†์„ฑ

    ์„ค๋ช…

    width

    ์ธ๋ผ์ธ ํ”„๋ ˆ์ž„์˜ ๋„ˆ๋น„(ํ”ฝ์…€, ๋ฐฑ๋ถ„์œจ)

    height

    ์ธ๋ผ์ธ ํ”„๋ ˆ์ž„์˜ ๋†’์ด(ํ”ฝ์…€, ๋ฐฑ๋ถ„์œจ)

    name

    ์ธ๋ผ์ธ ํ”„๋ ˆ์ž„์˜ ์ด๋ฆ„

    src

    ํ”„๋ ˆ์ž„์— ํ‘œ์‹œํ•  ๋ฌธ์„œ์˜ ์ฃผ์†Œ ์ง€์ •

    seamless

    ํ”„๋ ˆ์ž„์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ์—†์•  ๋งˆ์น˜ ๋ณธ๋ฌธ์˜ ์ผ๋ถ€์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก ๋งŒ๋“ ๋‹ค.(chrome, safari)

  • <address> : ์‚ฌ์ดํŠธ ์ œ์ž‘์ž ์ •๋ณด, ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด(์ฃผ์†Œ, ์ด๋ฉ”์ผ, ์ „ํ™”๋ฒˆํ˜ธ)

  • ์ฃผ๋กœ footer์•ˆ์— ์‚ฌ์šฉ

  • <div> : ์ฝ˜ํ…์ธ ๋ฅผ ๋ฌถ์–ด ์‹œ๊ฐ์  ํšจ๊ณผ๋ฅผ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉ(CSS์ ์šฉ)

    • ๋ณธ์งˆ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š๋Š” ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์„ค์ •

  • <footer> : ์ œ์ž‘ ์ •๋ณด์™€ ์ €์ž‘๊ถŒ ํ‘œ์‹œ

    • header, section, article๋“ฑ ๋‹ค๋ฅธ ๋ ˆ์ด์•„์›ƒ ํƒœ๊ทธ๋“ค์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ

    • <footer> ๋‚ด๋ถ€์— <header> ํ˜น์€ <footer>๊ฐ€ ์˜ฌ ์ˆ˜ ์—†๋‹ค.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" >
    <meta name="author" content="์ •๋‹คํ˜œ">
    <meta name="description" content="์ •๋‹คํ˜œ ์—ฐ์Šต ์˜ˆ์ œ">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>contents ๊ตฌ๋ถ„ ์˜ˆ์ œ</title>
    <link rel="stylesheet" href="./main2.css" type="text/css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h1>Section</h1>
            <article>
                <h2>Article Title</h2>
                <p>Contents</p>
            </article>
            <article>
                <h2>Article2 Title</h2>
                <p>Contents</p>
            </article>
            <article>
                <h2>Article3 Title</h2>
                <p>Contents</p>
            </article>
        </section>
        <aside>
            Aside
        </aside>    
    </main>
    <footer>
        <address>
            <a href="mailto:dev.dh0023@gmail.com">dev.dh0023@gmail.com</a>
            <a href="tel:+821012345678">010-1234-5678</a>
        </address>
    </footer>
</body>
</html>
/* css๋Š” ๋ถ€๋ชจ์š”์†Œ๋ถ€ํ„ฐ ์ž…๋ ฅํ•ด์ค˜์•ผํ•จ */

header {
    background-color: tomato;
    margin:  10px;
    padding: 20px;
}

header nav{

}

header nav ul {
    display: flex; /* ํ•œ์ค„๋กœ ๋‚˜์—ด๋˜๋„๋ก ์„ค์ •*/
}

header nav ul li{
    list-style: none; /* liํƒœ๊ทธ ์  ์ œ๊ฑฐ */
    margin: 10px;
}

main{
    display: flex;    
}


section{
    width: 70%;
    background-color: tomato;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box; /* padding์‹œ์— ํฌ๊ธฐ๊ฐ€ ๋Š˜์–ด๋‚˜์ง€ ์•Š๋„๋ก border-box๋กœ ์„ค์ •*/
}

section h1 {

}

article {
    background-color: yellowgreen;
    margin-bottom: 10px;
    padding: 10px;
}

article h2{

}
article p{

}
aside {
    width: 30%;
    background-color: tomato;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;

}

footer{
    background-color: tomato;
    margin: 10px;
    padding: 20px;
}


footer address{

}

footer address a{
    display: block;
}

IE8 ์ดํ•˜ ๋ฒ„์ „์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ํ•˜๋‚˜์š”?(์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Œ)

[์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ์ง€์› ์ƒํ™ฉ] -> [Index of features] -> [New semantic elements]

  1. CSS์—์„œ ๋ธ”๋ก ๋ ˆ๋ฒจ๋กœ ์ •์˜ํ•˜๊ธฐ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ž์‹ ์ด ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ํƒœ๊ทธ๋ฅผ ์ธ๋ผ์ธ ํƒœ๊ทธ๋กœ ์ทจ๊ธ‰ํ•œ๋‹ค. ์ธ๋ผ์ธ ํƒœ๊ทธ๋Š” ์œ„์น˜๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์—†๋‹ค. HTML5 ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” <style>ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ์ž์‹ ๋งŒ์˜ ์˜์—ญ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ํƒœ๊ทธ๋กœ ๋ฐ”๊พธ์–ด์ค€๋‹ค.

    header, section, nav, article, footer{
      display: block;
    }
  2. ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ์ง์ ‘ ์ •์˜ํ•˜๊ธฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํƒœ๊ทธ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

    <script>
         document.createElement('article');
         document.createElement('section');
         document.createElement('aside');
         document.createElement('nav');
         document.createElement('header');
         document.createElement('footer');
         .....
    </script>
  3. HTML5 Shiv ์‚ฌ์šฉํ•˜๊ธฐ [html5shiv.js๋‹ค์šด๋กœ๋“œ] -> [latest zip package] -> ์••์ถ•ํ‘ผ ํ›„ ์›ํ•˜๋Š” ํด๋”๋กœ ๋ณต์‚ฌํ•ด ์‚ฌ์šฉ

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ด์˜ ์ฐจ์ด๋ฅผ ๋ฉ”๊พธ์–ด์ฃผ๋Š” pollyfill

ํŒŒํŽธํ™”(๋ธŒ๋ผ์šฐ์ € ๋ณ„๋กœ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋Šฅ์ด ๋‹ค๋ฅธ ๊ฒƒ)๋ฅผ ์ค„์ด๊ณ  ๋น„์Šทํ•˜๊ฒŒ๋ผ๋„ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ shim(์‹ฌ) ๋˜๋Š” fallback(ํด๋ฐฑ)์ด๋ผ ๋ถ€๋ฅธ๋‹ค. html4shiv๋„ shim์˜ ์ผ์ข…์ด๋‹ค. pollyfill์€ ํŒŒํŽธํ™”๊ฐ€ ์ƒ๊ธฐ๋Š” ๋ธŒ๋ผ์šฐ์ €์— ์‚ฝ์ž…ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์Šค์Šค๋กœ ์ง„๋‹จํ•ด ํ•„์š”ํ•œ shim์„ ๋„ฃ์–ด์ค€๋‹ค. [HTML5 Cross Browser Pollyfills]

์ฐธ๊ณ 

Last updated

Was this helpful?