CSS 심화 공부(18) - 박스 사이징(box-sizing)

box-sizing이란?

요소의 크기를 계산하는 방식을 결정하는 방식이다.

즉, 요소의 width(너비)와 height(높이)를 어떤 기준으로 계산할지를 정하는 방식이다.

 

박스 사이징이라는 말처럼 요소의 콘텐츠 영역을 비롯해서 패딩(내부 여백)과 보더(테두리)를 기준으로 요소의 크기를 결정하게 된다.

단 마진(외부 여백)은 계산에 포함되지 않는다.

• 계산 포함 (O)
  • 콘텐츠 크기, 패딩, 테두리
• 계산 제외 (X)
  • 마진

box-sizing 속성

content-box (기본값)

• 요소의 width와 height 속성은 콘텐츠 영역의 크기를 나타낸다.
• padding과 border는 요소의 전체 크기에 추가된다.
• 예를 들어, width: 100px; padding: 20px; border: 10px;인 요소의 실제 너비는 160px(100 + 20 + 20 + 10 + 10)가 된다.

border-box

• 요소의 width와 height 속성은 padding과 border를 포함한 전체 크기를 나타낸다.
• 콘텐츠 영역의 크기는 padding과 border의 크기에 따라 자동으로 조정된다.
• 위의 예시에서 box-sizing: border-box;를 적용하면 요소의 실제 너비는 100px로 유지된다.

---

위의 두 속성은 피자 박스와 내용물의 크기를 정하는 것으로 비유할 수 있다.

content-box

먼저 피자 크기를 그 위에 박스(테두리와 패딩)를 추가하는 방식이다. (피자 크기 + 박스 테두리 + 패딩)

예를 들어, 가로 세로 100cm 크기의 피자를 주문했다면 거기에 박스 두께(패딩, 보더)가 추가해서 전체 크기를 재는 방식이다.

즉 100cm 짜리 피자!라고 하고 피자를 팔았는데 박스 테두리랑 + 안쪽 여백 + 내용물 크기를 모두 합친 크기여서 실제 박스의 크기가 100cm보다 크다는 것이다.

border-box

보더 박스는 전체 크기를 정해두면 그것에 맞춰서 내용물의 크기를 수정하는 방식이다.

예를 들어 박스의 크기가 100cm인 피자가 있을 때 박스의 크기를 50cm로 바꾸면 피자를 박스에 구겨 넣는게 아니라 피자의 크기까지 같이 줄여버리는 것이다.

100cm 피자 = 박스 테두리(10cm) + 패딩(10cm) + 피자 너비(80cm) = 100cm

50cm 피자 = 박스 테두리(5cm) + 패딩(5cm) + 피자 너비(40cm) = 40cm

 

때문에 content-box는 내용물의 최소 크기를 고정하고 싶을 때, border-box는 전체 요소의 최대 크기를 고정하고 싶을 때 사용할 수 있다.

 

물론 컨텐츠의 크기를 고정하면 반응형 웹에서 사용하기 불편하기 때문에 대부분은 border-box를 사용하는 것을 권장한다.