이전 포스트에서 width나 height 속성은 요소의 크기 (content 크기) 를 지정하는 것이고,
최종 사이즈는 border, padding, 요소의 크기를 더해서 잘 계산해야겠다고 적었다. 그러나 border까지를 전체 크기로 지정할 수 있는 속성이 있었다. 바로 box-sizing이라는 속성이다.
box-sizing: content-box→ 기본값. width, height는 content 영역 크기를 의미하고 주변에 padding과 border가 추가로 둘러진다box-sizing: border-box로 두면 width, height는 총 너비, 총 높이를 의미하게 된다. border, padding, content 모두가 포함되는 사이즈인 것.
글로 쓰니까 알아보기 어렵지만 실제로 이미지를 보면 직관적이다
아래처럼 div 태그 셀렉터에 써두면 편하다고 한다.
div {
box-sizing: border-box;
}앞으로 더 편리하게 요소의 크기를 지정할 수 있을 것 같다.
참고
- https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
- 코딩애플 HTML/CSS 강의
