CSS box-sizing

๐Ÿ“„ box-sizing ์†์„ฑ

box-sizing ์†์„ฑ์€ ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ํฌํ•จํ•  ์˜์—ญ์„ ๋ณ€๊ฒฝํ•จ์œผ๋กœ์จ ๋„ˆ๋น„์™€ ๋†’์ด์˜ ๊ณ„์‚ฐ ๋ฐฉ๋ฒ•์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • content-box: ๊ธฐ๋ณธ๊ฐ’. ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ์ฝ˜ํ…์ธ  ์˜์—ญ๋งŒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. padding์ด ์ถ”๊ฐ€ ๋˜์–ด๋„ contentํฌ๊ธฐ๋Š” ๋ณด์žฅ๋ฐ›๊ณ  ์‹ถ์„ ๋•Œ ์”๋‹ˆ๋‹ค.
  • border-box: ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ์•ˆ์ชฝ ์—ฌ๋ฐฑ๊ณผ ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
div {
  content-box: border-box;
}

box-sizing

๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ํ†ตํ•ด padding์ด ์ถ”๊ฐ€๋˜์–ด๋„ contentํฌ๊ธฐ๋Š” ๋ณ€ํ•˜์ง€ ์•Š์€ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Leave a comment