34장. Container Query를 Component 계약으로 쓴다

viewport가 넓어도 sidebar 안 card는 좁을 수 있다. component가 놓인 container의 inline-size를 기준으로 layout을 바꾼다. container-type: inline-size가 새 formatting·size containment에 주는 영향을 확인하고 이름 있는 container로 의도하지 않은 조상을 피한다.

StudioBoard card를 320, 480, 720px container에서 test하고 제목 길이·버튼 수·이미지 없음·200% zoom을 섞는다. breakpoint는 특정 기기명이 아니라 내용이 깨지는 지점에서 정한다. 미지원 또는 print 경로의 readable fallback을 기본 CSS로 먼저 만든다.