CSS: box-sizing 속성

발생일: 2015.01.16

키워드: box-sizing

내용:


엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다.

`box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며,
`content-box`가 기본값이다.


box-sizing: content-box
     CSS 표준에 정의되어 있는 기본값이다.
     width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다.

box-sizing: padding-box
     width 와 height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다.

box-sizing: border-box
     width 와 height 속성이 padding, border 를 포함한다. margin 은 포함하지 않는다.
     이 값은 IE Quirks mode 의 구현과 동일하다.


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


브라우저 호환성
     - 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 에서만 제공한다.


결론
     적용하려는 브라우저가 `box-sizing`을 완벽하게 지원할 때에만 적용하는 게 좋겠다.
     그렇지 않으면, 기존 CSS Box Model을 사용하는 게 안전하겠다.

카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)