CSS : box-sizing

daymoon_ยท2022๋…„ 4์›” 8์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
16/18
post-thumbnail

๐ŸŽจ box-sizing

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
MDN box-sizing
CODINGFACTORY box-sizing
์ƒํ™œ์ฝ”๋”ฉ box-sizing
caniuse CSS3 Box-sizing
ofcourse box-sizing ์†์„ฑ
dasima CSS box-sizing? content-box vs border-box ์ฐจ์ด์  ์ •๋ฆฌ

box-sizing์€ ๋ฐ•์Šค์˜ ํฌ๊ธฐ๋ฅผ ์–ด๋–ค ๊ฒƒ์„ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐํ• ์ง€ ์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

โœจ ํŠน์ง•

  • ๊ธฐ๋ณธ๊ฐ’ : content-box
  • ์ƒ์† : X
  • ์• ๋‹ˆ๋ฉ”์ด์…˜ : X
  • ๋ฒ„์ „ : CSS Level 3

โš™๏ธ ๋ฌธ๋ฒ•

/* ???์•ˆ์— ์†์„ฑ์„ ์ ์œผ๋ฉด ๋œ๋‹ค. */
box-sizing : ??? 
  • content-box : ์ฝ˜ํ…ํŠธ ์˜์—ญ์„ ๊ธฐ์ค€์œผ๋กœ ํฌ๊ธฐ๋ฅผ ์ •ํ•œ๋‹ค. โ–ถ ์š”์†Œ์˜ ํฌ๊ธฐ๋Š” ๋„ˆ๋น„ = ์ฝ˜ํ…์ธ  ๋„ˆ๋น„, ๋†’์ด = ์ฝ˜ํ…์ธ  ๋†’์ด (ํ…Œ๋‘๋ฆฌ์™€ ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์ œ์™ธ)
  • border-box : ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํฌ๊ธฐ๋ฅผ ์ •ํ•œ๋‹ค. โ–ถ ์š”์†Œ์˜ ํฌ๊ธฐ๋Š” ๋„ˆ๋น„ = ํ…Œ๋‘๋ฆฌ + ์•ˆ์ชฝ ์—ฌ๋ฐฑ + ์ฝ˜ํ…์ธ  ๋†’์ด
  • initial : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.
  • inherit : ๋ถ€๋ชจ ์š”์†Œ์˜ ์†์„ฑ๊ฐ’์„ ์ƒ์†๋ฐ›๋Š”๋‹ค.

๐Ÿ–ฅ๏ธ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ


โœ… ์ •๋ฆฌ

  • content-box : ์‚ฌ์šฉ์ž๊ฐ€ ์ง€์ •ํ•œ ๋„ˆ๋น„๋ฅผ ์ปจํ…์ธ  ์˜์—ญ์—๋งŒ ์ ์šฉํ•œ๋‹ค. โ–ถ padding, margin, border๋Š” ๋”ฐ๋กœ ๊ณ„์‚ฐ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ „์ฒด ์˜์—ญ์ด ์ปค์งˆ ์ˆ˜ ์žˆ๋‹ค.
  • border-box : ์‚ฌ์šฉ์ž๊ฐ€ ์ง€์ •ํ•œ ๋„ˆ๋น„๋ฅผ ์ „์ฒด ์˜์—ญ์— ์ ์šฉํ•œ๋‹ค. โ–ถ padding, margin, padding์„ ๋ชจ๋‘ ํ•ฉํ•ด์„œ ์„ค์ •๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ปจํ…์ธ  ์˜์—ญ๋ณด๋‹ค ์ž‘์•„์งˆ ์ˆ˜ ์žˆ๋‹ค.
profile
๋ฏธ์ง€์˜ ๊ณต๊ฐ„๐ŸŒ™

0๊ฐœ์˜ ๋Œ“๊ธ€