[๐ฑ๋ชฉ์ฐจ๐ฑ]
- ์๋งจํฑ ํ๊ทธ (Semantic Tag)๋?
- ์๋งจํฑ ํ๊ทธ ์ฌ์ฉ ์ด์
01. ์๋งจํฑ ํ๊ทธ(Semantic Tag)๋?
์๋งจํฑ ํ๊ทธ๋ semantic์ด๋ผ๋ '์๋ฏธ์' , '์๋ฏธ๋ก ์ ์ธ'๋ผ๋ ๋ป์ ๊ฐ์ง ํ์ฉ์ฌ ์ ๋๋ค. ์ฆ, ์๋งจํฑ ํ๊ทธ๋ ์๋ฏธ๋ฅผ ๋ถ์ฌํ ํ๊ทธ๋ผ๋ ๋ป์ด ๋ฉ๋๋ค. ๋ชจ๋ ์ง ์๊ณ ์์ ๊ฒ๋ง๊ฐ์ gpt ์ ๋ฐฐ๋์๊ฒ ์ฌ์ญค๋ณธ ๊ฒฐ๊ณผ
(์ ๋ ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๋ ์์ ์ด๋ฏ๋ก ๋์ด๋ฅผ ์ด์ด์ ๋ ์ค์ฌ๋ณด์๋ค์ ^^ ) <div>ํ๊ทธ๋ <span>ํ๊ทธ์ ๋ฌ๋ฆฌ ํ๊ทธ ์์ฒด์ ์๋ฏธ๊ฐ ๋ด๊ธด ํ๊ทธ์ธ <header>,<nav>,<main>,<article>,<footer>๋ฅผ ์๋งจํฑ ํ๊ทธ๋ผ๊ณ ํฉ๋๋ค. ์๊ฐ์ ์ผ๋ก ์ดํด๋ณด์๋ฉด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tag</title>
</head>
<body>
<!-- before -->
<!-- <div style="height: 50px; background: pink">Header</div>
<div style="height: 1000px; background: skyblue; display: flex">
<div style="background: orange; width: 80%">
Section
<div style="background: lime; height: 100px">Article</div>
<div style="background: darkgray; height: 100px">Article</div>
<div style="background: lime; height: 100px">Article</div>
<div style="background: darkgray; height: 100px">Article</div>
</div>
<div style="background: royalblue; width: 20%">Aside</div>
</div>
<div style="height: 50px; background: palegreen">Footer</div> -->
<!-- after -->
<!-- semantic tag๋ฅผ ์ด์ฉํด ์น ํ์ด์ง ๊ตฌ์ฑํ๊ธฐ! -->
<!-- div ํ๊ทธ๋ ์ญํ ๋ก๋ ๋ค๋ฅธ๊ฒ ์์. "์๋ฏธ๊ฐ ์๋ ํ๊ทธ" -->
<!-- header: ํ์ฌ ๋ก๊ณ , ๋ฉ๋ด ๋ชจ์ -->
<header style="height: 50px; background: pink">Header</header>
<!-- main: ํ๋์ html ๋ฌธ์์ ํ๋์ main ํ๊ทธ ๋ฐ๋์ง. ์ฃผ ์ปจํ
์ธ ์์ญ -->
<main style="height: 1000px; background: skyblue; display: flex">
<!-- section: article ๋ฌถ์. article: ํ๋์ ์ปจํ
์ธ -->
<section style="background: orange; width: 80%">
Section
<article style="background: lime; height: 100px">Article</article>
<article style="background: darkgray; height: 100px">Article</article>
<article style="background: lime; height: 100px">Article</article>
<article style="background: darkgray; height: 100px">Article</article>
</section>
<!-- aside: ์ฌ์ด๋์ ์์นํ๋ ๊ณต๊ฐ. ๊ด๊ณ ์์ญ, ๋ฉ๋ด ๊ตฌ์ฑ -->
<aside style="background: royalblue; width: 20%">Aside</aside>
</main>
<!-- footer: ์ฌ์ดํธ ๊ฐ์ฅ ์๋์ ์์น: ์ ์๊ถ ์ ๋ณด, ๋ฒ๋ น, ํ์ฌ ์ ๋ณด ๋ฑ ๊ธฐ์
-->
<footer style="height: 50px; background: palegreen">Footer</footer>
</body>
</html>๊ฐ๊ฐ ์๋งจํฑํ๊ทธ์ ์์ญ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
<header> : ํค๋์์ญ์ผ๋ก, ๋ก๊ณ , ๋ฉ๋ด, ์์ดํ ๋ฑ์ด ๋ค์ด๊ฐ๋ค.
<nav> : ๋ค๋น๊ฒ์ด์ ์์ญ์ผ๋ก ๋ค๋ฅธ ๊ณณ์ผ๋ก ์ด๋ ๊ฐ๋ฅํ ๋งํฌ๋ค์ด ๋ค์ด๊ฐ๋ค.
<main> : ์ฝํ ์ธ ์์ญ์ผ๋ก ํ html ํ์ด์ง๋น ํ๋ฒ ์ฌ์ฉํ๋๊ฒ์ด ๋ฐ๋์งํ๋ค.
<aside> : ์ฝํ ์ธ ์ ์ง์ ์ ์ธ ์ฐ๊ด์ด ์๋ ์์ ์๋ ์์ญ์ผ๋ก ๊ด๊ณ ๋ฑ์ด ๋ค์ด๊ฐ๋ค.
<article> : ํ๋์ ์๋ฏธ์๋ ์์๋ก ๊ธฐ์ฌ ๋ฆฌ์คํธ ์ค์์ ๊ธฐ์ฌ ํ๋๋ฅผ ์๋ก ๋ค ์ ์๋ค.
<section> : article์ ํฌํจํ๋ ์์ญ์ด๋ค. ๊ทธ๋ฃนํ๊ฐ ๋ชฉ์ ์ด๋ค.
<footer> : ํธํฐ ์์ญ์ผ๋ก ํ๋จ ์์ญ์ด๋ค.
02.์๋งจํฑ ํ๊ทธ ์ฌ์ฉ ์ด์
- SEO (Search Engine Optimization, ๊ฒ์์ต์ ํ)
- ์ ์ง๋ณด์์ฑ
์๋งจํฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๊ทธ๋ฅ ๋ค <div>ํ๊ทธ๋ฅผ ์จ๋ฒ๋ฆฌ๋ฉด ๋๋๋ฐ ๋ญํ๋ฌ ? ๋ผ๊ณ ์๊ฐํ ์ ์๋ค. ๋ฐ๋ก๋ฐ๋ก ๊ทธ ์ด์ ์ค ์ฒซ๋ฒ์งธ๋ ์ฝ๋ ๊ฐ๋ ์ฑ ํฅ์์ด๋ค. ์ฌ๋ฌ ์ฌ๋๋ค๊ณผ ํจ๊ป ์์ ํ ๋ ์ด๋ ๋ถ๋ถ์ด ํค๋ ์์ญ์ด๊ณ , ๋ณธ๋ฌธ ์์ญ์ธ์ง ์ฝ๊ฒ ์ ์ ์๋ค. semantic tag ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ <div>ํ๊ทธ๋ง ๊ฐ๋ํ๋ค๋ฉด ์์๋ฅผ ์ฐพ๊ธฐ ๋งค์ฐ ํ๋ค๋ค. semantic tag๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฒฐ๊ณผ์ ์ผ๋ก ์ ์ง๋ณด์ ํ๊ธฐ์ ์ฌ์์ง๋ค. ๋ํ SEO(Search Engine Optimization, ๊ฒ์์ต์ ํ) , ๊ฒ์์์ง์ HTML ์ฝ๋๋ฅผ ๋ถ์ํด ์ฌ์ดํธ๋ฅผ ๋ ธ์ถ์ํจ๋ค. ํฌ๋กค๋ฌ๊ฐ ํ์ด์ง์ ๊ตฌ์ฑ ์์๋ค์ด ๋ฌด์์ ์๋ฏธํ๋์ง ์ดํดํ์ฌ ์ฌ์ดํธ ๋ ธ์ถ์ ์ํฅ์ ์ค๋ค.
