CSS ๋ด๋จธ๋ฆฟ์ css๋ ์กฐ์ค๊ธ ๊ทธ๋๋ ์๋ฐ์คํฌ๋ฆฝ์ ๋นํด์๋ ์ข ๋ค๋ฒผ๋ณผ๋งํ,
๊ทธ๋๊น ์๊ฐ์ด ๋ฌดํ๋๋ก ์์ผ๋ฉด ์ด๋ป๊ฒ๋ ๊ตฌ๊ธ๋งํด์ ๋ญ๋ผ๋ ํ ์์์๊ฐ์ ๊ทธ๋ฐ๊ฒ.
์๋ํ๋ฉด ๊ฐ๋ฐ์ ๋๊ตฌ๊ฐ ์์ธํ ํ๋์ฉ ์ง์ด๊ฐ๋ฉฐ ์๋ ค์ฃผ๊ณ , ์ ์ฉ ์ฌํญ์ด ๋ฐ๋ก๋ฐ๋ก ๋์ ๋ณด์ด๋๊น
JS์ฒ๋ผ ๋ฌ๋..? ์ถ์ด console.log ์ฐ์ด๋ณด๋ฉด ๊ฒฐ๊ณผ๋์ ์ค๋ฅ๋์ค๋ ๊ทธ๋ฐ๋๋ ์๋๋๊น....
์ฌ์ค์ ์์ฉ์ ์ด๋ ค์ํ๋ ๋ํํ ๋ ๊ทธ๋๋ ์กฐ๊ธ ์ธ๊ฐ๋ฏธ ์๋ ์ปดํจํฐ์ ์ธ์ด๋ก ๋๊ปด์ง๋ค.
์ค๋ ์์ ์ค์ CSS๊ฐ ์ซ์ด ๋ฐฑ์๋ ๊ฐ์๋ ๋ถ๋ค์ด ์๋ค์ ์,
์ค! ๋ด๊ฐ ์์ค ๋ฌด์์ ํ๋ก ํธ์๋ ๊ฐ๊ณ ์ํ๋ ๊ทธ๋ฐ๊ฑด๊ฐ ๊ณต๊ฐํ๋ค.
ํ์ง๋ง, ๋๋ง์น๊ณณ์ ๋์์ ์๋ค......๊ณ ํ๋ ์ด์ฌํ JS๋ ์นํด์ ธ์ผ์ง ์ด๋ ค์์ ์คํ๋ ค ์ข์~~
CSS ํ์ต๋ชฉํ
- CSS์ ์ฌ์๋ชฉ์ ์ ์ดํดํ๋ค
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ๊ธฐ์ด์์์ ๋ํด ์ดํดํ ์ ์๋ค.
- ๊ธฐ๋ฒ ๋ฌธ๋ฒ๊ณผ ๊ตฌ์กฐ๋ฅผ ์ดํดํ ์์๋ค.
- CSS๋ฅผ HTML์ ์ ์ฉํ๋๋ฐฉ๋ฒ์ ์ดํดํ๋ค.
- id ๋ฐ class์ ๊ด๋ จ๋ selector ๊ท์น์ ์ดํดํ๋ค.
- CSS๋ฅผ ์ด์ฉํด ํ ์คํธ๋ฅผ ๊พธ๋ฐ ์ ์๋ค
- CSS์์ ์ฐ์ด๋ ๋จ์์ ๋๊ฐ์ง ๊ตฌ๋ถ์ ์ดํดํ ์ ์๋ค.
- ๊ฐ ๋จ์๊ฐ ์ ํฉํ ๊ฒฝ์ฐ๋ฅผ ๊ตฌ๋ถํ ์ ์๋ค.
- CSS ๋ฐ์ค ๋ชจ๋ธ์ ์ดํดํ ์ ์๋ค
- box model
- width, height
- margin, padding, border
- ๋ฐ์ค ํฌ๊ธฐ๋ฅผ ์ธก์ ํ๋ ๋๊ฐ์ง ๊ธฐ์ค์ ์ฐจ์ด๋ฅผ ์ดํดํ ์ ์๋ค.
- box model
- MDN ๋๋ w3school ๋ฑ์ ๋ ํผ๋ฐ์ค ์ฌ์ดํธ๋ฅผ ์ด์ฉํด CSS ์์ฑ์ ๊ฒ์ํ๊ณ ์ด์ฉํ ์ ์๋ค.
๋๊ธ