[CSS] box-sizing를 border-box로 설정하는 이유

CSS를 배우면서, 특히 유튜브의 다양한 강의를 보다 보면 많은 개발자들이 일관되게 box-sizing을 border-box로 설정하는 것을 볼 수 있습니다. 이러한 설정은 단순한 취향의 문제가 아닙니다. 그렇다면 왜 개발자들이 이 설정을 선호하는지, 그리고 이 설정이 어떤 이점을 제공하는지에 대해 알아보겠습니다.

box-sizing 속성이란?

box-sizing 속성은 CSS에서 요소의 너비와 높이를 계산하는 방식을 정의합니다. 기본적으로 두 가지 주요 값이 있습니다:

• content-box (기본값): 이 설정에서는 요소의 너비와 높이가 콘텐츠 박스를 기준으로 설정됩니다. 즉, 경계선(border)과 안쪽 여백(padding)은 이 값에 추가됩니다.
• border-box: 이 설정에서는 요소의 너비와 높이가 경계선을 포함한 전체 박스를 기준으로 설정됩니다. 경계선과 안쪽 여백이 이 값에 포함됩니다.

box-sizing을 border-box로 설정하는 이유

결론부터 말하자면, box-sizing을 border-box로 설정하면 HTML 요소의 크기를 더 직관적으로 관리할 수 있습니다.

이것이 무엇을 의미하는지 구체적인 예시를 통해 알아보겠습니다.

다음은 높이를 56px로 설정한 네비게이션 바의 예이다.

여기서 56px은 어디를 말하는 것일까요? 하얀색 부분(바깥 여백)? 연한 녹색 부분(테두리)? 아니면 진한 녹색(안쪽 여백 + 콘텐츠 박스)?

웹 개발 도구를 통해 상자 모델을 확인해보면, 콘텐츠 박스의 높이가 56px로 설정되어 있는 것을 볼 수 있습니다. 

이는 요소의 가장 안쪽 박스의 높이가 56px임을 의미합니다. 따라서 총 박스의 높이는 바깥 여백과 경계선을 더해 96px이 됩니다. 이는 직관적이지 않습니다. 보통 높이라고 하면 박스 경계선을 기준으로 생각하기 때문입니다.

border-box 설정의 이점

box-sizing: border-box;를 설정하면 요소의 높이와 너비가 경계선을 포함하여 계산됩니다. 즉, 설정한 높이나 너비가 요소의 전체 크기를 의미하게 됩니다.

* {
    box-sizing: border-box;
}

위 코드를 추가하면, 네비게이션 바의 전체 높이는 96px에서 56px로 줄어듭니다. 이는 설정한 높이 그대로 눈에 보이므로, 스타일을 더 쉽게 조정할 수 있습니다.

추가적인 이점

• 레이아웃의 일관성: border-box를 사용하면 레이아웃을 설계할 때 요소의 크기를 더 쉽게 계산할 수 있습니다. 특히 복잡한 레이아웃에서 유용합니다.
• 유지보수 용이: 요소의 크기를 조정할 때 경계선과 안쪽 여백을 따로 고려하지 않아도 되므로, CSS 코드를 더 직관적이고 유지보수하기 쉽게 만듭니다.
• 브라우저 호환성: 모든 주요 브라우저가 box-sizing: border-box;를 지원하므로, 호환성 문제를 걱정할 필요가 없습니다.

결론

box-sizing: border-box;를 사용하면 요소의 크기를 더 직관적으로 설정할 수 있습니다. 경계선과 안쪽 여백을 포함하여 요소의 전체 크기를 계산하므로, 복잡한 레이아웃에서도 쉽게 크기를 조절할 수 있습니다. 따라서 많은 개발자들이 기본 설정으로 box-sizing: border-box;를 사용하는 것입니다.

이를 통해 CSS 코드를 더 효율적이고 직관적으로 관리할 수 있으며, 유지보수 또한 용이해집니다. box-sizing: border-box; 설정이 왜 널리 사용되는지 이해하는 데 도움이 되었기를 바랍니다.