HTML ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ
<!DOCTYPE html>
<html>
<head>
๋ฌธ์๋ฅผ ์ ์ํ๋ ๋ฐ์ดํฐ(HTML ๋ฌธ์์ ๋ํ ์ ๋ณด๋ก ๊ตฌ์ฑ)
</head>
<body>
๋ฌธ์์ ํ์๋๋ ์ปจํ
์ธ (ํ๋ฉด์ ๋ณด์ฌ ์ง๋ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑ)
</body>
</html>
<!DOCTYPE html>์ DTD(Document Type Definition) ๋ผ๊ณ ํ๋ค.
DTD๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฒ์ ์ด ์๋๋ฐ ๋ฒ์ ์ ๋ฐ๋ผ์ ๋ธ๋ผ์ฐ์ ์ ํด์ ๋ฐฉ๋ฒ์ด ๋ฌ๋ผ์ง๋ค.
DTD๋ ๋ธ๋ผ์ฐ์ ์๊ฒ HTML ๋ฌธ์๊ฐ ์ด๋ค ํ์ค์ ๋ฐ๋ผ ์์ฑ๋์๋์ง ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ค.
<head> ํ๊ทธ๋ ๋ฌธ์์ ๋จธ๋ฆฌ ๋ถ๋ถ์ผ๋ก ์น ๋ฌธ์์ ๋ํ ์ ๋ณด๋ฅผ ๊ธฐ์ ํ๋ ๊ณณ์ผ๋ก ์น๋ธ๋ผ์ฐ์ ์์๋
๋ด์ฉ์ด ํ์๋์ง ์๋๋ค. <head> ํ๊ทธ ๋ด์๋ ํ์ฌ HTML ๋ฌธ์์ ๋ํ ๋ฉํ๋ฐ์ดํฐ(metadata)๋ฅผ
์ ์ํ๋ ์ฌ๋ฌ ํ๊ทธ ๋ค์ด ์ฌ์ฉ๋๋ค. ๋ฉํ๋ฐ์ดํฐ๋ ๋ฐ์ดํฐ๋ฅผ ์ค๋ช
ํ๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฏธํ๋ฉฐ ํ์ฌ
HTML ๋ฌธ์์ ๋ํ ์ค๋ช
์ ๋ณด๋ค์ ์ ์ํ ์ ์๋ ํ๊ทธ๊ฐ ์ฌ์ฉ๋๋ค. ์๋ฅผ ๋ค๋ฉด ๋ฌธ์์ ์ ๋ชฉ์ ์ ์
ํ๊ฑฐ๋ ๋ฌธ์์ ์คํ์ผ, ๋ฌธ์์ ์ฌ์ฉ๋๋ ์คํฌ๋ฆฝํธ ๋ฑ์ ์ ์ํ ์ ์์ผ๋ฉฐ ๋ฌธ์์ ์ค๋ช
์ด๋ ํค์๋,
์์ฑ์ ๋ฑ์ ์ ์ํ ์ ์๋ ๋ค์๊ณผ ๊ฐ์ ํ๊ทธ๊ฐ ์ฌ์ฉํ ์ ์๋ค.
<title> ํ๊ทธ๋ HTML ๋ฌธ์์ ์ ๋ชฉ์ ์ ์ํ๋ฉฐ HTML ๋ฌธ์์ <head> ํ๊ทธ ๋ด์ ๊ธฐ์ ํ๋ค. <title> ํ๊ทธ์ ๋ด์ฉ์
์น๋ธ๋ผ์ฐ์ ์ ์๋์ฐ ์ฐฝ์ ์ ๋ชฉ(์์ฆ์ ํญ์ ์ ๋ชฉ)์ผ๋ก ํ์๋๋ฉฐ ์ฆ๊ฒจ์ฐพ๊ธฐ(favorites)์ ์ถ๊ฐํ ๋
๊ธฐ๋ณธ ์ง์ ๋๋ ์ ๋ชฉ์ผ๋ก๋ ์ฌ์ฉ๋๋ค.
๋ฉํ๋ฐ์ดํฐ๋ ๋ฐ์ดํฐ์ ๋ํ ์ ๋ณด๋ฅผ ๋งํ๋๋ฐ <meta> ํ๊ทธ๋ HTML ๋ฌธ์์ ๋ํ ๋ฉํ ๋ฐ์ดํฐ
์ฆ, ํ์ฌ HTML ๋ฌธ์์ ๋ํ ์ฌ๋ฌ ๊ฐ์ง ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ํ๊ทธ ์ด๋ค.
์ด ํ๊ทธ๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์๋ ํ์๋์ง ์์ง๋ง ์ปดํจํฐ์ ์ํด ํด์๋๋ ์ ๋ณด๋ค๋ก ๊ตฌ์ฑ๋๋ฉฐ
์ผ๋ฐ์ ์ผ๋ก HTML ๋ฌธ์์ ์ค๋ช , ํค์๋, ๋ฌธ์์ ์์ฑ์ ๋ฑ HTML ๋ฌธ์์ ๋ฐ์ดํฐ๋ฅผ ์ง์ ํ๊ณ ์ ์ํ๋ ๋ฐ ์ฃผ๋ก ์ฌ์ฉ๋๋ค.
์์, ํ๊ทธ, ์์ฑ, ์์ฑ๊ฐ
โถ ์์(Elements)
html์์ ‘<’์ ‘>’๋ก ๋๋ฌ์ธ์ธ ์์ ํ๊ทธ์ ‘</’์ ‘>’๋ก ๋๋ฌ์ธ์ธ ์ข
๋ฃ ํ๊ทธ๋ก ์ด๋ฃจ์ด์ง ํ๊ทธ์ ์กฐํฉ์ ์๋ฏธํ๋ค.
์ผ๋ฐ์ ์ผ๋ก ์์์ ํ๊ทธ์ ๊ฐ๋ ์ด ๋๋ ทํ๊ฒ ๊ตฌ๋ณ ๋์ง ์๊ณ ํผ์ฉ ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ง๋ง
CSS๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์์๋ผ๋ ์๋ฏธ๋ ๋งค์ฐ ์ค์ํ๋ค.
์์๋ “<h1>๋ฌธ์์ ์ ๋ชฉ</h1>” ์ ์ฒด๋ฅผ ์๋ฏธ ํ์ง๋ง ํ๊ทธ๋ <h1>๊ณผ </h1> ๊ฐ๊ฐ์ ์๋ฏธํ๋ค.
โถ ํ๊ทธ(Tag)
ํ๊ทธ๋ ์์์ ์ผ๋ถ๋ก ‘<’์ ‘>’๋ก ๋๋ฌ์ธ์ธ ์์ ํ๊ทธ์ ‘</’์ ‘>’๋ก ๋๋ฌ์ธ์ธ ์ข
๋ฃ ํ๊ทธ ๋ ์ข
๋ฅ
๊ฐ ์์ผ๋ฉฐ ์์ ํ๊ทธ์ ์ข
๋ฃ ํ๊ทธ ์ฌ์ด์๋ “<h1>๋ฌธ์์ ์ ๋ชฉ</h1>”์ ๊ฐ์ด ํ๊ทธ์ ์์ ํ๊ทธ์
์ข
๋ฃ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ด ๊ธฐ์ ๋๋ฉฐ ์์ ํ๊ทธ๋ ์์์ ์์์ ์ข
๋ฃ ํ๊ทธ๋ ์์์ ๋์ ์๋ฏธํ๋ค.
๋ํ img, hr, br ๋ฑ๊ณผ ๊ฐ์ด ์์ ํ๊ทธ๋ ์์ง๋ง ํ๊ทธ์ ๋ด์ฉ์ด ์์ด์ ์ข
๋ฃ ํ๊ทธ๊ฐ ํ์ ์๋ ํ๊ทธ๊ฐ ์์ผ๋ฉฐ
์ด๋ฌํ ํ๊ทธ๋ ๋ด์ฉ์ด ์๊ธฐ ๋๋ฌธ์ ๋น์ด์๋ ํ๊ทธ(Empty Tag)๋ผ๊ณ ํ๋ฉฐ ํ๋์ ํ๊ทธ
์ ‘<’์ ‘/>’๋ฅผ ์ฌ์ฉํด ์์์ ์์๊ณผ ๋์ ๋์์ ํํํ ์ ์๋ค.
ํ๊ทธ ํ๋์ ‘<’์ ‘/>’๋ฅผ ๊ฐ์ด ์ฌ์ฉํ๋ฏ๋ก ์ ํ ํด๋ก์ง ํ๊ทธ(Self Closing Tag)๋ผ๊ณ ๋ ๋ถ๋ฅธ๋ค.
์ ํ ํด๋ก์ง ํ๊ทธ๋ XML ๋๋ XHTML์์ ์ฌ์ฉํ๋ ๋ฌธ๋ฒ์ผ๋ก
HTML5์์๋ ์ ํ์ (Optional)์ผ๋ก ์ฌ์ฉํ ์ ์์ผ๋ฉฐ ํ์์ฌํญ์ ์๋๋ค.
โถ ์์ฑ(Attributes)
์์ฑ์ ์์์ ์์ ํ๊ทธ ์์์ ์ฌ์ฉ ๋๋ ๊ฒ์ผ๋ก ์์์ ํน์ง๊ณผ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ์ํ๋๋ฐ ์ฌ์ฉ๋๋ฉฐ
์์ฑ์ ์ด๋ฆ์ ์๋ฌธ์๋ก ์์ฑํ๋๋ก W3C์์ ๊ถ์ฅํ๊ณ ์๋ค.
“<td colspan=“2”>์
์ ๋ด์ฉ</td>“์์ <td> ํ๊ทธ ์์ colspan์ด๋ผ๋ ์์ฑ์ด ์ถ๊ฐ๋๋ฉด์ ๊ฐ๋ก๋ก
๋ ๊ฐ์ ์ ์ ํฉ์น ์ํ๋ก ํ๋ฉด์ ํ์๋๋ค.
โถ ์์ฑ ๊ฐ(Value) ๋๋ ์ธ์(Arguments)
์์ฑ์ ์ง์ ํ ๊ฐ์ ์์ฑ ๊ฐ(Value) ๋๋ ์ธ์(Arguments)๋ผ๊ณ ํ๋ฉฐ ์์์ colspan ์์ฑ์ 2๋ผ๋
์์ฑ์ ๊ฐ์ ์ง์ ํด์ ๊ฐ๋ก๋ก ๋ ๊ฐ์ ์
์ ํฉ์ณ์ ํ๋ฉด์ ํํ๋๋๋ก ํ ๊ฒ์ด๋ค.
์์ฑ ๊ฐ์ ์ง์ ํ ๋๋ ํฐ ๋ฐ์ดํ(“”) ๋๋ ์์๋ฐ์ดํ(‘’)๋ก ๊ฐ์ธ์ ์ง์ ํ๋ฉด ๋๋ค.
'๐จ๏ธ Language > HTML, CSS, JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์คํ์ผ ์์ฑ (0) | 2024.08.12 |
|---|---|
| [CSS] ๋จ์์ ์ ํ์ (0) | 2024.08.12 |
| [HTML] <table>๊ณผ <form> (0) | 2024.08.08 |
| [HTML] ํ๊ทธ์ Style (0) | 2024.08.07 |
| Web์ ์ญ์ฌ์ ์น ํ์ค์ ํ์ํ ๊ธฐ์ (0) | 2024.08.07 |
