๊ธ€ ์ž‘์„ฑ์ž: ํƒ์‹œ ์šด์ „์‚ฌ
๋ฐ˜์‘ํ˜•

HTML

๐Ÿค” HTML์ด๋ž€?

HTML์€ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํ•˜์ดํผํ…์ŠคํŠธ ๋งˆํฌ์—… ์–ธ์–ด(HyperText Markup Language, ๋ฌธํ™”์–ด: ์ดˆ๋ณธ๋ฌธํ‘œ์‹๋‹ฌ๊ธฐ์–ธ์–ด, ํ•˜์ดํผ๋ณธ๋ฌธํ‘œ์‹๋‹ฌ๊ธฐ์–ธ์–ด)๋ผ๋Š” ์˜๋ฏธ์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ์œ„ํ•œ ์ง€๋ฐฐ์ ์ธ ๋งˆํฌ์—… ์–ธ์–ด๋‹ค.

HTML์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • HTML์€ ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์›น ํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ๋ฅผ ์•Œ๋ ค์ค€๋‹ค.
  • HTML์€ ๋‹ค์–‘ํ•œ ์š”์†Œ๋“ค๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค.
  • HTML์€ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์–ด๋–ค ๊ฒƒ์ด ๋ณด์—ฌ์งˆ ์ง€๋ฅผ ์•Œ๋ ค์ค€๋‹ค.
  • HTML์€ ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ํ‘œํ˜„๋œ๋‹ค.
  • HTML ํƒœ๊ทธ๋Š” ๋จธ๋ฆฟ๋ง, ๋ฌธ๋‹จ, ํ‘œ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ๋ผ๋ฒจ๋งํ•œ๋‹ค.

๐Ÿ“„ ๊ฐ„๋‹จํ•œ HTML ๋ฌธ์„œ

<!DOCTYPE html>
<html>
<head>
<title>ํŽ˜์ด์ง€ ์ œ๋ชฉ</title>
</head>
<body>

<h1>์ฒซ ๋จธ๋ฆฟ๋ง</h1>
<p>์ฒซ ๋ฌธ๋‹จ</p>

</body>
</html>

ํ•ด๋‹น ๋ฌธ์„œ์˜ ์˜๋ฏธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • <!DOCTYPE html>๋ผ๋Š” ์„ ์–ธ์€ ํ•ด๋‹น ๋ฌธ์„œ๊ฐ€ HTML5๋ผ๋Š” ๊ฒƒ์ด๋‹ค.
  • <html>์š”์†Œ๋Š” HTML ํŽ˜์ด์ง€์˜ root ์š”์†Œ์ด๋‹ค.
  • <head>์š”์†Œ๋Š” ๋ฌธ์„œ์— ๋Œ€ํ•œ ๋ฉ”ํƒ€ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋‹ค.
  • <title> ์š”์†Œ๋Š” ๋ฌธ์„œ์˜ ์ œ๋ชฉ์„ ์˜๋ฏธํ•œ๋‹ค.
  • <body> ์š”์†Œ๋Š” ๋ณด์ด๋Š” ํŽ˜์ด์ง€ ๋‚ด์šฉ์„ ํฌํ•จํ•œ๋‹ค.
  • <h1>์š”์†Œ๋Š” ํฐ ๋จธ๋ฆฟ๋ง์„ ์˜๋ฏธํ•œ๋‹ค.
  • <p>์š”์†Œ๋Š” ๋ฌธ๋‹จ์„ ์˜๋ฏธํ•œ๋‹ค.

๐Ÿ”– HTML ํƒœ๊ทธ

HTML ํƒœ๊ทธ๋Š” ๊บฝ์‡  ๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ง„ ์š”์†Œ์˜ ์ด๋ฆ„์„ ์˜๋ฏธํ•œ๋‹ค.

<ํƒœ๊ทธ์ด๋ฆ„>๋‚ด์šฉ์€ ์—ฌ๊ธฐ์— โœ๏ธ</ํƒœ๊ทธ์ด๋ฆ„>
  • HTML ํƒœ๊ทธ๋Š” <p>์™€ </p>์ฒ˜๋Ÿผ ๋ณดํ†ต ์ผค๋ ˆ ํ˜น์€ ์ง์œผ๋กœ ์กด์žฌํ•œ๋‹ค
  • ์ผค๋ ˆ์˜ ์ฒซ ํƒœ๊ทธ๋Š” ์‹œ์ž‘ ํƒœ๊ทธ(ํ˜น์€ ์˜คํ”„๋‹ ํƒœ๊ทธ) ๋‘ ๋ฒˆ์งธ ํƒœ๊ทธ๋Š” ๋ ํƒœ๊ทธ(ํ˜น์€ ๋‹ซํž˜ ํƒœ๊ทธ)๋ผ ํ•œ๋‹ค.
  • ๋งˆ์ง€๋ง‰ ํƒœ๊ทธ๋Š” ์‹œ์ž‘ ํƒœ๊ทธ์ฒ˜๋Ÿผ ์“ฐ์—ฌ์ง€๋งŒ, ํƒœ๊ทธ ์ด๋ฆ„ ์•ž์— ์Šฌ๋ž˜์‰ฌ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.

๐Ÿงญ ์›น ๋ธŒ๋ผ์šฐ์ €

์›น ๋ธŒ๋ผ์šฐ์ €(ํฌ๋กฌ, ์—ฃ์ง€, ํŒŒ์ด์–ดํญ์Šค, ์‚ฌํŒŒ๋ฆฌ)์˜ ๋ชฉ์ ์€ HTML ๋ฌธ์„œ๋ฅผ ์ฝ๊ณ  ์ด๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
๋ธŒ๋ผ์šฐ์ €๋Š” HTML ํƒœ๊ทธ๋ฅผ ํ‘œํ˜„ํ•˜์ง€ ์•Š๊ณ , HTML ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์–ด๋–ค ์‹์œผ๋กœ ๋ฌธ์„œ๋ฅผ ํ‘œํ˜„ํ•  ์ง€๋ฅผ ์ •ํ•œ๋‹ค.

<!DOCTYPE> ์„ ์–ธ์˜ ์˜๋ฏธ

<!DOCTYPE>์„ ์–ธ์€ ๋ฌธ์„œ์˜ ํƒ€์ž…์„ ํ‘œ์‹œํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์›น ํŽ˜์ด์ง€๋ฅผ ์ •ํ™•ํ•˜๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€๋‹ค.
ํ•œ ๋ฒˆ๋งŒ ์„ ์–ธํ•˜๋ฉฐ, ๋ฌธ์„œ์˜ ๋งจ ์œ—๋ถ€๋ถ„ ์ฆ‰, HTML ํƒœ๊ทธ ์ „์— ์œ„์น˜ํ•œ๋‹ค.
<!DOCTYPE>์„ ์–ธ์€ ๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค.
HTML5๋ฅผ ์œ„ํ•œ <!DOCTYPE>์„ ์–ธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

<!DOCTYPE html>

HTML์˜ ๋ฒ„์ „

์ดˆ๊ธฐ ์›น๋ถ€ํ„ฐ ์ง€๊ธˆ๊นŒ์ง€ ๋‹ค์–‘ํ•œ HTML ๋ฒ„์ „๋“ค์ด ์กด์žฌํ•œ๋‹ค.

๋ฒ„์ „ ๋…„๋„
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
๋ฐ˜์‘ํ˜•