>TIL: HTML์ด๋ž€?

ํƒœํ˜„ยท2021๋…„ 3์›” 10์ผ

๐Ÿ™‹๐Ÿปโ€โ™€๏ธ ๋ชฉํ‘œ: ๋ฉด์ ‘์„ ์ค€๋น„ํ•˜๊ธฐ ์ด์ „์— ์•Œ์•˜๋˜ ๋‚ด์šฉ๋“ค์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์ •๋ฆฌํ•ด ๋ณด์ž.

1. HTML5๋ž€?


๐Ÿ™ŒHTML์€ ์›น๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ๋ณด์—ฌ์ง€๋„๋ก ๋””์ž์ธ๋œ ๋ฌธ์„œ๋ฅผ ๋งํ•œ๋‹ค.

์ด ๋ฌธ์„œ๋Š” ํ‘œ์ค€ํ™”๋œ '๋งˆํฌ์—… ์–ธ์–ด'๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค. ๋งˆํฌ์—… ์–ธ์–ด๋Š” ์ผ๋ฐ˜์ ์ธ ํ…์ŠคํŠธ์™€ ๋ฌธ๋ฒ•์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฌธ์„œ์— ์–ด๋…ธํ…Œ์ดํŒ… ๋œ ๊ฒƒ์„ ๋งํ•˜๋ฉฐ, ์ด๋Š” <ํƒœ๊ทธ> ๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

2. !DOCTYPE html


HTML์€ ์—ญ์‚ฌ๊ฐ€ ๊ต‰์žฅํžˆ ๊ธธ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ์ „์Ÿ์ด๋ผ๋Š” ์˜์ƒ์„ ๋ณด์•˜๋Š”๊ฐ€? ์˜ˆ์ „์—๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋”ฐ๋ผ์•ผ ํ•˜๋Š” ์ค‘์š”ํ•œ ๋ฃฐ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ๋ฌธ์„œ๋‚ด์— ๊ธฐ์ž…ํ–ˆ์—ˆ๊ณ , ๋ฒ„์ „๋„ ๋”ฐ๋กœ ์ ์—ฌ์•ผ ํ–ˆ์—ˆ๋‹ค.

์ง€๊ธˆ์€ ๊ทธ๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ ์ž‘์„ฑํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML5๋ฅผ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ด€์Šต์ ์œผ๋กœ <!DOCTYPE html> ์ด๋ผ๊ณ  ํ•œ๋ฒˆ๋งŒ ์„ ์–ธํ•œ๋‹ค.

3. html, head, body


<html> ํƒœ๊ทธ๋Š” HTML ํŒŒ์ผ ์ตœ์ƒ์œ„์— ์žˆ๋Š” ํƒœ๊ทธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ์•ˆ์—๋Š” 2๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค.

  • <head> : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI์  ์š”์†Œ๊ฐ€ ์—†๋‹ค. ์•ˆ์—์„œ ํ•˜๋Š” ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
-๊ตฌ๊ธ€์—์„œ ๊ฒ€์ƒ‰ํ•  ๋•Œ ๋‚˜์˜ค๋Š” ํƒ€์ดํ‹€์ด๋‚˜ ๋ถ€๊ฐ€์„ค๋ช…
-๋ถ๋งˆํฌ ์ถ”๊ฐ€ํ•  ๋•Œ ๋‚˜์˜ค๋Š” ์ œ๋ชฉ
-์•„์ด์ฝ˜
-ํŒŒ์ผ์—ฐ๊ฒฐ
(์š”์•ฝ: ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ์ •๋ณด๋Š” ์—†๊ณ  <meta> ๋ฐ์ดํ„ฐ๋งŒ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐโœจ)
  • <body> : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ๋‚ด์šฉ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ตฌ๊ฐ„์ด๋‹ค.

4. W3C


์šฐ๋ฆฌ๊ฐ€ HTML์„ ๊ณต๋ถ€ํ•  ๋•Œ ๋นผ๋†“๊ณ  ๋„˜์–ด๊ฐ€๋ฉด ์•ˆ๋˜๋Š” ๊ฒƒ์ด W3C์ด๋‹ค. ์ด ๋‹จ์ฒด๋Š” ์›น์˜ ํ‘œ์ค€ํ™”๋ฅผ ์ถ”์ง„ํ•˜๋Š” ๊ณณ์ด๋‹ค. ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ € ํšŒ์‚ฌ๋“ค์ด ์ด ๊ณณ์— ๋ชจ์—ฌ์„œ ํ‘œ์ค€ํ™”๋ฅผ ์ถ”์ง„ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ด ๊ณณ์—์„œ ๋Œ€ํ™”๊ฐ€ ์˜ค๊ณ ๊ฐ€๋ฉด ๊ทธ ์ดํ›„๋กœ๋ถ€ํ„ฐ ํƒœ๊ทธ๊ฐ€ ์‚ญ์ œ๋˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€๋œ๋‹ค. ๋”ฐ๋ผ์„œ ๋งŽ์€ ๋ธŒ๋ผ์šฐ์ €๋“ค์ด W3C์—์„œ ์ •ํ•œ ํ‘œ์ค€์— ๋งž๊ฒŒ ๊ตฌํ˜„๋˜๋„๋ก ๋”ฐ๋ผ๊ฐ„๋‹ค.

profile
์•ˆ๋…•ํ•˜์„ธ์š”, ์ง€์‹์„ ๊ณต์œ ํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€