10. Box-sizing

1. Box-sizing

box-sizing에 대해서 알아봅시다.

 

css 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용이 됩니다.

width + padding + border = 요소의 실제 너비
height + padding + border = 요소의 실제 높이

즉, 요소의 너비 / 높이를 설정할 때 요소가 설정 한 것보다 더 크게 나타나는 경우가 많습니다

(요소의 테두리와 패딩이 요소의 지정된 너비 / 높이에 추가되기 때문).

 

 

따라서 크기를 설정할 때, 원하는 크기를 얻으러면 테두리나 안쪽 여백을 고려해야 합니다.

 

예를 한번 들어 볼까요?

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

위 그림과 같이 가로 세로 높이는 같지만 padding의 크기로 인해 박스의 크기가 달라집니다.

 

이것을 box-sizing 속성으로 해결이 가능합니다.

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

box-sizing 속성은 우리가 요소의 전체 폭과 높이의 패딩과 국경을 포함 할 수 있습니다.

 

box-sizing: border-box; 요소에 설정하면 패딩과 테두리가 너비와 높이에 포함됩니다.

 

box-sizing: border-box;훨씬 더 좋기 때문에 많은 개발자는 페이지의 모든 요소가 이러한 방식으로 작동하기를 원합니다.

 

이 방법을 모든 요소에 적용하는 방법이 있습니다.

* {
  box-sizing: border-box;
}

위와 같이하면 모든 요소에 적용이 됩니다.