๐Ÿค” ๋ฐ•์Šค ๋ชจ๋ธ

๋ฐ•์ƒ์€ยท2021๋…„ 10์›” 8์ผ
0

๐Ÿช„ CSS ๐Ÿช„

๋ชฉ๋ก ๋ณด๊ธฐ
2/6
post-thumbnail

๐Ÿค” ๋ฐ•์Šค ๋ชจ๋ธ

๋ฐ•์Šค ๋ชจ๋ธ์ด๋ž€ ๋ฌธ์„œ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ฒฐ์ •ํ•  ๋•Œ ๊ธฐ์ค€์ด ๋˜๋Š” ๋ชจ๋ธ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์ปจํ…์ธ ์˜ ํฌ๊ธฐ๋ฅผ ์ •ํ•˜๋Š” ์†์„ฑ์€ margin, border, padding, width, height๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฐ•์Šค ๋ชจ๋ธ์— ๋”ฐ๋ผ์„œ ์ด ์†์„ฑ๋“ค๊ณผ ๋ ˆ์ด์•„์›ƒ์ด ์–ด์šฐ๋Ÿฌ์ ธ์„œ width์˜ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค.

1. content-box

box-sizing: content-box;๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง€์ •๋œ ๊ฐ’์ด๊ณ  width์˜ ํฌ๊ธฐ๋ฅผ width๋งŒ์œผ๋กœ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

2. border-box

box-sizing: border-box;๋Š” border, padding, width๋ฅผ ํ•ฉ์ณ์„œ width์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

์œ„์— ๋ง์„ ๋‹จ์ˆœ ํ…์ŠคํŠธ๋กœ๋งŒ ๋ณด๋ฉด ์ดํ•ดํ•˜๊ธฐ ํž˜๋“ค์–ด ์˜ˆ์‹œ๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

  • html
<body>
  <div class="box border__box"></div>
</body>
  • css
.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๋ฅผ 100px
  • border์€ 10px์ธ๋ฐ ์ขŒ์šฐํ•ฉ์ณ์„œ 20px
  • padding์€ 20px์ธ๋ฐ ์ขŒ์šฐํ•ฉ์ณ์„œ 40px

๊ฐ€ ์ ์šฉ๋˜์–ด 160px์ด ๋ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ border__box๋ฅผ ์ ์šฉํ•˜๋ฉด

  • border์€ 10px์ธ๋ฐ ์ขŒ์šฐํ•ฉ์ณ์„œ 20px
  • padding์€ 20px์ธ๋ฐ ์ขŒ์šฐํ•ฉ์ณ์„œ 40px
  • width๋Š” ๋‚จ์€ ํฌ๊ธฐ๋งŒํผ ์ฐจ์ง€ ( (20px + 40px) - 100px )

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