CSS box-sizing과 초기 설정(border-box)

 

border-box로 설정하는 것이 일반적으로 css로 스타일링을 하는데 있어서 관행으로 여겨진다. 다만 매우 널리 적용되는 방식인데도 불구하고 표준 resetter라고 볼 수 있는 Nomarlize.css에는 이 부분이 포함되지 않은 것을 확인되는데, 이는 말 그대로 최소한의 항목에 대해서는 속성을 resetting하려는 제작자의 의도인 것으로 보인다. box-sizing 속성을 이해하기 위해서는 기본 CSS Box Model에 대한 이해가 필요하다. border-box로 box-sizing을 설정하는 과정은 box model의 padding, margin, border를 개체 안에서 할당하는 과정이라고 볼 수 있다. 기존 개체의 크기가 변화하지 않는 것이 특징이다.

 

The Beginner's Guide to CSS Box Model

 

모든 개체들에 대해 box-sizing 적용을 위해서는 다음과 같은 코드가 일반적으로 사용된다. html에 값을 넣고 상속받는 방법이 있고, 전역 선택자로 바로 선택하여 제공하는 방법이 있다.

 

/* 첫번째 방법 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 두번째 방법 */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

 

위 방법은 굉장히 많이 사용되는 방법이고, W3C에서도 권장하는 방식으로 통한다. 하지만 소스를 극도로 최적화하는 차원에서 전역 선택자(*)를 사용하는 것은 지양되는 관행이므로, 선택적으로 필요한 경우에만 box-sizing을 적용하는 방법도 가능하다. 이 외에도 다른 UI라이브러리와의 호환성 차원에서도 위와 같은 방식을 지양하는 것이 좋은 습관일 수 있다. Nomarlize.css에 포함이 안 되는 데에도 이와 같은 이유가 작용한 것으로 보인다. 다만 앞서 밝힌 대로 W3C에서도 전역 선택을 통한 box-sizing 설정을 권장하는 실정이고 부트스트랩4의 경우에는 코드를 사용하고 있으므로 이 부분 역시 참고하기 바란다.

참고자료

Paul Irish

CSS Box Sizing

Reboot