1. box-sizing
- box-sizing은 css 속성이다
- 속성 값으로는 content-box, border-box가 있다
- 기본값은 content-box이다.(<- 이것 때문에 문제가 발생함)
2. content-box, border-box 언제 사용?
- content-box는 컨텐츠 크기에 맞추고 싶을 때
- border-box는 박스 전체 크기에 맞추고 싶을 때
content-box의 width, height = content
만약 padding이나 border 값을 조정한다면?
--> 박스 크기가 바뀜
--> 컨텐츠 크기는 그대로
border-box의 width, height = content + border + padding
만약 padding이나 border 값을 조정한다면?
--> 박스 크기는 그대로
--> 컨텐츠 크기가 바뀜
*박스 모델 변경이 필요한 이유*
기본값인 content-box는 padding 값이나 border 값을 바꾸면 박스의 크기 바뀌게 되어 원하는 형태의 스타일링이 어려워지기 때문
그래서 보통은 편한 스타일링을 위해 border-box로 변경해서 많이 사용한다.
3. 예시
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.