CSS : box-sizing 속성
요즘 만들어진 웹페이지를 돌아다니며 요소검사를 해보면 아래 코드를 어렵지 않게 찾을 수 있을 것이다.
*, *:before, *:after { box-sizing: border-box; } | cs |
정의
box-sizing 속성은 적용되는 요소에 대해 box model이 처리되는 방법을 제어한다. 즉 요소의 너비와 높이를 계산하는 방법을 정의한다.
한 단계 더 풀어쓰면 width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다.
Width & Height
일반적으로 요소의 Width와 Height를 계산하려면 아래와 같은 과정을 거친다.
| Width | width + padding-left + padding-right + border-left + border-right |
| Height | height + padding-top + padding-bottom + border-top + border-bottom |
이 방법에 무슨 문제가 있느냐 하면,
width: 100px; 을 선언하고 작업을 하다가 padding:10px; 을 추가하면 실제 너비가 120px이 된다. 여러 요소가 얽혀 있다면 깨진 레이아웃을 보며 하나씩 너비를 수정해나가야 할 것이다. 직관적이지도 않고 요소마다 값을 계산하기도 힘들다.
Value
box-sizing 속성엔 아래 두 가지 값이 쓰인다.
- content-box : 디폴트값으로 위의 너비,높이 공식이 적용된다.
- border-box : 너비와 높이 속성이 padding과 border를 포함한다.
content-box(위) 와 border-box(아래) 의 비교. 출처 css-tricks.com
box-sizing: border-box;
따라서 모든 요소에 box-sizing: border-box;를 선언해놓으면
우리가 선언한 width값에 padding을 주더라도 자동으로 실제 컨텐츠 부분의 width가 줄어들면서 padding이 안쪽으로 파고들게 되어 실제 웹에서 보여지는 width값이 우리가 선언한 값 그대로 유지된다.
아래 예를 보자. 두 개의 <div> 모두 width: 300px;을 갖고 있지만
실제로 검사해보면 .content-box는 360px, .border-box는 300px 크기로 보여지고 있음을 확인할 수 있다.
사실 패딩과 테두리라는 단어 본래 뜻도 그렇고, 요소검사를 할 때 나오는 이 그림을 생각해본다면
직관적으로 이해하기에 좋고 계산하기 편리한 방법이 border-box임을 부정할 수 없고 그것이 * 선택자가 퍼포먼스에 악영향을 끼친다는 말이 있음에도 아래 코드를 흔하게 볼 수 있는 까닭이 아닐까 한다.
(부트스트랩에도 적용되어 있다.)
*, *:before, *:after { box-sizing: border-box; } | cs |
Browser Support
지원 버전 / vendor prefix 필요버전.
- Chrome : 10.0 / 4.0 -webkit-
- IE : 8.0
- Firefox : 29.0 / 2.0 -moz-
- Safari : 5.1 / 3.2 -webkit-
- Opera : 9.5
