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)
์์ฑ
์ค๋ช
width
์ธ๋ผ์ธ ํ๋ ์์ ๋๋น(ํฝ์ , ๋ฐฑ๋ถ์จ)
height
์ธ๋ผ์ธ ํ๋ ์์ ๋์ด(ํฝ์ , ๋ฐฑ๋ถ์จ)
name
์ธ๋ผ์ธ ํ๋ ์์ ์ด๋ฆ
src
ํ๋ ์์ ํ์ํ ๋ฌธ์์ ์ฃผ์ ์ง์
seamless
ํ๋ ์์ ํ ๋๋ฆฌ๋ฅผ ์์ ๋ง์น ๋ณธ๋ฌธ์ ์ผ๋ถ์ฒ๋ผ ๋ณด์ด๋๋ก ๋ง๋ ๋ค.(chrome, safari)
<address>
: ์ฌ์ดํธ ์ ์์ ์ ๋ณด, ์ฐ๋ฝ์ฒ ์ ๋ณด(์ฃผ์, ์ด๋ฉ์ผ, ์ ํ๋ฒํธ)์ฃผ๋ก
footer
์์ ์ฌ์ฉ<div>
: ์ฝํ ์ธ ๋ฅผ ๋ฌถ์ด ์๊ฐ์ ํจ๊ณผ๋ฅผ ์ ์ฉํ ๋ ์ฌ์ฉ(CSS์ ์ฉ)๋ณธ์ง์ ์ผ๋ก ์๋ฌด๊ฒ๋ ๋ํ๋ด์ง ์๋ ์ฝํ ์ธ ์์ญ์ ์ค์
<footer>
: ์ ์ ์ ๋ณด์ ์ ์๊ถ ํ์header
,section
,article
๋ฑ ๋ค๋ฅธ ๋ ์ด์์ ํ๊ทธ๋ค์ ๋ชจ๋ ์ฌ์ฉํ ์ ์์<footer>
๋ด๋ถ์<header>
ํน์<footer>
๊ฐ ์ฌ ์ ์๋ค.
IE8 ์ดํ ๋ฒ์ ์์๋ ์ด๋ป๊ฒ ํ๋์?(์๋งจํฑ ํ๊ทธ๋ฅผ ์ง์ํ์ง ์์)
[์๋งจํฑ ํ๊ทธ ์ง์ ์ํฉ] -> [Index of features] -> [New semantic elements]
CSS์์ ๋ธ๋ก ๋ ๋ฒจ๋ก ์ ์ํ๊ธฐ ๋ธ๋ผ์ฐ์ ๋ ์์ ์ด ์ธ์ํ์ง ๋ชปํ๋ ํ๊ทธ๋ฅผ ์ธ๋ผ์ธ ํ๊ทธ๋ก ์ทจ๊ธํ๋ค. ์ธ๋ผ์ธ ํ๊ทธ๋ ์์น๊ฐ์ ๊ฐ์ง ์ ์๋ค. HTML5 ์๋งจํฑ ํ๊ทธ๋ฅผ ์ธ์ํ์ง ๋ชปํ๋ ๋ธ๋ผ์ฐ์ ์์๋
<style>
ํ๊ทธ๋ฅผ ์ด์ฉํด ์์ ๋ง์ ์์ญ์ ๊ฐ์ง ์ ์๋ ๋ธ๋ก ๋ ๋ฒจ ํ๊ทธ๋ก ๋ฐ๊พธ์ด์ค๋ค.์๋งจํฑ ํ๊ทธ ์ง์ ์ ์ํ๊ธฐ ๋ธ๋ผ์ฐ์ ์์ ํ๊ทธ๋ฅผ ์ดํดํ ์ ์๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ํ๊ทธ๋ฅผ ๋ง๋ค์ด์ค๋ค.
HTML5 Shiv ์ฌ์ฉํ๊ธฐ [html5shiv.js๋ค์ด๋ก๋] -> [latest zip package] -> ์์ถํผ ํ ์ํ๋ ํด๋๋ก ๋ณต์ฌํด ์ฌ์ฉ
๋ธ๋ผ์ฐ์ ์ฌ์ด์ ์ฐจ์ด๋ฅผ ๋ฉ๊พธ์ด์ฃผ๋ pollyfill
ํํธํ(๋ธ๋ผ์ฐ์ ๋ณ๋ก ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ด ๋ค๋ฅธ ๊ฒ)๋ฅผ ์ค์ด๊ณ ๋น์ทํ๊ฒ๋ผ๋ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋ฐฉ๋ฒ์ shim(์ฌ) ๋๋ fallback(ํด๋ฐฑ)์ด๋ผ ๋ถ๋ฅธ๋ค. html4shiv๋ shim์ ์ผ์ข ์ด๋ค. pollyfill์ ํํธํ๊ฐ ์๊ธฐ๋ ๋ธ๋ผ์ฐ์ ์ ์ฝ์ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ธ๋ผ์ฐ์ ๋ฅผ ์ค์ค๋ก ์ง๋จํด ํ์ํ shim์ ๋ฃ์ด์ค๋ค. [HTML5 Cross Browser Pollyfills]
์ฐธ๊ณ
Last updated
Was this helpful?