화면 전체가 아니라 컴포넌트가 놓인 공간을 기준으로 스타일을 바꿉니다.
container-type:inline-size를 지정하면 자식이 @container로 가장 가까운 query container의 인라인 크기를 검사할 수 있습니다. 같은 카드가 넓은 본문과 좁은 사이드바에 재사용될 때 viewport media query보다 컴포넌트 중심으로 설계하기 좋습니다.
이번 예제의 출발점은 container-type:inline-size; @container (min-width:420px) { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 course-shell의 폭을 줄이고 기준값을 320px로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
query를 사용하려면 조상에 container-type이 필요합니다. 자기 자신의 크기를 같은 요소의 container query로 검사할 수는 없습니다.
직접 바꿔보세요course-shell의 폭을 줄이고 기준값을 320px로 바꾸세요.