๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ฆฌ์ œ

Web Front 2: HTML ๊ธฐ์ดˆ ๋ณธ๋ฌธ

๊ฐœ๋ฐœ์ž ํ˜ธ์†Œ์ธ/Server

Web Front 2: HTML ๊ธฐ์ดˆ

๋ฆฌ์ œ๐Ÿซง 2026. 7. 14. 14:01

HTML

HTML(HyperText Markup Language)์€ ์›น ๋ฌธ์„œ์˜ ๊ตฌ์กฐ์™€ ์˜๋ฏธ๋ฅผ ์ •์˜ํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด

  • ํƒœ๊ทธ(Tag) ๋ฅผ ์‚ฌ์šฉํ•ด ์ฝ˜ํ…์ธ ์— ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌ
  • ๋ธŒ๋ผ์šฐ์ €๋Š” ํƒœ๊ทธ๋ฅผ ํ•ด์„ํ•ด ํ™”๋ฉด์— ๊ตฌ์กฐํ™”๋œ ๋ฌธ์„œ๋ฅผ ๊ทธ๋ ค์คŒ

ํƒœ๊ทธ์˜ ๊ธฐ๋ณธ ํ˜•ํƒœ

  • <ํƒœ๊ทธ๋ช…>๋‚ด์šฉ</ํƒœ๊ทธ๋ช…> : ์‹œ์ž‘ ํƒœ๊ทธ + ๋‚ด์šฉ + ์ข…๋ฃŒ ํƒœ๊ทธ (ํ•œ ์Œ)
  • <br>, <hr>, <img> : ์ข…๋ฃŒ ํƒœ๊ทธ๊ฐ€ ์—†๋Š” ๋‹จ๋… ํƒœ๊ทธ๋„ ์กด์žฌ

๐Ÿ’ก ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํƒœ๊ทธ๋ฅผ ์จ๋„ ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค.
HTML์€ ๋ชจ๋ฅด๋Š” ํƒœ๊ทธ(<h7> ๋“ฑ)๋ฅผ ๋งŒ๋‚˜๋ฉด ๋ฉˆ์ถ”์ง€ ์•Š๊ณ  ๋ฌด์‹œํ•œ ์ฑ„ ํ‘œํ˜„ ๊ฐ€๋Šฅํ•œ ๋ถ€๋ถ„๋งŒ ๊ทธ๋ฆฐ๋‹ค.

 

 

 

ํƒœ๊ทธ ์—ญํ•  ๋น„๊ณ 
<!DOCTYPE html> HTML5 ๋ฌธ์„œ ์„ ์–ธ ๋ฌธ์„œ ๋งจ ์œ„ 1์ค„
<html lang="ko"> ๋ฌธ์„œ ์ „์ฒด ์˜์—ญ / ์–ธ์–ด ์ง€์ • ๊ฐ€์žฅ ๋ฐ”๊นฅ ํƒœ๊ทธ
<head> ๋ฌธ์„œ ์ •๋ณด ์˜์—ญ ํ™”๋ฉด์— ์•ˆ ๋ณด์ž„
<meta charset="UTF-8"> ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ์ง€์ • ์—†์œผ๋ฉด ํ•œ๊ธ€ ๊นจ์ง
<title> ๋ธŒ๋ผ์šฐ์ € ํƒญ ์ œ๋ชฉ ์ฆ๊ฒจ์ฐพ๊ธฐ ์ด๋ฆ„
<body> ์‹ค์ œ ์ฝ˜ํ…์ธ  ์˜์—ญ ํ™”๋ฉด์— ๋ณด์ž„

 

ํƒœ๊ทธ ์„ค๋ช… ํŠน์ง•
<h1> ~ <h6> ์ œ๋ชฉ ํƒœ๊ทธ ์ˆซ์ž๊ฐ€ ํด์ˆ˜๋ก ๊ธ€์ž๊ฐ€ ์ž‘์•„์ง
<hr> ์ˆ˜ํ‰์„  ๋‹จ๋… ํƒœ๊ทธ
<br> ์ค„๋ฐ”๊ฟˆ ๋‹จ๋… ํƒœ๊ทธ

๐Ÿ’ก ์ˆซ์ž๋Š” ํฌ๊ธฐ๊ฐ€ ์•„๋‹ˆ๋ผ '์œ„๊ณ„'

h1์€ ํŽ˜์ด์ง€ ๋Œ€์ œ๋ชฉ,
h2๋Š” ์†Œ์ œ๋ชฉ... ์ฒ˜๋Ÿผ ์ค‘์š”๋„(๋ฌธ์„œ ๊ตฌ์กฐ) ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๊ธ€์ž๋ฅผ ํฌ๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๊ณ 
h1์„ ๋‚จ๋ฐœํ•˜์ง€ ์•Š๋Š”๋‹ค. <h6>? ์ด๋”ด๊ฑฐ ํ•˜์ง€๋งˆ๋ผ

 

๊ธ€์ž ๊ด€๋ จ ํƒœ๊ทธ : ๋ฌธ๋‹จ (p vs pre)

๋ฌธ๋‹จ์„ ๋‚˜๋ˆ„๋Š” ํƒœ๊ทธ๋Š” <p>์™€ <pre> ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ๊ณ , ์ค„๋ฐ”๊ฟˆ·๊ณต๋ฐฑ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

 

๊ตฌ๋ถ„ <p> <pre>
์ค„๋ฐ”๊ฟˆ ๋ฌด์‹œ๋จ → <br> ํ•„์š” ์ž…๋ ฅํ•œ ๊ทธ๋Œ€๋กœ ์ ์šฉ
๊ณต๋ฐฑ ์—ฌ๋Ÿฌ ์นธ๋„ 1์นธ์œผ๋กœ ์ž…๋ ฅํ•œ ๊ทธ๋Œ€๋กœ ์ ์šฉ