๐ป HTML์ ๊ธฐ๋ณธ๊ธฐ "ํ๊ทธ"
1. ํ๊ทธ
1-1. ํ๊ทธ๋?
- ์น ํ์ด์ง์ ๊ตฌ์กฐ์ ๋ด์ฉ์ ์ ์ํ๋ ๊ธฐ๋ณธ ์์
- ๊ฐ ํ๊ทธ๋ ํน์ ํ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ด ํ ์คํธ, ์ด๋ฏธ์ง, ๋งํฌ ๋ฑ์ ํจ๊ณผ์ ์ผ๋ก ํํํ ์ ์๊ฒ ํด์ค
- ex =>
<tag> something </tag>
1-2. ํ๊ทธ ๊ตฌ์กฐ
<tag arg="something"> content </tag>๋ฅผ ์์๋ก ์ค๋ช<tag> </tag>๋ ๊ฐ๊ฐ ์์ ํ๊ทธ, ์ข ๋ฃ ํ๊ทธ์ด๊ณ , ํ๊ทธ์ ์ด๋ฆ์ ๋ฃ๋๋ค.content๋ ํ๊ทธ์ ๋ด์ฉ์ด ๋ค์ด๊ฐ ์๋ฆฌ๋ค.arg="something"์์ arg ๋ tag์ ์์ฑ๋ช ์ด ๋ค์ด๊ฐ๋ ์๋ฆฌ๊ณ something์ ํด๋น ์์ฑ์ ์์ฑ ๊ฐ์ด๋ค.- ์์ฑ๋ช ๋์๋ฌธ์๋ HTML5์์ ๊ตฌ๋ถํ๊ณ ์์ง ์๋ค๊ณ ํ๋ W3C์์ ์๋ฌธ์๋ฅผ ๊ถ์ฅํ๋ฏ๋ก ์๋ฌธ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค๊ณ ํ๋ค.
- ์ฐธ๊ณ ๋ก W3school ์ ๋๋ฌด ์ข์ ์๋ฃ๊ฐ ๋ง๋ค!
2. ์ ์ ํ ํ๊ทธ
2-1. ๊ฒ์์์ง์ ๊ฐํ
- ์ฐ๋ฆฌ๊ฐ ๋ง๋ ์นํ์ด์ง๋ ๊ฒฐ๊ตญ ๊ณ ๊ฐ๋ค์ด ์ด์ฉํด์ผ ๊ฐ์น๊ฐ ์๊ธฐ๋ ๊ฒ์ด๋ค.
- ์์ญ ์๋ฐฑ์ต๊ฐ ์นํ์ด์ง ํฌ๋กค๋ฌ๋ ๊ฒฐ๊ตญ ํ๊ทธ๋ฅผ ๊ธฐ์ค์ผ๋ก ํฌ๋กค๋ง์ ์งํํ ๊ฒ์ด๋ฏ๋ก ์๊ฐ์ ์ผ๋ก๋ ๋์ผํ ์ง๋ผ๋ ๋ ธ์ถ ์ฌ๋ถ๊ฐ ๋งค์ฐ ๋ค๋ฅผ ์ ์๋ค.
- ๊ทธ๋ฌ๋ฏ๋ก ์ ์ ํ ํ๊ทธ์ ์ฌ์ฉ์ด ๋งค์ฐ ์ค์ํ๋ค.
2-2. ์น์ ์ ๊ทผ์ฑ
- ์น์ ๋ชจ๋ ์ด์์ฒด์ ์์ ๋์ผํ๊ฒ ๋์ํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ค.
- ๋ ๋ชจ๋ ๊ธฐ๊ธฐ์ ์ฅ์ ์ฌ๋ถ์ ์๊ด์์ด ์น์ ์ด์ฉํ ์ ์๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ค.
- ๊ทธ๋ฌ๋ฏ๋ก ์๊ฐ์ ์ธ ์์๋ฅผ ์ผ์ฐจ์์ ์ผ๋ก ๋ง์ถ๊ธฐ ๋ณด๋จ ์ ์ ํ ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ์กฐ์ํ๋ ๊ฒ์ด ์นํ์ด์ง์ ์๋ ๋ชฉ์ ์ ๋ง๊ฒ ๊ตฌํํ๊ธฐ ์ฝ๋ค.
3. HTML์ ๊ตฌ์กฐ
3-1. HTML ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์ฑ
HTML ๋ฌธ์๋ <html>, <head>, <body> 3๊ฐ์ง ์ฃผ์ ์น์
์ผ๋ก ๊ตฌ์ฑ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ฌธ์ ์ ๋ชฉ</title>
</head>
<body>
<h1>์ ๋ชฉ</h1>
<p>์ด๊ณณ์ ๋ณธ๋ฌธ ๋ด์ฉ์ด ๋ค์ด๊ฐ๋๋ค.</p>
</body>
</html>โ ์ฃผ์ ํ๊ทธ ์ค๋ช
<!DOCTYPE html>: HTML5 ๋ฌธ์์์ ์ ์ธ<html lang="ko">: ๋ฌธ์์ ์ธ์ด๋ฅผ ํ๊ตญ์ด(ko)๋ก ์ค์ <head>: ๋ฌธ์์ ๋ฉํ๋ฐ์ดํฐ(SEO, CSS, JavaScript ํฌํจ)๋ฅผ ์ ์<body>: ์ค์ ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ์ฝํ ์ธ ๋ฅผ ํฌํจ
3-2. <head> ํ๊ทธ์ ์ญํ
<head> ํ๊ทธ์๋ ์นํ์ด์ง์ ๋ฉํ์ ๋ณด๊ฐ ํฌํจ๋๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฌธ์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ๋ ๋ฐ ๋์์ ์ค๋ค.
๐ ์ฃผ์ ์์
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="์ด ํ์ด์ง๋ HTML ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ์ค๋ช
ํฉ๋๋ค.">
<meta name="keywords" content="HTML, ์น๊ฐ๋ฐ, ๊ธฐ์ด">
<title>HTML ๋ฌธ์ ๊ตฌ์กฐ</title>
</head><meta charset="UTF-8">: ํ๊ธ์ ํฌํจํ ๋ชจ๋ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ง์<meta name="viewport">: ๋ฐ์ํ ์น ๋์์ธ์ ์ํด ํ๋ฉด ํฌ๊ธฐ ์ค์ <meta name="description">: ๊ฒ์์์ง์ด ๋ฌธ์๋ฅผ ์ดํดํ ์ ์๋๋ก ์ค๋ช ์ถ๊ฐ<meta name="keywords">: ๋ฌธ์์ ๊ด๋ จ๋ ํค์๋ ์ ๊ณต (์ต๊ทผ ๊ฒ์์์ง์์๋ ์ค์๋๊ฐ ๋ฎ์์ง)<title>: ์นํ์ด์ง์ ์ ๋ชฉ (๋ธ๋ผ์ฐ์ ํญ์ ํ์๋จ)
3-3. <body> ํ๊ทธ์ ์ฝํ
์ธ ๊ตฌ์กฐ
<body>๋ด๋ถ์๋ ์ค์ ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ์ฝํ ์ธ ๊ฐ ๋ค์ด๊ฐ๋ค.
๐ ๊ธฐ๋ณธ์ ์ธ ๋ ์ด์์ ์์
<body>
<header>
<h1>์น์ฌ์ดํธ ์ ๋ชฉ</h1>
<nav>
<ul>
<li><a href="#">ํ</a></li>
<li><a href="#">์๊ฐ</a></li>
<li><a href="#">์ฐ๋ฝ์ฒ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>์น์
์ ๋ชฉ</h2>
<p>์ด๊ณณ์ ๋ณธ๋ฌธ ๋ด์ฉ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.</p>
</section>
</main>
<footer>
<p>© 2025 ์น์ฌ์ดํธ. ๋ชจ๋ ๊ถ๋ฆฌ ๋ณด์ .</p>
</footer>
</body>โ ์ฃผ์ ํ๊ทธ ์ค๋ช
<header>: ์น์ฌ์ดํธ์ ์๋จ ๋ถ๋ถ (๋ก๊ณ , ๋ค๋น๊ฒ์ด์ ํฌํจ)<nav>: ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด<main>: ๋ฌธ์์ ์ฃผ์ ์ฝํ ์ธ ์์ญ<section>: ๋ ผ๋ฆฌ์ ์ธ ๊ตฌ์ญ์ ๋๋ ๋ ์ฌ์ฉ<footer>: ์นํ์ด์ง์ ํ๋จ ๋ถ๋ถ (์ ์๊ถ ์ ๋ณด ๋ฑ)
4. ๊ด๋ จ ๊ฐ๋
- W3C: ์น ๊ธฐ์ ์ ํ์คํ์ ๋ฐ์ ์ ์ํด ๋ค์ํ ์ดํด๊ด๊ณ์๋ค์ด ๋ชจ์ฌ ์น์ ์ํธ ์ด์ฉ์ฑ๊ณผ ์ ๊ทผ์ฑ์ ์ฆ์งํ๋ ๊ตญ์ ๊ธฐ๊ตฌ
- ์น๋ธ๋ผ์ฐ์ ํฌ๋กค๋ฌ: ์น ํ์ด์ง๋ฅผ ์๋์ผ๋ก ํ์ํ๊ณ ๋ฐ์ดํฐ๋ฅผ ์์งํ์ฌ ๊ฒ์ ์์ง์ ์ธ๋ฑ์ค๋ฅผ ์์ฑํ๋ ์ํํธ์จ์ด ํ๋ก๊ทธ๋จ
- ๋ฉํ๋ฐ์ดํฐ: ๋ฐ์ดํฐ์ ๋ํ ์ ๋ณด๋ฅผ ์ค๋ช ํ๋ ๋ฐ์ดํฐ๋ก, ์ฃผ๋ก ๋ฐ์ดํฐ์ ๊ตฌ์กฐ, ๋ด์ฉ, ์ถ์ฒ ๋ฑ์ ์ ์ํ์ฌ ์ดํด์ ๊ด๋ฆฌ๋ฅผ ๋์
๐ ์ฐธ๊ณ ์๋ฃ
'Markup & Style > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| CSS JS ์๊ฐ (0) | 2025.03.13 |
|---|---|
| ์น(Web) ์๊ฐ (0) | 2025.03.11 |
