CSS 05 박스 모델 box-sizing 기본

박스크기를 계산하는 방법 box-sizing

박스 영역에 콘텐츠 영역이 있다.

[ 여기에는 너비와 높이가 있다]

box-sizing 😀 속성은 요소의 너비width와 높이 height 를 계산하는 방법을 지정한다.( 이걸 사용하면 콘텐츠 영역이 줄어든다)

속성값

content-box : 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다. (콘텐츠 영역이 요소가 커진다)

[패딩 - 테두리가 덩달아 커진다면 박스 사이즈 사용해야한다]

---

정리

1. 박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정된다. width100 height 100
2. box-sizing 속성은 너비와 높이가 포함할 영역을 변경함 으로써 너비와 높이의 계산 방법을 결정 할 수 있다.
3. box-sizing의 기본값은 content-box이다.
4. box-sizing 을 border-box로 지정하면 테두리까지 너비와 높이에 포함된다.
5. border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.

즉 너비와 높이가 같더라고, box-sizing 속성값에 따라 크기가 달라 질수 있다.