๐Ÿง™๐Ÿผ HTML ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์š”์†Œ


HTML ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์š”์†Œ


1. div

: ์ปจํ…์ธ  ๋ถ„ํ•  ์š”์†Œ
: ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ
: ํ”Œ๋กœ์šฐ ์ฝ˜ํ…์ธ ๋ฅผ ์œ„ํ•œ ํ†ต์šฉ ์ปจํ…Œ์ด๋„ˆ (์ˆœ์ˆ˜ ์ปจํ…Œ์ด๋„ˆ๋กœ์„œ ์•„๋ฌด๊ฒƒ๋„ ํ‘œํ˜„์•ˆํ•จ)
: ๋ณธ์งˆ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Œ

<div>how are you today</div>

2. span

: ์ธ๋ผ์ธ ์ปจํ…Œ์ด๋„ˆ
: ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ
: ๋ณธ์งˆ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Œ
: ์–ด๋–ค ํŠน์„ฑ์˜ ๊ฐ’์„ ์„œ๋กœ ๊ณต์œ ํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ฌถ์„ ๋•Œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

๐ŸŒต span (์ธ๋ผ์ธ ์š”์†Œ) vs div(๋ธ”๋ก ์š”์†Œ)
(๋‘˜์ด ๋งค์šฐ ์œ ์‚ฌํ•˜์ง€๋งŒ ์š”์†Œ์˜ ์ฐจ์ด์  ๊ธฐ์–ตํ•˜๊ธฐ!)

  • Semantic Web : ์š”์†Œ์˜ ์˜๋ฏธ๋ฅผ ๊ณ ๋ คํ•˜์—ฌ ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.
    (div, span : non-semantic)

3. header

: ์†Œ๊ฐœ ๋ฐ ํƒ์ƒ‰์— ๋„์›€
: ์ œ๋ชฉ, ๋กœ๊ณ , ๊ฒ€์ƒ‰, ํผ, ์ž‘์„ฑ์ž ์ด๋ฆ„๋“ฑ์˜ ์š”์†Œ๋ฅผ ํฌํ•จํ•œ๋‹ค.
: ๋‹ค๋ฅธ header ๋˜๋Š” footer๊ฐ€ ์ž์†์œผ๋กœ ์˜ฌ ์ˆ˜ ์—†๋‹ค.
: ํŽ˜์ด์ง€ ์ œ๋ชฉ, ๊ธ€์ œ๋ชฉ

4. footer

: ๊ฐ€๊นŒ์šด ๊ตฌํš ์ฝ˜ํ…์ธ ๋‚˜ ๊ตฌํš ๋ฃจํŠธ footer๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.
: ๊ตฌํš์˜ ์ž‘์„ฑ์ž, ์ €์ž‘๊ถŒ ์ •๋ณด, ๊ด€๋ จ ๋ฌธ์„œ ๋“ฑ์ด ์žˆ๋‹ค.
( ๐ŸŒต header ์™€ footer๋Š” ์–ด๋Š ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•ด๋ณด๋ฉด, ๊ทธ๋Œ€๋กœ ์ œ์‹œ๊ฐ€ ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ• ์ˆ˜์žˆ๋‹ค. ๋˜ํ•œ header์™€ footer๋Š” semantic ์ด๋‹ค. )

5. nav

: ํƒ์ƒ‰ ๊ตฌํš ์š”์†Œ
: ๋ฌธ์„œ์˜ ๋ถ€๋ถ„ ์ค‘ ํ˜„์žฌ ํŽ˜์ด์ง€
: ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ๋งํฌ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐํš์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
: ์ž์ฃผ ์“ฐ์ด๋Š” ์˜ˆ์ œ๋กœ๋Š” ๋ฉ”๋‰ด, ๋ชฉ์ฐจ, ์ƒ‰์ธ(๋ชฉ๋ก ํƒœ๊ทธ ํ˜•ํƒœ๋ฅผ ๋งํ•œ๋‹ค.)


6. aside

: ๋ณ„๋„ ๊ตฌํš ์š”์†Œ
: ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ์ œ์ž‘์‹œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋ฉฐ ํ˜น์€ ์ฝœ์•„์›ƒ ๋ฐ•์Šค์ด๋‹ค. (๋‚ด์šฉ๊ณผ ๊ฐ„์ ‘์ ์œผ๋กœ๋งŒ ์—ฐ๊ด€๋œ ๋ถ€๋ถ„)

7. main

: body์˜ ์ฃผ์š” ์ฝ˜ํ…์ธ 
: โญ๏ธ ๋ฌธ์„œ์— ํ•˜๋‚˜ ๋ณด๋‹ค ๋งŽ์€ main ํƒœ๊ทธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋ฉด ์•ˆ๋œ๋‹ค.
: ์ต์Šคํ”Œ๋กœ์–ด ์ ‘๊ทผ์„ฑ ์ฃผ์˜ํ•˜๊ธฐ.

8. article

: ๋ฌธ์„œ, ํŽ˜์ด์ง€, ์—ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋˜๋Š” ์‚ฌ์ดํŠธ ์•ˆ์—์„œ (โญ๏ธ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•ด ๋ฐฐํฌํ•˜๊ฑฐ๋‚˜ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌํš)
: ๊ฒŒ์‹œํŒ๊ณผ ๋ธ”๋กœ๊ทธ ๊ธ€, ๋งค๊ฑฐ์ง„์ด๋‚˜ ๋‰ด์Šค๊ธ€ ๋“ฑ
: article ๊ณผ section์€ ์„œ๋กœ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
: ์ฃผ๋กœ ์ œ๋ชฉ h1 ~ h6 ์„ ๋„ฃ์–ด์„œ ๊ตฌ์„ฑํ•œ๋‹ค.

9. section

: ์ผ๋ฐ˜ ๊ตฌํš์š”์†Œ (div์™€ ๋น„๊ตํ•˜๊ธฐ)
: html ๋ฌธ์„œ์˜ ๋…๋ฆฝ์ ์ธ ๊ตฌํš์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ ๋ฌธ๋งฅ์ ์œผ๋กœ ํ๋ฆ„์ด ๋‹ค๋ฅธ ๋ฌธ๋‹จ ๊ตฌ๋ถ„์ด๋‹ค.
: ์ฃผ๋กœ ์ œ๋ชฉ h1 ~ h6 ์„ ๋„ฃ์–ด์„œ ๊ตฌ์„ฑํ•œ๋‹ค. ์ œ๋ชฉ์„ ํฌํ•จํ•˜์ง€๋งŒ ํ•ญ์ƒ ๊ทธ๋Ÿฐ ๊ฒƒ์€ ์•„๋‹˜
: ๋Œ€๊ฐœ, ๋ฌธ์„œ ์š”์•ฝ์— ํ•ด๋‹น ๊ตฌํš์ด ๋…ผ๋ฆฌ์ ์œผ๋กœ ๋‚˜ํƒ€๋‚˜์•ผ ํ•˜๋ฉด section์ด ์ข‹์€ ์„ ํƒ

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