box-sizing 이해하기

 

우리는 마크업을 하면서 가장 먼저 CSS의 박스 모델(Box Model) 개념을 배우게 됩니다. 이 개념을 바탕으로 다양한 GUI를 구현하게 되는데요.

기본적으로 박스 모델에서 요소에 할당 한 width 및 height 값은 사용자가 지정한 요소의 콘텐츠 상자에만 적용됩니다. 요소에 테두리(border) 또는 패딩(padding)이 있는 경우에는 width 및 height에 해당 값이 추가되어 자신이 지정한 값보다 더 큰 값이 화면에 렌더링 되는 결과를 얻게 됩니다.

 

하지만 우리는 box-sizing속성을 활용하면 테두리(border) 또는 패딩(padding) 요소가 추가되더라도 처음에 사용자가 의도한 값을 얻을 수 있습니다. (와우!)

 

그럼 지금부터 조금 더 심도 있게 box-sizing에 대해 알아볼게요.

CSS box model을 수정하기 위한 box-sizing의 값으로는, [content-box], [padding-box], [border-box]가 있으며, [content-box]가 기본 속성 값을 가지고 있습니다. 

 

1. box-sizing: content-box

CSS 표준에 정의되어 있는 기본값으로 width와 height 속성 값은 콘텐츠에만 포함하며, padding, border, margin 은 포함하지 않습니다.

 

2. box-sizing: padding-box

width와 height 속성 값에 padding을 포함합니다. border, margin 은 포함하지 않습니다.

 

3. box-sizing: border-box

width와 height 속성 값에 padding, border를 포함합니다. margin 은 포함하지 않습니다.

 

4. 주의

• box-sizing 속성은 스타일 상속이 되지 않습니다.
• IE, Firefox 23 이전, Chrome 에선 `window.getComputedStyle()`이 올바르게 적용되지 않습니다.
• IE9에서 `currentStyle` 속성에서 height가 올바른 값이 리턴되지 않습니다.

5. 브라우저 호환성

• box-sizing 속성은 IE8 이상, Chorme 10~, Firefox 29~ 에서 제공합니다.
• Chrome 10 미만 버전과, Firefox 29 미만 버전에서는 각각 -webkit과 -moz prefix를 사용해야 합니다.
• 모바일에선 Safari 모든 버전, Android 2.1~ (-webkit prefix), Android 4.0에서 지원합니다.
• [padding-box] 속성은 Firefox에서만 제공합니다.

Demo : 

 

 

 

참고 : developer.mozilla.org/en-US/docs/Web/CSS/box-sizing