๐Ÿ—ฃ๏ธ ์›น ๊ฐœ๋ฐœ ์ดํ•ด

โšก3๊ฐ€์ง€ ์–ธ์–ด

HTML : ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋งˆํฌ์—… ์–ธ์–ด. (๊ตฌ์กฐ)
CSS : ์Šคํƒ€์ผ์„ ๋งŒ๋“œ๋Š” ๋””์ž์ธ ์–ธ์–ด. (์Šคํƒ€์ผ)
JavaScript : ๊ตฌ์กฐ์™€ ์Šคํƒ€์ผ์„ ์™„์„ฑ๋œ ๊ฐ๊ฐ์˜ ์š”์†Œ์— ์ƒ๋ช…์„ ๋ถ€์—ฌํ•˜๋Š” ์—ญํ• . (์ƒํ˜ธ์ž‘์šฉ)



๐Ÿ—ฃ๏ธ HTML ๊ธฐ์ดˆ

  • HTML (Hyper Text Markup Language)
    • ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์–ธ์–ด.
    • ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹Œ, ์›น ํŽ˜์ด์ง€์˜ ๋ผˆ๋Œ€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด.

๐Ÿง  HTML ๊ธฐ๋ณธ๊ตฌ์กฐ์™€ ๋ฌธ๋ฒ•

  • ์›น ํŽ˜์ด์ง€์˜ ํ‹€์„ ๋งŒ๋“œ๋Š” ๋งˆํฌ์—… ์–ธ์–ด.
  • HTML์€ tag๋“ค์˜ ์ง‘ํ•ฉ.
    • tag : ๋ถ€๋“ฑํ˜ธ ( <> )๋กœ ๋ฌถ์ธ HTML์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ์š”์†Œ.

๐Ÿง  ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” HTML ์š”์†Œ


tag๋œป
< div >Division
< span >Span
< img >Image
< a >Link
< ul > & < li >Unordered List & List Item
< input >Input (Text, Radio, Check box, Password...)
< textarea >Multi - line Text Input
< button >Button
  • < div > ์™€ < span > ์ฐจ์ด ( CSS ์ ์šฉ X )
    • < div > : ํ•œ ์ค„์”ฉ ์ฐจ์ง€
    • < span > : ๊ณต๊ฐ„์œผ๋กœ ์ฐจ์ง€

๐Ÿง  ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ


๐Ÿง  ์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ

โšก์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ๋ž€? (Semantic element)

'์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ์˜๋ฏธ๋ก ์ ์•ˆ' ์ด๋ผ๊ณ  ํ•ด์„.
๋”ฐ๋ผ์„œ, ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์„ ์ถ”๊ตฌํ•˜๊ธฐ ์‹œ์ž‘.

HTML์˜ ์ตœ์‹ ๋ฒ„์ „ HTML5์—์„œ๋Š” ์‹œ๋ฉ˜ํ‹ฑ ์›น์ด ์ค‘์‹œ๋˜๋ฉด์„œ, ์—ฌ๋Ÿฌ ์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“ค์–ด์กŒ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด์„œ ์ตœ์ƒ์œ„ ์ œ๋ชฉ์„ ์‚ฌ์šฉํ• ๋•Œ ์ด์šฉ๋˜๋Š” < h1 > ํƒœ๊ทธ์— ๊ฒฝ์šฐ,
CSS๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š์•„๋„ ํฐ ํฐํŠธ์™€ ์œ„์•„๋ž˜ ๊ฐ„๊ฒฉ๋“ฑ์„ ์ฃผ์–ด ์ œ๋ชฉ์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก ํ•œ๋‹ค.

โšก์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ๋ฅผ ์ถ”๊ตฌํ•˜๋Š” ์ด์œ ๋Š”?

CSS ์†์„ฑ๊ฐ’๋งŒ ์ค€๋‹ค๋ฉด < div > ์š”์†Œ ๋˜๋Š” < span > ์š”์†Œ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
ํ•˜์ง€๋งŒ, ์›นํŽ˜์ด์ง€ ํ•˜๋‚˜์— < div > ์š”์†Œ๊ฐ€ ์ˆ˜์‹ญ๊ฐœ๊ฐ€ ์ค‘์ฒฉ๋œ๋‹ค๋ฉด?
< div > ์ง€์˜ฅ์ด ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

    1. ๊ฒ€์ƒ‰ ์—”์ง„์ด ์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ๋ฅผ ๋” ์ข‹์•„ํ•˜๊ธฐ ๋•Œ๋ฌธ
    • ๋„ค์ด๋ฒ„, ๊ตฌ๊ธ€ ๋“ฑ ๋ชจ๋‘ ๊ณ ์œ ํ•œ ๊ฒ€์ƒ‰ ์—”์ง„์„ ๋ณด์œ .
    • ๊ฒ€์ƒ‰์—”์ง„์€ ์›น ํŽ˜์ด์ง€๋ฅผ ๋ฐฉ๋ฌธํ•  ๋•Œ ์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ๋ฅผ ์ค‘์š”ํ•œ ํ‚ค์›Œ๋“œ๋กœ ๊ณ ๋ ค.
    • ์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ์— ๋‹ด๊ธด ์˜๋ฏธ์— ๋”ฐ๋ผ ๊ฒ€์ƒ‰๊ฒฐ๊ณผ ์ƒ์œ„ ๋…ธ์ถœ์ด ๊ฒฐ์ •.

    1. ์—ฌ๋Ÿฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•จ๊ป˜ ์ž‘์—…ํ•  ๊ฒฝ์šฐ ํŽธ๋ฆฌํ•˜๋‹ค.
    • < div > ์š”์†Œ๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์˜๋ฏธ ์žˆ๋Š” ์ฝ”๋“œ๋ธ”๋ก์„ ์ฐพ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ํŽธ๋ฆฌ.
    • ๋˜ํ•œ, ์š”์†Œ ์•ˆ์— ์ฑ„์›Œ์งˆ ๋ฐ์ดํ„ฐ ์œ ํ˜•๋„ ์˜ˆ์ธกํ•˜๊ธฐ ์‰ฝ๋‹ค.
์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ
< header >์ฃผ๋กœ ํŽ˜์ด์ง€ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ (์‚ฌ์ดํŠธ์˜ ์ œ๋ชฉ. ์„ ํƒ์ ์œผ๋กœ๋Š” ์ƒ๋‹จ๋ฐ”๋‚˜ ๊ฒ€์ƒ‰์ฐฝ์œผ๋กœ๋„ ์ด์šฉ.)
< main >๋ฌธ์„œ์˜ ์ฃผ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œ.
< nav >๋‚ด๋น„๊ฒŒ์ด์…˜์— ์•ฝ์ž. ์ƒ๋‹จ๋ฐ”๋“ฑ ์•ˆ๋‚ดํ•˜๋Š” ์š”์†Œ. (ul์„ ๋„ฃ์–ด ๋ชฉ๋ก ํ˜•ํƒœ๋กœ ์ด์šฉ.)
< article >๋…๋ฆฝ์ ์ด๊ณ  ์ž์ฒด ํฌํ•จ๋œ ์ฝ˜ํ…์ธ  ์ง€์ •.
< aside >๋ณธ๋ฌธ์˜ ์ฃผ์š” ๋ถ€๋ถ„์„ ํ‘œ์‹œํ•˜๊ณ  ๋‚จ์€ ๋ถ€๋ถ„์„ ์„ค๋ช…ํ•˜๋Š” ์š”์†Œ๋กœ ์ด์šฉ. (ํŠน๋ณ„ํ•˜์ง€ ์•Š์€ ์‚ฌ์ด๋“œ๋ฐ”๋‚˜ ๊ด‘๊ณ ์ฐฝ ๋“ฑ์— ์‚ฌ์šฉ)
< footer >์ฃผ๋กœ ํŽ˜์ด์ง€ ์ตœํ•˜๋‹จ์— ์œ„์น˜ (์‚ฌ์ดํŠธ์˜ ๋ผ์ด์„ ์Šค, ์ฃผ์†Œ, ์—ฐ๋ฝ์ฒ˜.)


๐Ÿ—ฃ๏ธ HTML ์‹ฌํ™”

๐Ÿง  class์™€ id

  • id : ๊ณ ์œ (unique)ํ•œ ์ด๋ฆ„์„ ๋ถ™์ผ ๋•Œ.
    • ์ฝ๊ธฐ ์˜์—ญ์ž์ฒด์—๋Š” ๊ณ ์œ ํ•˜๋ฏ€๋กœ id๋กœ ์ด๋ฆ„์„ ๋ถ™์ธ๋‹ค.
    • ๋‹จ ํ•œ ๊ณณ์—์„œ๋งŒ ์‚ฌ์šฉ๋  ๊ฒฝ์šฐ.
    • ์ค‘๋ณต๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ.

  • class : ๋ฐ˜๋ณต๋˜๋Š” ์˜์—ญ์„ ์œ ํ˜•๋ณ„๋กœ ๋ถ„๋ฅ˜ํ•  ๋•Œ.
    • ๊ฐ™์€ class ๊ฐ’์„ ์ง€์ •ํ•ด ์คŒ์œผ๋กœ์„œ ๋™์ผํ•œ ์œ ํ˜•์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

โšกclass, id ํ‘œํ˜„๋ฒ•

HTML ํƒœ๊ทธSelector
< div id = "writing-section" >div # writing-section
< li class = "comment" >li . comment


๐Ÿ‘ฉโ€๐Ÿ’ป ๋งˆ๋ฌด๋ฆฌ

์˜ค๋Š˜ HTML์„ ๋ฐฐ์šฐ๋ฉฐ ๊ณผ์ œ๋กœ ๋งŒ๋“  ๐Ÿ”ฅ์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ๐Ÿ”ฅ

profile
Drop the Bit!

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

๊ด€๋ จ ์ฑ„์šฉ ์ •๋ณด

Powered by GraphCDN, the GraphQL CDN