box-sizing 속성

box-sizing은 요소의 크기를 어떻게 계산할지 결정하는 역할을 한다.

box-sizing의 두 가지 값

box-sizing 속성에는 크게 두 가지 값이 있다.

1. content-box (기본값):
   • 요소의 내용 영역(content)을 기준으로 너비와 높이를 계산한다.
   • padding, border는 내용 영역 외부에 추가되어 요소의 전체 크기를 증가시킨다.
   • 예시: 이 경우, .box 요소의 실제 너비는 100px (내용 영역) + 20px (왼쪽 패딩) + 20px (오른쪽 패딩) + 10px (왼쪽 테두리) + 10px (오른쪽 테두리) = 160px.
   • CSS

      

     .box {
       width: 100px; /* 내용 영역의 너비 */
       padding: 20px; /* 패딩 */
       border: 10px solid black; /* 테두리 */
       box-sizing: content-box;
     }
     

2. border-box:
   • border를 포함한 요소의 전체 크기를 기준으로 너비와 높이를 계산한다.
   • padding, border는 내용 영역 내부에 포함되어 요소의 전체 크기를 유지한다.
   • 예시:
     CSS

      

     .box {
       width: 100px; /* 테두리, 패딩을 포함한 전체 너비 */
       padding: 20px; /* 패딩 */
       border: 10px solid black; /* 테두리 */
       box-sizing: border-box;
     }
     

     이 경우, .box 요소의 실제 너비는 100px로 유지됩니다. padding과 border는 내용 영역 내부에서 공간을 차지하며, 내용 영역의 너비는 자동으로 조절된다.

box-sizing 사용 시 장점

• 직관적인 크기 계산: border-box를 사용하면 요소의 너비와 높이를 padding, border를 포함한 전체 크기로 설정하므로, 크기 계산이 더 직관적이고 편리하다.
• 예측 가능한 레이아웃: border-box를 사용하면 요소의 크기가 padding, border에 의해 늘어나는 것을 방지하여 레이아웃이 깨지는 것을 방지할 수 있다.

box-sizing 활용 팁

• 대부분의 경우 box-sizing: border-box;를 사용하는 것이 일반적이다.
• box-sizing 속성은 상속된다. 즉, 부모 요소에 box-sizing 속성을 설정하면 자식 요소에도 상속된다.