[CSS] box-sizing 속성

[개요]

CSS에서 width와 height를 계산하는 방법은 꽤 독특합니다. width:200px 이고 height:100px, padding:20px, border:5px solid black 인 요소는 화면상에 어떻게 나타날까요? 아래 사진 중에 왼쪽처럼 계산 될까요? 아니면 오른쪽처럼 계산될까요?

[content-box]

결론부터 이야기하자면 기본적으로 오른쪽처럼 그려지게 됩니다. width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 됩니다.

 

이는 계산 방법을 content-box라고 하며, box-sizing 속성을 content-box로 주게 되면 이와 같이 계산하게 됩니다. 기본적으로 CSS에서 위처럼 요소를 렌더링하는 이유는 box-sizing 속성의 기본 값이 content-box이기 때문입니다.

 

[HTML 예시]

[결과]

[border-box]

위 예시처럼 왼족처럼 요소를 렌더링하고 싶다면 box-sizing 속성을 border-box로 주면됩니다. 단 이 값은 IE8 이상에서만 사용할 수 있습니다.

 

[HTML 예시]

[결과]

[content-box에서 width:100%d일 때의 문제]

CSS에서 width 속성을 100%로 주면 부모의 width만큼 너비가 설정됩니다. 하지만 content-box일 때 width:100%에 이어 padding이나 border를 주게 될 경우 부모의 영역을 초과해서 너비가 정해지는 문제가 생길 수 있습니다.

 

이런 문제를 해결하기 위해서는 box-sizing을 border로 설정하거나 width를 auto로 설정하여 해결할 수 있습니다. width의 기본 값은 auto 이므로 width를 아예 적어주지 않아도 정상적으로 동작합니다.

 

[HTML 예시]

[결과]