๋ฐ์ผ๋ฆฌ ๋ ˆ์ฝ”๋“œ

๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๋Š” ๋””์ž์ด๋„ˆ. ์นดํŽ˜์™€ ๋ง›์ง‘ ์ผ์ƒ์ด์•ผ๊ธฐ ๊ณง ๋งŒ๋‚˜์š”-

ํ•™์Šต์ผ์ง€

์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ 1์ฃผ์ฐจ ํ•™์Šต์ผ์ง€

Marronwit 2022. 7. 17. 21:31
320x100
๋ฐ˜์‘ํ˜•

๐Ÿ‘‰ HTML์€ ๋ผˆ๋Œ€, CSS๋Š” ๊พธ๋ฏธ๊ธฐ!

  • HTML์€ ๊ตฌ์—ญ๊ณผ ํ…์ŠคํŠธ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ฝ”๋“œ๋กœ, CSS๋Š” ์žก์€ ๊ตฌ์—ญ์„ ๊พธ๋ฉฐ์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉด๋œ๋‹ค.
    HTML ๋‚ด style ์†์„ฑ์œผ๋กœ ๊พธ๋ฏธ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ธด ์„ธ์›”๋™์•ˆ ์ด๊ฒƒ์„ ํ•œ๋ฐ ๋ชจ์•„ ๋ณผ ์ˆ˜ ์žˆ๋Š” CSS ํŒŒ์ผ์ด ํƒ„์ƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. HTML ์ฝ”๋“œ ๋‚ด์— CSS ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์™€์„œ ์ ์šฉ.
  • ๋˜ํ•œ CSS๋ฅผ ์ž˜ ์‚ฌ์šฉํ•  ์ค„ ์•„๋Š” ๊ฒƒ๊ณผ, '์˜ˆ์˜๊ฒŒ' ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๋‹ค๋ฅธ ์˜์—ญ์ด๊ธฐ ๋•Œ๋ฌธ์—(๋ถ“์„ ์žก์„ ์ค„ ์•„๋Š” ๊ฒƒ๊ณผ ๊ทธ๋ฆผ์„ ์ž˜ ๊ทธ๋ฆด ์ค„ ์•„๋Š” ๊ฒƒ์˜ ์ฐจ์ด), ๋งŽ์€ ๊ฒฝ์šฐ ์›น๋””์ž์ด๋„ˆ๋‚˜ ํผ๋ธ”๋ฆฌ์…”์—๊ฒŒ ์˜์กดํ•˜๊ฒŒ ๋œ๋‹ค.

๐Ÿ‘‰ HTML์€ ํฌ๊ฒŒ head์™€ body๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.

  • head์•ˆ์—๋Š” ํŽ˜์ด์ง€์˜ ์†์„ฑ ์ •๋ณด๋ฅผ, body์•ˆ์—๋Š” ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ๋‹ด๋Š”๋‹ค.
  • head ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ์ ์ธ ์š”์†Œ๋“ค: meta, script, link, title ๋“ฑ
    ๐Ÿ‘‰ ํŽ˜์ด์ง€์˜ ์†์„ฑ์„ ์ •์˜ํ•˜๊ฑฐ๋‚˜, ํ•„์š”ํ•œ ์Šคํฌ๋ฆฝํŠธ๋“ค์„ ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ฆ‰, ๋ˆˆ์— ์•ˆ ๋ณด์ด๋Š” ํ•„์š”ํ•œ ๊ฒƒ๋“ค์„ ๋‹ด๋Š” ๊ฒƒ.
  • body ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ์ ์ธ ์š”์†Œ๋“ค!
  •  

 

HTML ๋ถ€๋ชจ-์ž์‹ ๊ตฌ์กฐ ์‚ดํŽด๋ณด๊ธฐ

๐Ÿ‘‰ html ํƒœ๊ทธ๋Š”, "๋ˆ„๊ฐ€ ๋ˆ„๊ตฌ ์•ˆ์— ์žˆ๋Š๋ƒ"๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค.

๋‚˜๋ฅผ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ํƒœ๊ทธ๊ฐ€ ๋ฐ”๋€Œ๋ฉด, ๊ทธ ์•ˆ์˜ ๋‚ด์šฉ๋ฌผ๋„ ๋ชจ๋‘ ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค!

 

๋นจ๊ฐ„์ƒ‰ div ์•ˆ์—, ์ดˆ๋ก์ƒ‰/ํŒŒ๋ž€์ƒ‰ div๊ฐ€ ๋“ค์–ด์žˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ๋นจ๊ฐ„์ƒ‰ div๋ฅผ ๊ฐ€์šด๋ฐ๋กœ ์˜ฎ๊ธฐ๋ฉด, ๋‚ด์šฉ๋ฌผ์ธ ์ดˆ๋ก/ํŒŒ๋ž€ div๋„ ๋ชจ๋‘ ํ•จ๊ป˜ ์ด๋™ํ•œ๋‹ค.

์ฆ‰, ๋ฐ•์Šค๋ฅผ ์˜ฎ๊ธฐ๋ฉด ์•ˆ์˜ ๋‚ด์šฉ๋ฌผ๋„ ํ•จ๊ป˜ ์˜ฎ๊ฒจ์ง€๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์›๋ฆฌ์ด๋‹ค

๊ฐ™์€ ์›๋ฆฌ๋กœ, ์ดˆ๋ก div์˜ ๊ธ€์”จ์ƒ‰์„ ๋ฐ”๊พธ๋ฉด, ๋‚˜๋Š”๋ฒ„ํŠผ1์˜ ๊ธ€์”จ์ƒ‰๋„ ๋ฐ”๋€๋‹ค!

728x90
๋ฐ˜์‘ํ˜•