3. Boxbox Sizing
box-sizing ์ค์
box-sizing์ CSS์ ์์ฑ ์ค ํ๋๋ก, ๋ฐ์ค ๋ชจ๋ธ(box model)์์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ ์ง์ ํ๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก CSS์ ๋ฐ์ค ๋ชจ๋ธ์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ ๋ ์์์ ์ฝํ ์ธ ,
์์ชฝ ์ฌ๋ฐฑ(padding)
ํ ๋๋ฆฌ(border)
๋ฐ๊นฅ ์ฌ๋ฐฑ(margin)
์ ๊ณ ๋ คํ๋ค.
box-sizing ์์ฑ์ ์ด๋ฌํ ํฌ๊ธฐ ๊ณ์ฐ ๋ฐฉ๋ฒ์ ๋ณ๊ฒฝํ ์ ์๊ณ , ๋ค์ ๋ ๊ฐ์ง ๊ฐ์ ๊ฐ์ง ์ ์๋ค.
content-box
๊ธฐ๋ณธ๊ฐ์ผ๋ก, ์์์ ํฌ๊ธฐ๋ฅผ ์ฝํ ์ธ ์ ํฌ๊ธฐ์๋ง ์ ์ฉํ๋ค.
์ฆ, ํจ๋ฉ(padding)๊ณผ ํ ๋๋ฆฌ(border)๋ ์์์ ํฌ๊ธฐ์ ์ถ๊ฐ๋๋ค. ์ด ๊ฒฝ์ฐ์๋ ์์์ ์ค์ ํฌ๊ธฐ๋ ์ฝํ ์ธ ์์ญ์ ํฌ๊ธฐ์๋ง ์ํฅ์ ๋ฐ๋๋ค.
border-box
์์์ ํฌ๊ธฐ๋ฅผ ์ฝํ ์ธ , ์์ชฝ ์ฌ๋ฐฑ, ํ ๋๋ฆฌ๋ฅผ ํฌํจํ ํฌ๊ธฐ๋ก ์ ์ฉํ๋ค. ๋ฐ๋ผ์ ์์์ ํฌ๊ธฐ์ ํจ๋ฉ๊ณผ ํ ๋๋ฆฌ๊ฐ ํฌํจ๋๋ค. ์ด๋ฌํ ์ค์ ์ ๋ ์ด์์์ ์์ฑํ ๋ ํธ๋ฆฌํ๋ฉฐ, ์์์ ํฌ๊ธฐ๋ฅผ ์ง์ ํ ๋ ํ ๋๋ฆฌ์ ์์ชฝ ์ฌ๋ฐฑ์ ๊ณ ๋ คํ ํ์๊ฐ ์์ด์ง๋ค.
์ค์ต with border-box
content-box ๋ฅผ ์ ์ฉํ ๋ชจ์ต
์๋์ ์ฐ๋์์ผ๋ก ๋ณด์ด๋ ๋ถ๋ถ์ด content ์ ํฌ๊ธฐ์ด๋ค.
์ ์๋, ์ผ์ชฝ ์ค๋ฅธ์ชฝ์ผ๋ก padding ์ 10px ์ ๋จน์๊ธฐ ๋๋ฌธ์, ์ปจํ ํธ์ width, height ๊ฐ์ ๊ฐ๊ฐ 220px 60px ์ด ๋๋ค.
content-box ๋ ์ด๋ ๊ฒ html ์ปจํ ํธ๋ฅผ ์ค์ฌ์ผ๋ก padding ๊ฐ์ ๋ฐ๊นฅ์ผ๋ก ๋ฐ์ด๋ด์ด ์์ญ์ ์ฐจ์งํ๋ค.
div ์ ์ง์ ํ padding ์ ์์ชฝ์ผ๋ก ๋ค์ด๊ฐ๋ฉฐ, margin ๊ฐ์ ์ปจํ ํธ์ ๋ฐ๊นฅ์ผ๋ก ๋์ค๊ฒ ๋๋ค.
border-box ๋ฅผ ์ ์ฉํ ๋ชจ์ต
์๋์ ์ฐ๋์์ผ๋ก ๋ณด์ด๋ ๋ถ๋ถ์ด content ์ ํฌ๊ธฐ์ด๋ค.
์ ์๋, ์ผ์ชฝ ์ค๋ฅธ์ชฝ์ผ๋ก padding ์ 10px ์ ๋จน์์์๋ ๋ถ๊ตฌํ๊ณ , ์ปจํ ํธ์ width, height ๊ฐ์ ๊ฐ๊ฐ 200px 40px ์ด ๋๋ค. ์ค์ ์ปจํ ํธ์ ํฌ๊ธฐ๋ 180px, 20px ์ด ๋๋ค.
์ด์ ๊ฐ์ด border-box ๋ padding ๊ฐ์ด ์ปจํ ํธ๋ฅผ ์ค์ฌ์ผ๋ก ์์ผ๋ก ๋ค์ด์ค๊ฒ ๋๋ค.
๊ฒฐ๋ก
content-box ๋ฅผ ์ฌ์ฉํ๋ฉด ์ปจํ ํธ๊ฐ ์ง์ ํ ๊ฐ๋ก ์ธ๋ก์ ๊ฐ๋ณด๋ค ๋ ํฌ๊ฒ ๋ ๊ฐ๋ฅ์ฑ์ด ์๊ฒ ๋๋ค.
border-box ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฌ์ด์ฆ๋ฅผ ๊ณ์ฐํ์ฌ ๋ ์ด์์์ ์ก๋๋ฐ์ ํจ์ฌ ์์ํ๋ค.
border-box ๋ padding ๊ณผ border ์ ์ฌ์ด์ฆ๊ฐ ์ปจํ ํธ ์์ญ์ ์์ผ๋ก ๋ค์ด์ค๊ฒ ๋๋ค.
content-box, border-box ์ ์๊ด์์ด margin ์ ์ฌ์ด์ฆ๋ ํญ์ ์ปจํ ํธ์ ๋ฐ๊นฅ์ผ๋ก ์ฌ์ด์ฆ๋ฅผ ์ก๋๋ค.
Last updated