box-sizing

[CSS] box-sizing 속성

box-sizing 속성은 요소의 width와 height를 계산하는 방법을 정할 수 있는 속성이다. div와 같은 박스 모델에서 width, height속성은 위의 그림에서 contents-box의 크기를 말한다. 하지만 화면에 그려질 때는 border, padding, contents-box가 크기가 다 더해져서 보여진다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 border나 padding을 고려해야하는데, 이를 일일이 고려하면서 그리기는 힘들다. box-sizing 속성을 사용해 이 방식을 바꾸는 것이 가능하다. content-box 기본적인 방법이다. div의 width를 100px로 설정하면 content-box의 width가 100px를 가지고, border크기가 1px이고, pad..