[CSS] box-sizing 설정 알아보기

box-sizing

css 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

 

보통 border를 설정하게 되면, 기존에 요소의 너비와 높이에 border의 두께를 더해서 요소가 화면에 보여집니다. 이 기본 설정이 box-sizing: content-box입니다.

 

요소에 border를 주더라도, 요소의 크기가 border에 영향을 받지 않게 하려면, box-sizing: border-box를 주면 됩니다.

 

box-sizing: content-box

box-sizing: content-box;는 border 바깥 쪽으로 'border'의 크기가 커집니다. 마치 margin을 준 것처럼요.

.child_container {
  box-sizing: content-box;
  width: 100px;
  border: 10px solid #5b6dcd; 
}

child container는 기본 100px크기에 추가로 border의 크기 20px이 추가되었습니다.

 

box-sizing: border-box;

box-sizing: border-box;는 요소 border 안 쪽으로 'border'의 크기가 커집니다. 마치 padding을 준 것처럼요. 

div {
  box-sizing: border-box;
  width: 100%;
  border: 10px solid #5b6dcd; 
}

box-sizing: border-box 옵션 때문에, child container는 설정한 너비 100px를 유지한 채로, border의 크기를 child container border 내부의 영역으로 커져서 border가 그려졌습니다.

 

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