Box-sizing이란?
박스의 크기를 화면에 표시하는 방식을 변경하는 속성
기본적으로 HTML 요소의 크기는 해당 요소의 콘텐츠 영역의 크기로 계산된다.
즉, 콘텐츠 영역의 크기에 패딩과 테두리가 더해져서 최종적인 요소의 크기가 된다.
1. box-sizing: content-box;
- 디폴트값
- box-sizing: content-box;에 border나 padding을 추가하면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 더 커지게 된다.
- 예를 들어, width: 50px; 와 height: 50px;룰 주면, 거기에 border 값이나 padding 값이 더해져서 width값은 50px이 아닌 50px + (border값 혹은 padding값) 이상이 될 것이다.
2. box-sizing: border-box;
- 콘텐츠 영역뿐만 아니라 패딩과 테두리도 해당 요소의 크기에 포함된다.
- 요소의 크기를 지정할 때 패딩과 테두리를 고려하지 않아도 되어서 레이아웃을 보다 편리하게 구성할 수 있다.
- border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. 즉, border값이나 padding 은는 지정한 width값이나 height값에 포함된다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
box-sizing:content-box;의 크기가 box-sizing:border-box;보다 큰 것을 확인할 수 있다.