박스 사이즈를 결정하는 box-sizing : content-box | border-box;

오늘은 박스 사이즈를 결정하는 box-sizing 태그에 대해서 알아보려고 한다. 모르고 있어도 치명적인 문제는 발생하지 않지만, 알고 있다면 분명 꿀팁이 될 것이다.

 

 

문제 인식

아래와 같이 Hello world! 라고 적혀있는 div 박스 하나를 만들었다.

 

 

그리고 해당 박스의 사이즈를 가로 200px, 세로 100px로 설정하고 3px 두께의 테두리와 20px 내부 여백도 주었다.

 

 

그리고 나서 결과를 확인해보면, 보여지는 박스의 사이즈가 내부 여백(padding), 테두리(border) 사이즈까지 더해져서 초기에 설정해준 것보다 커져 있다.

- 가로값 : width 200px + (padding 20 * 2) + (border 3 * 2) = 200 + 40 + 6 = 총 246px

- 세로값 : height 100px + (padding 20 * 2) + (border 3 * 2) = 100 + 40 + 6 = 총 146px

 

 

이것은 css로 지정한 너비(width)와 높이(height) 요소는 콘텐츠 사이즈에만 적용이 되기 때문이다. 해당 요소에 내부 여백(padding)이나 테두리(border)가 있으면 콘텐츠 사이즈에 더해져서 결과가 보여지게 된다. 

최종적으로 보여지게 하고 싶은 사이즈가 가로 200px, 세로 100px 이라면 어떻게 해야할까? 내부 여백과 테두리를 미리 계산해서 빼주는 방법도 있지만 box-sizing 이라는 태그를 사용하면 훨씬 더 편하게 처리할 수 있다.

 

박스 크기를 결정하는 box-sizing

box-sizing은 css에서 박스 크기를 결정하는 방법을 지정해주는 태그이다. 해당 태그값으로는 contents-box(기본값)와 border-box를 사용할 수 있는데, content-box는 width와 height 속성이 콘텐츠 영역만 표시하고 내부 여백, 테두리 값은 추가로 더해진다. border-box는 width와 height 속성이 내부 여백, 테두리 값을 모두 포함하는 것으로 계산된다. 단, 외부 여백(margin)은 포함하지 않는다는 것도 기억하도록 하자.

 

예제로 확인하면 좀 더 쉬울 것 같아서 아래와 같이 비교해 보았다. 두개의 박스를 만들고 box1 클래스에는 box-sizing: content-box; 속성을 주었다. 그리고 box2 클래스에는 box-sizing: border-box; 속성을 주었다. 

 

 

box1과는 달리 box2는 내부 여백과 테두리가 모두 width, height에 포함되어 계산된 것을 확인할 수 있다. 

 

(추가팁) 모든 요소에 box-sizing: border-box; 적용

마크업을 할 때 너비와 높이를 일일이 계산하는 것이 번거롭기 때문에 보통 대부분의 경우에 box-sizing: border-box;를 지정해서 사용하게 된다. 그렇다면 일일이 box-sizing을 지정할 필요 없이, 시작부터 모든 요소에 해당 태그를 적용할 수는 없을까? 당연히(!) 방법이 있다. 아래와 같이 *을 사용한 태그를 써주면 모든 요소에 자동적으로 css 속성이 적용된다.

 

* {
  box-sizing: border-box;
}

 

앞으로 마크업, 퍼블리싱을 시작하기 전에 위 태그를 적용하여 코드 짜는 시간을 단축하도록 하자!