블로그

같은 상품 카드가 그리드에서는 근사하게 보이지만, 미디어 쿼리를 정성껏 짜놓았음에도 좁은 사이드바에서는 무너집니다. 문제는 코드에 있는 게 아니라 미디어 쿼리가 던지는 질문 자체에 있습니다 – 화면의 너비를 묻는 것이지, 컴포넌트가 실제로 받은 공간을 묻는 게 아니라는 것이죠. 컨테이너 쿼리가 이 질문을 원래 있어야 할 자리로 옮기는 방법과, 요소가 '쿼리 컨테이너'가 될 때 내부에서 실제로 무슨 일이 벌어지는지 살펴봅니다.

CSS Houdini는 하나의 기술이 아니라, 성숙도가 저마다 크게 다른 여러 명세의 모음입니다. 오늘날 실제 프로덕션에 사용할 수 있는 부분은 어디인지, @property와 paint worklet이 실제로 어떻게 작동하는지, 그리고 나머지가 왜 아직 실험 단계에 머물러 있는지 확인해 보세요.