๐คฎ ์ฝ๋ฉ์ด์ง ์ฝ์นญ ํ๋ก์ ํธ - (4) ๋ ์ด์์1
๋ค์ด๊ฐ๊ธฐ
- ํ๋ฉด ๋ ์ด์์ ๊ทธ๋ฆฌ๊ธฐ (css)
- ํด๋ฆญํ ์ ์๋ ๊ธ์ ๋ง๋ค๊ธฐ (a ํ๊ทธ)
์ด์ ์์
์์ ๋ณํ๋ฅผ ์ค ๋ถ๋ถ
- ์ด๋ก ๋ณด๋ค ์์ฉ์ ์ ๋ฉด์ผ๋ก
- ๋ฌด์์ ๊ตฌํํ ์ง(=์ ํ์ํ์ง) ์ค์ฌ
์ ์ฒดํ๋ฉด ์ก๊ธฐ

- div๋ ํ๋ฉด ๊ตฌ์ฑ ๊ฐ์ฅ ๊ธฐ๋ณธ๋จ์.
- className : ํ๋ฉด์ ์ด๋ฆ์ ๋ถ์ฌํด์ ๋ฐ๋ ค์ ๊พธ๋ฐ ์ ์๊ฒ ์ค์ .

- width, height
- vh, vw๋ก ์ค์ ํ๋ฉด ํ๋ฉด๋๋น ๋น์จ๋ก ์ค์ ๊ฐ๋ฅ
- %๋ก ์ค์ ํ๋ฉด ๋ถ๋ชจ๋๋น ๋น์จ๋ก ์ค์ ๊ฐ๋ฅ
- margin : ์ข์ฐ์์๋ ์ฌ๋ฐฑ ์ค์
- border : ํ
๋๋ฆฌ ์ค์
- barground-color : ๋ฐฐ๊ฒฝ์ ์ค์

์-์ค๊ฐ-์๋ ๋๋๊ธฐ


์ผ์ชฝ-์ค๊ฐ-์ค๋ฅธ์ชฝ ๋๋๊ธฐ


- display : div์ ์ฑ๊ฒฉ์ ๊ฒฐ์ ํจ.
- block : ์์์ธ์ด๋ (width ์ ๋ถ ์ฐจ์ง)
- inline : ์ธ์ธ (width ์ค์ ๋ถ๊ฐ)
- inline-block : ํจ๊ป ๊ทธ๋ฆฌ๊ณ ๋ ๋ฐ๋ก (width ์ค์ ๊ฐ๋ฅ)

๋๊ฐ๊ธฐ
- ์ด์ ์์
๋ณด๋ค ์ง๊ด์ ์ด์๋ค๋ ํ๊ฐ
- ์ด์ ์์
๋ค์๋ ๋น์ทํ ๋ฐฉ์์ผ๋ก ์ ์ฉํด์ ๋ฆฌ๋ด์ผ ํด์ผ์ง.
- ๋ค์ ์์
์๋ ์์ ๋์คํ๋ ์ด๋ฅผ ์ค์ ํ์ด ์ง์ ๋ง๋ค์ด๋ณด๊ณ ,
- ๊ทธ๋ฆฌ๊ณ ๋ถ์ผ ๊ธฐ๋ฅ๋ค ๋ฆฌ์คํธ์
ํด์ ๋ถ์ฌ๊ฐ๋ ์์ผ๋ก ์ ์ฉํ๋ฉด ๋ ๋ฏ.