๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
TIL -์ผ๊ฐ„ํ•™์Šต๊ธฐ๋ก/Css

2W _JS_CSS๊ธฐ์ดˆ

by ___Jin 2021. 11. 19.

CSS ๋‚ด๋จธ๋ฆฟ์† css๋Š” ์กฐ์˜ค๊ธˆ ๊ทธ๋ž˜๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝ์— ๋น„ํ•ด์„œ๋Š” ์ข€ ๋ค๋ฒผ๋ณผ๋งŒํ•œ,

๊ทธ๋‹ˆ๊นŒ ์‹œ๊ฐ„์ด ๋ฌดํ•œ๋Œ€๋กœ ์žˆ์œผ๋ฉด ์–ด๋–ป๊ฒŒ๋“  ๊ตฌ๊ธ€๋งํ•ด์„œ ๋ญ๋ผ๋„ ํ• ์ˆ˜์žˆ์„๊ฐ™์€ ๊ทธ๋Ÿฐ๊ฒƒ.

 

์™œ๋ƒํ•˜๋ฉด ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๊ฐ€ ์ƒ์„ธํžˆ ํ•˜๋‚˜์”ฉ ์งš์–ด๊ฐ€๋ฉฐ ์•Œ๋ ค์ฃผ๊ณ , ์ ์šฉ ์‚ฌํ•ญ์ด ๋ฐ”๋กœ๋ฐ”๋กœ ๋ˆˆ์— ๋ณด์ด๋‹ˆ๊นŒ 

JS์ฒ˜๋Ÿผ ๋ฌ๋‚˜..? ์‹ถ์–ด console.log  ์ฐ์–ด๋ณด๋ฉด ๊ฒฐ๊ณผ๋Œ€์‹  ์˜ค๋ฅ˜๋‚˜์˜ค๋Š” ๊ทธ๋Ÿฐ๋Š๋‚Œ ์•„๋‹ˆ๋‹ˆ๊นŒ....

 

์‚ฌ์‹ค์€ ์‘์šฉ์„ ์–ด๋ ค์›Œํ•˜๋Š” ๋‚˜ํ•œํ…Œ๋Š” ๊ทธ๋ž˜๋„ ์กฐ๊ธˆ ์ธ๊ฐ„๋ฏธ ์žˆ๋Š” ์ปดํ“จํ„ฐ์˜ ์–ธ์–ด๋กœ ๋Š๊ปด์ง„๋‹ค.

 

์˜ค๋Š˜  ์ˆ˜์—…์ค‘์— CSS๊ฐ€ ์‹ซ์–ด ๋ฐฑ์—”๋“œ ๊ฐ€์‹œ๋Š” ๋ถ„๋“ค์ด ์žˆ๋‹ค์…”์„œ, 

์˜ค! ๋‚ด๊ฐ€ ์ž์Šค ๋ฌด์„œ์›Œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ€๊ณ ์žํ•˜๋Š” ๊ทธ๋Ÿฐ๊ฑด๊ฐ€ ๊ณต๊ฐํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๋„๋ง์นœ๊ณณ์—” ๋‚™์›์€ ์—†๋‹ค......๊ณ  ํ•˜๋‹ˆ ์—ด์‹ฌํžˆ JS๋ž‘ ์นœํ•ด์ ธ์•ผ์ง€ ์–ด๋ ค์›Œ์„œ ์˜คํžˆ๋ ค ์ข‹์•„~~

 

CSS ํ•™์Šต๋ชฉํ‘œ

  • CSS์˜ ์‚ฌ์š”๋ชฉ์ ์„ ์ดํ•ดํ•œ๋‹ค
  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ ๊ธฐ์ดˆ์†Œ์–‘์— ๋Œ€ํ•ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๊ธฐ๋ฒˆ ๋ฌธ๋ฒ•๊ณผ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ• ์ˆ˜์žˆ๋‹ค.
  • CSS๋ฅผ HTML์— ์ ์šฉํ•˜๋Š”๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•œ๋‹ค.
  • id ๋ฐ class์™€ ๊ด€๋ จ๋œ selector ๊ทœ์น™์„ ์ดํ•ดํ•œ๋‹ค.
  • CSS๋ฅผ ์ด์šฉํ•ด ํ…์ŠคํŠธ๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋‹ค
  • CSS์—์„œ ์“ฐ์ด๋Š” ๋‹จ์œ„์˜ ๋‘๊ฐ€์ง€ ๊ตฌ๋ถ„์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๊ฐ ๋‹จ์œ„๊ฐ€ ์ ํ•ฉํ•œ ๊ฒฝ์šฐ๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • CSS ๋ฐ•์Šค ๋ชจ๋ธ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค
    • box model
      • width, height
      • margin, padding, border
    • ๋ฐ•์Šค ํฌ๊ธฐ๋ฅผ ์ธก์ •ํ•˜๋Š” ๋‘๊ฐ€์ง€ ๊ธฐ์ค€์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
  • MDN ๋˜๋Š” w3school ๋“ฑ์˜ ๋ ˆํผ๋Ÿฐ์Šค ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•ด CSS ์†์„ฑ์„ ๊ฒ€์ƒ‰ํ•˜๊ณ  ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋Œ“๊ธ€