[ CSS ] box-sizing 이란?

css에서, border를 사용하면 기본적으로 inner가 아닌 outer로 설정이 되어 있기 때문에

border의 px 사이즈가 커지면 커질수록 찌그러지는 현상이 나타나는데, 이걸 inner로 변경할 수 있는 방법이 있다.

 

그게 바로 box-sizing 속성이다.

 

.클래스 {
	box-sizing: border-box;
}

 

[ box-sizing 미적용시 이미지 ]

 

 

[ box-sizing 적용시 이미지 ]

 

 

저 이미지는 width와 height가 300px로 된 원이다. box-sizing을 하지 않게 되면, outer로 설정이 되어 있어서

300px보다 더 큰 원이 생성된다.

하지만, box-sizing을 border-box로 하게 된다면, inner로 그려져서, 원의 크기가 변하지 않고 border가 그려지게 된다.

 

box-sizing 속성에 값은 content-box도 있다.

 

궁금하다면 밑에 링크를 클릭하면 자세히 볼 수 있다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN