7장. Box Model과 크기

content box에 padding과 border가 더해진다. 전역 box-sizing:border-box를 적용하되 pseudo-element도 포함한다. width 100% element에 padding을 더했는데 넘치는 고전 문제를 재현한다.

block의 width:auto는 남은 공간을 채우지만 width:100%와 같지 않다. min-width:auto 때문에 flex/grid item 내부 긴 문자열이 overflow할 수 있다. 이때 무조건 overflow:hidden을 넣기 전에 min-inline-size:0, 줄바꿈 정책, 실제 콘텐츠를 확인한다.

aspect-ratio, min(), max(), clamp()로 고정 breakpoint 사이를 부드럽게 연결한다. 이미지에는 HTML width/height 또는 aspect-ratio로 자리 크기를 예약해 CLS를 줄인다.