[지식루프의 웹개발공부] CSS의 box-sizing

CSS에서 box-sizing은 요소의 크기를 계산하는 방식을 정의하는 속성입니다. 이 속성을 통해, 요소의 width와 height가 포함하는 영역이 달라지며, 레이아웃을 더 직관적으로 제어할 수 있습니다. box-sizing에는 주로 두 가지 값이 사용됩니다:

1. content-box (기본값)

• 요소의 width와 height가 내용 영역(content area)의 크기를 의미합니다. 즉, padding, border는 이 값에 포함되지 않고, 요소의 최종 크기에 추가됩니다.
• 예를 들어, width: 200px인 요소에 padding: 20px과 border: 10px을 추가하면 최종 요소의 크기는 다음과 같습니다:
  • 가로 크기: 200px (content) + 20px (left padding) + 20px (right padding) + 10px (left border) + 10px (right border) = 260px

 

2. border-box

• 요소의 width와 height가 border와 padding을 포함한 전체 크기를 의미합니다. 즉, border와 padding이 요소의 크기에 포함되므로, width와 height 값이 요소의 전체 크기와 동일하게 작동합니다.
• 예를 들어, width: 200px인 요소에 padding: 20px과 border: 10px이 있으면 최종 크기는 여전히 200px이 됩니다. padding과 border가 이 값에 포함되기 때문입니다.

 

 

위의 경우 요소의 실제 내용 영역은 width: 200px - 20px (padding) - 10px (border)로 계산되기 때문에, 내용이 차지하는 공간은 더 적어집니다.

box-sizing의 주요 장점:

• 레이아웃을 직관적으로 관리: border-box를 사용하면 padding과 border가 width와 height 안에 포함되므로, 요소의 크기를 조정하는 데 더 예측 가능하고 직관적으로 동작합니다.
• 레이아웃 안정성: 요소의 크기가 일관되게 유지되기 때문에 레이아웃이 복잡해지거나 반응형 디자인을 할 때도 크기 계산이 더 쉬워집니다.

모든 요소에 border-box 적용하기 (일반적인 방식):

레이아웃에서 예측 가능한 크기를 유지하기 위해 모든 요소에 box-sizing: border-box;을 적용하는 것이 일반적입니다. 이는 전체 페이지에서 일관된 크기 계산 방식을 사용하게 합니다.

box-sizing 속성은 특히 padding과 border를 사용하는 경우에 유용하며, 복잡한 레이아웃을 만들 때 요소의 크기를 더 쉽게 조정할 수 있습니다.