본문 바로가기
프로그래밍/HTML, CSS

CSS box-sizing 프로퍼티 사용법

by pentode 2018. 9. 30.

HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다.


이때 상자(Box)는  컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.)


Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요.


CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에서 사용할 수 있는 값은 content-box와 border-box 가 있습니다.


- content-box : box-sizing을 사용하지 않을때의 기본값입니다. 요소의 너비(width)는 컨텐츠 영역만을 나타냅니다.

- border-box : 요소의 너비(width)는 컨텐츠, 패딩, 보더를 합한 값이 됩니다.


Box Model box-sizing


box-sizing을 border-box 로 지정하게 되면 복잡한 전체 너비의 계산을 좀더 편하게 사용할 수 있습니다.


페이지내의 모든 요소에 box-sizing을 border-box 로 지정하고 싶으면 다음 스타일을 사용하면 됩니다.


* {

    box-sizing: border-box;

}


CSS의 box-sizing 프로퍼티는 IE8부터 사용할 수 있습니다.

반응형