CSS box-sizing
๐ box-sizing ์์ฑ
box-sizing ์์ฑ์ ๋๋น์ ๋์ด๊ฐ ํฌํจํ ์์ญ์ ๋ณ๊ฒฝํจ์ผ๋ก์จ ๋๋น์ ๋์ด์ ๊ณ์ฐ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ ์ ์์ต๋๋ค.
- content-box: ๊ธฐ๋ณธ๊ฐ. ๋๋น์ ๋์ด๊ฐ ์ฝํ ์ธ ์์ญ๋ง์ ํฌํจํฉ๋๋ค. padding์ด ์ถ๊ฐ ๋์ด๋ contentํฌ๊ธฐ๋ ๋ณด์ฅ๋ฐ๊ณ ์ถ์ ๋ ์๋๋ค.
- border-box: ๋๋น์ ๋์ด๊ฐ ์์ชฝ ์ฌ๋ฐฑ๊ณผ ํ ๋๋ฆฌ๊น์ง ํฌํจํฉ๋๋ค.
div {
content-box: border-box;
}
๊ฐ๋ฐ์๋๊ตฌ๋ฅผ ํตํด padding์ด ์ถ๊ฐ๋์ด๋ contentํฌ๊ธฐ๋ ๋ณํ์ง ์์ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
๐ฌ ์ต์ ๋๊ธ