๋ฐ์ค ๋ชจ๋ธ์ด๋ ๋ฌธ์์ ๋ ์ด์์์ ๊ฒฐ์ ํ ๋ ๊ธฐ์ค์ด ๋๋ ๋ชจ๋ธ์ ์๋ฏธํฉ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ์ปจํ
์ธ ์ ํฌ๊ธฐ๋ฅผ ์ ํ๋ ์์ฑ์ margin
, border
, padding
, width
, height
๊ฐ ์์ต๋๋ค.
๋ฐ์ค ๋ชจ๋ธ์ ๋ฐ๋ผ์ ์ด ์์ฑ๋ค๊ณผ ๋ ์ด์์์ด ์ด์ฐ๋ฌ์ ธ์ width
์ ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
box-sizing: content-box;
๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ ๋ ๊ฐ์ด๊ณ width
์ ํฌ๊ธฐ๋ฅผ width
๋ง์ผ๋ก ํฌ๊ธฐ๋ฅผ ์ง์ ํฉ๋๋ค.
box-sizing: border-box;
๋ border
, padding
, width
๋ฅผ ํฉ์ณ์ width
์ ํฌ๊ธฐ๋ฅผ ์ง์ ํฉ๋๋ค.
์์ ๋ง์ ๋จ์ ํ ์คํธ๋ก๋ง ๋ณด๋ฉด ์ดํดํ๊ธฐ ํ๋ค์ด ์์๋ฅผ ๋ณด์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค.
<body>
<div class="box border__box"></div>
</body>
.box {
display: inline-block;
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid black;
margin: 20px;
background-color: blue;
}
.border__box {
box-sizing: border-box;
}
์ ์์์์ border__box
๋ฅผ ์ ๊ฑฐํ๋ฉด width
์ height
๊ฐ์ด 160px์ด ๋์ด๋ฒ๋ฆฝ๋๋ค.
๊ทธ ์ด์ ๋ ๊ธฐ๋ณธ๊ฐ์ด box-sizing: content-box;
์ด๋ผ์
width
๋ฅผ 100pxborder
์ 10px์ธ๋ฐ ์ข์ฐํฉ์ณ์ 20pxpadding
์ 20px์ธ๋ฐ ์ข์ฐํฉ์ณ์ 40px๊ฐ ์ ์ฉ๋์ด 160px์ด ๋ฉ๋๋ค.
ํ์ง๋ง border__box
๋ฅผ ์ ์ฉํ๋ฉด
border
์ 10px์ธ๋ฐ ์ข์ฐํฉ์ณ์ 20pxpadding
์ 20px์ธ๋ฐ ์ข์ฐํฉ์ณ์ 40pxwidth
๋ ๋จ์ ํฌ๊ธฐ๋งํผ ์ฐจ์ง ( (20px + 40px) - 100px )