[HTML] HTML - Structure the Web #01

8083 ๋‹จ์–ด htmlhtml

HTML : Getting started with HTML

1. HTML์ด๋ž€

HTML (Hypertext Markup Language,ํ•˜์ดํผํ…์ŠคํŠธ ๋งˆํฌ์—… ์–ธ์–ด)๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋Š” ์•„๋‹ˆ๊ณ , ์šฐ๋ฆฌ๊ฐ€ ๋ณด๋Š” ์›นํŽ˜์ด์ง€๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ตฌ์กฐํ™”๋˜์–ด ์žˆ๋Š”์ง€ ๋ธŒ๋ผ์šฐ์ €๋กœ ํ•˜์—ฌ๊ธˆ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด์ž…๋‹ˆ๋‹ค.
HTML์€ elements๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์ด๋“ค์€ ์ ์ ˆํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋‚˜ํƒ€๋‚ด๊ณ  ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์ปจํ…์ธ ์˜ ์—ฌ๋Ÿฌ ๋ถ€๋ถ„๋“ค์„ ๊ฐ์‹ธ๊ณ  ๋งˆํฌ์—… ํ•ฉ๋‹ˆ๋‹ค.
ํƒœ๊ทธ(Tags)๋Š” ์›น ์ƒ์˜ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•˜๋Š” ํ•˜์ดํผ๋งํฌ ๋‚ด์šฉ๋“ค์„ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜, ๋‹จ์–ด๋ฅผ ๊ฐ•์กฐํ•˜๋Š” ๋“ฑ์˜ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

My cat is very Grumpy

์œ„ ๋ฌธ์žฅ์„ ์•„๋ž˜์™€ ๊ฐ™์ด, <p> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฌธ๋‹จ์œผ๋กœ ๋ช…์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.


<p>My cat is very Grumpy</p>

์ฐธ๊ณ  : HTML ์š”์†Œ๋Š” ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฆ‰, <title> ์š”์†Œ๋Š” <title>, <TITLE>, <Title>, <TiTlE> ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋Œ€๊ฒŒ๋Š” ๊ฐ€๋…์„ฑ๊ณผ ๊ธฐํƒ€ ์ด์œ ๋•Œ๋ฌธ์— ์†Œ๋ฌธ์ž๋กœ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.



2. HTML ์š”์†Œ(Element)์˜ ๊ตฌ์กฐ

์š”์†Œ(Element)์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ(Structure)

์—˜๋ฆฌ๋จผํŠธ์˜ ์ฃผ์š” ๋ถ€๋ถ„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์—ฌ๋Š” ํƒœ๊ทธ(Opening tag): ์ด๊ฒƒ์€ ์š”์†Œ์˜ ์ด๋ฆ„๊ณผ(์ด ๊ฒฝ์šฐ p), ์—ด๊ณ  ๋‹ซ๋Š” ๊บฝ์‡  ๊ด„ํ˜ธ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์š”์†Œ๊ฐ€ ์‹œ์ž‘(์ด ๊ฒฝ์šฐ ๋‹จ๋ฝ์˜ ์‹œ์ž‘ ๋ถ€๋ถ„)๋ถ€ํ„ฐ ํšจ๊ณผ๊ฐ€ ์ ์šฉ๋˜๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

  2. ๋‹ซ๋Š” ํƒœ๊ทธ(Closing tag): ์ด๊ฒƒ์€ ์š”์†Œ์˜ ์ด๋ฆ„ ์•ž์— ์Šฌ๋ž˜์‹œ(/)๊ฐ€ ์žˆ๋Š”๊ฒƒ์„ ์ œ์™ธํ•˜๋ฉด ์—ฌ๋Š” ํƒœ๊ทธ(opening tag)์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์š”์†Œ์˜ ๋(์ด ๊ฒฝ์šฐ ๋‹จ๋ฝ์˜ ๋ ๋ถ€๋ถ„)์— ์œ„์น˜ํ•ฉ๋‹ˆ๋‹ค. ๋‹ซ๋Š” ํƒœ๊ทธ๋ฅผ ์ ์–ด์ฃผ์ง€ ์•Š๋Š” ๊ฒƒ์€ ํ”ํ•œ ์ดˆ์‹ฌ์ž์˜ ์˜ค๋ฅ˜์ด๋ฉฐ, ์ด๊ฒƒ์€ ์ด์ƒํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚ณ๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

  3. ๋‚ด์šฉ(Content): ์š”์†Œ์˜ ๋‚ด์šฉ์ด๋ฉฐ, ์ด ๊ฒฝ์šฐ ๋‹จ์ˆœํ•œ ํ…์ŠคํŠธ์ด๋‹ค.

  4. ์š”์†Œ(Element): ์—ฌ๋Š” ํƒœ๊ทธ, ๋‹ซ๋Š” ํƒœ๊ทธ, ๋‚ด์šฉ์„ ํ†ตํ‹€์–ด ์š”์†Œ(element)๋ผ๊ณ ํ•œ๋‹ค.

์ค‘์ฒฉ๋œ ์š”์†Œ Nesting elements

์š”์†Œ ์•ˆ์— ๋‹ค๋ฅธ ์š”์†Œ๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ์š”์†Œ๋Š” ๋‚ดํฌ๋˜์—ˆ๋‹ค๊ณ  ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. "๊ณ ์–‘์ด๊ฐ€ ๋งค์šฐ ์‚ฌ๋‚ฉ๋‹ค" ๋ผ๋Š” ๋ฌธ๋‹จ์„ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•ด์„œ, '๋งค์šฐ'๋ผ๋Š” ๋‹จ์–ด๋ฅผ ๊ฐ•์กฐํ•˜๋Š” <strong> ์š”์†Œ๋ฅผ ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<p>My cat is <strong>very</strong> grumpy.</p>

๋ธ”๋Ÿญ ๋ ˆ๋ฒจ ์š”์†Œ vs ์ธ๋ผ์ธ ์š”์†Œ

HTML์—๋Š” ๋‘๊ฐ€์ง€ ์ข…๋ฅ˜์˜ ์š”์†Œ(Element) ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ(Block level element) ์™€ ์ธ๋ผ์ธ ์š”์†Œ(Inline element) ์ž…๋‹ˆ๋‹ค.

  • ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ(Block-level elements) ๋Š” ์›นํŽ˜์ด์ง€ ์ƒ์— ๋ธ”๋ก(Block)์„ ๋งŒ๋“œ๋Š” ์š”์†Œ์ž…๋‹ˆ๋‹ค. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์•ž๋’ค ์š”์†Œ ์‚ฌ์ด์— ์ƒˆ๋กœ์šด ์ค„(Line)์„ ๋งŒ๋“ค๊ณ  ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ์ด์ „๊ณผ ์ดํ›„ ์š”์†Œ์‚ฌ์ด์˜ ์ค„์„ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ์  ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ผ ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฐœ๋ฐœ์ž๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ๋ฝ(Paragraphs), ๋ชฉ๋ก(lists), ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด(Navigation Menus), ๊ผฌ๋ฆฌ๋ง(Footers) ๋“ฑ์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์ธ๋ผ์ธ ์š”์†Œ(Inline elements)์— ์ค‘์ฒฉ๋ (Nested inside)์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ๋‹ค๋ฅธ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์— ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ธ๋ผ์ธ ์š”์†Œ(Inline elements)๋Š” ํ•ญ์ƒ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋‚ด์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ธ๋ผ์ธ ์š”์†Œ๋Š” ๋ฌธ์„œ์˜ ํ•œ ๋‹จ๋ฝ๊ฐ™์€ ํฐ ๋ฒ”์œ„์—๋Š” ์ ์šฉ๋  ์ˆ˜ ์—†๊ณ  ๋ฌธ์žฅ, ๋‹จ์–ด ๊ฐ™์€ ์ž‘์€ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋งŒ ์ ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ธ๋ผ์ธ ์š”์†Œ๋Š” ์ƒˆ๋กœ์šด ์ค„(Line)์„ ๋งŒ๋“ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์ธ๋ผ์ธ ์š”์†Œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๊ทธ๊ฒƒ์„ ์ž‘์„ฑํ•œ ๋‹จ๋ฝ๋‚ด์— ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ธ๋ผ์ธ ์š”์†Œ์—๋Š” ํ•˜์ดํผ๋งํฌ๋ฅผ ์ •์˜ํ•˜๋Š” ์š”์†Œ์ธ <a> , ํ…์ŠคํŠธ(Text)๋ฅผ ๊ฐ•์กฐํ•˜๋Š” ์š”์†Œ์ธ <em>,<strong> ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.



3. ์†์„ฑ Attributes

์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์†์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<p class="editor-note">My cat is very Grumpy</p>

์†์„ฑ์€ ์š”์†Œ์— ์‹ค์ œ๋ก  ๋‚˜ํƒ€๋‚ด๊ณ  ์‹ถ์ง€ ์•Š์ง€๋งŒ ์ถ”๊ฐ€์ ์ธ ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์œ„์—๋Š” ๋‚˜์ค‘์— ์Šคํƒ€์ผ์— ๊ด€๋ จ๋œ ๋‚ด์šฉ์ด๋‚˜ ๊ธฐํƒ€ ๋‚ด์šฉ์„ ์œ„ํ•ด ํ•ด๋‹น ๋ชฉํ‘œ๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋Š” class ์†์„ฑ์„ ๋ถ€์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. ์š”์†Œ ์ด๋ฆ„ ๋‹ค์Œ์— ๋ฐ”๋กœ ์˜ค๋Š” ์†์„ฑ์€ ์š”์†Œ ์ด๋ฆ„๊ณผ ์†์„ฑ ์‚ฌ์ด์— ๊ณต๋ฐฑ์ด ์žˆ์–ด์•ผ ๋˜๊ณ , ํ•˜๋‚˜ ์ด์ƒ์˜ ์†์„ฑ๋“ค์ด ์žˆ๋Š” ๊ฒฝ์šฐ์—” ์†์„ฑ ์‚ฌ์ด์— ๊ณต๋ฐฑ์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  2. ์†์„ฑ ์ด๋ฆ„ ๋‹ค์Œ์—” ๋“ฑํ˜ธ(=)๊ฐ€ ๋ถ™์Šต๋‹ˆ๋‹ค.
  3. ์†์„ฑ ๊ฐ’์€ ์—ด๊ณ  ๋‹ซ๋Š” ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค.


4. HTML ๋ฌธ์„œ์˜ ๊ตฌ์กฐ


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
  • <!DOCTYPE html> : ๋ฌธ์„œ ํ˜•์‹์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
  • <html></html> : <html> ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด ์š”์†Œ๋Š” ์ „์ฒด ํŽ˜์ด์ง€์˜ ์ฝ˜ํ…์ธ ๋ฅผ ํฌํ•จํ•˜๋ฉฐ, ๊ธฐ๋ณธ ์š”์†Œ๋กœ๋„ ์•Œ๋ ค์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
  • <head></head> : <head> ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด ์š”์†Œ๋Š” ํ™ˆํŽ˜์ด์ง€ ์ด์šฉ์ž์—๊ฒŒ๋Š” ๋ณด์ด์ง€ ์•Š์ง€๋งŒ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์— ๋…ธ์ถœ ๋  ํ‚ค์›Œ๋“œ, ํ™ˆํŽ˜์ด์ง€ ์„ค๋ช…, CSS ์Šคํƒ€์ผ, character setdeclaration ๋“ฑ HTML ํŽ˜์ด์ง€์˜ ๋ชจ๋“  ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋‹ค์Œ ์žฅ์—์„œ ๋‹ค๋ฃน๋‹ˆ๋‹ค.
  • <meta charset="utf-8"> : ์ด ์š”์†Œ๋Š” HTML ๋ฌธ์„œ์˜ ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ์„ค์ •์„ UTF-8๋กœ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด๋ฉฐ ์˜ˆ์‹œ์—์„œ ์ง€์ •ํ•œ UTF-8์—๋Š” ์ „์„ธ๊ณ„์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์— ๋Œ€ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๋ฌธ์ž๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ์ด ์„ค์ •์„ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜์ด์ง€์— ํฌํ•จ ๋œ ๋ชจ๋“  ํ…์ŠคํŠธ ๋‚ด์šฉ์„ ์ฒ˜๋ฆฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ์„ค์ •ํ•˜๋ฉด ๋‚˜์ค‘์— ๋ฌธ์ž ์ธ์ฝ”๋”ฉ๊ณผ ๊ด€๋ จ๋œ ์ผ๋ถ€ ๋ฌธ์ œ๋ฅผ ํ”ผํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ์„ค์ •์„ ํ•˜์ง€ ์•Š์„ ์ด์œ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • <title></title> : <title> ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜์ด์ง€ ์ œ๋ชฉ์ด ์„ค์ •๋˜๋ฉฐ ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ํ‘œ์‹œ๋˜๋Š” ์ œ๋ชฉ์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ œ๋ชฉ์€ ํŽ˜์ด์ง€๊ฐ€ ์ฑ…๊ฐˆํ”ผ ๋  ๋•Œ ํŽ˜์ด์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋ฐ์—๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • <body></body> : <body> ์š”์†Œ ์—ฌ๊ธฐ์—๋Š” ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€, ๋น„๋””์˜ค, ๊ฒŒ์ž„, ์žฌ์ƒ ๊ฐ€๋Šฅํ•œ ์˜ค๋””์˜ค ํŠธ๋ž™ ๋“ฑ์„ ๋น„๋กฏํ•˜์—ฌ ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜๋Š” ๋ชจ๋“  ์ฝ˜ํ…์ธ ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.


5. HTML ์ฃผ์„

HTML์—๋Š” ์ฝ”๋“œ์— ์ฃผ์„์„ ์ž‘์„ฑํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์ฃผ์„์„ ๋ฌด์‹œํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์ฃผ์„์„ ๋ณด์ด์ง€ ์•Š๊ฒŒํ•ฉ๋‹ˆ๋‹ค. ์ฃผ์„์˜ ๋ชฉ์ ์€ ์ฝ”๋“œ์— ๋ฉ”๋ชจ๋ฅผ ํฌํ•จ์‹œ์ผœ ๋…ผ๋ฆฌ ๋˜๋Š” ์ฝ”๋”ฉ์„ ์„ค๋ช… ํ•  ์ˆ˜ ์žˆ๋„๋กํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ