티스토리 뷰

box-sizing에 대해 알아보자

box-sizing



box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 데에 사용되는 기본적인 CSS box model 대체하기 위해 사용됩니다.

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면  테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다. 



content-box
이 값은 CSS 표준에 의해 정의된 기본 스타일이다. width와 height 속성은 오로지 콘텐츠만을 포함하여 측정되며, padding, border, margin을 포함하지 않는다.
참고: padding, border, margin은 박스 외부에 존재한다. 이를테면, .box {width: 350px}; 인 요소에 {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 370px;}이다.
padding-box
width  height 속성은 padding 크기를 포함한다. 하지만 border 및 margin을 포함하지 않는다.
border-box
width  height 속성이 padding 및 border를 포함하며, margin을 포함하지 않는다. 이 box model 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.
참고: padding 과  border는 박스 안에 존재한다. 이를테면 .box {width: 350px}; 인  요소에  {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 350px;}이다.

예제EDIT

/* Firefox, WebKit, Opera 및 IE8+ 에서 지원됨 */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}


Recent Comments