Sofia Emelianova
CSS 컨테이너 쿼리는 웹 개발자들이 애용하는 새로운 CSS 기능입니다. 페이지 기반 반응형 디자인에서 컨테이너 기반 반응형 디자인에 이르기까지 웹 디자인에 혁신을 가져올 수 있습니다.
Chrome DevTools를 사용하면 새로운 레이아웃 디자인 패턴을 도입하고 최신 트렌드를 파악할 수 있습니다. 이 CSS 기능이 지원되어 이제 DevTools에서 컨테이너 쿼리를 검사하고 디버그할 수 있습니다.
위의 동영상에서는 컨테이너 쿼리, 그 문법, DevTools에서 컨테이너를 검사하는 방법을 간략하게 설명합니다.
이제 점선 오버레이를 전환하는 해당 배지를 사용하여 컨테이너 요소와 그 하위 요소를 찾을 수 있습니다.
컨테이너가 쿼리 조건을 충족할 때 하위 요소에 적용되는 @container 규칙을 검사합니다.
DevTools의 컨테이너 쿼리 지원에 관한 자세한 내용은 CSS 컨테이너 쿼리 검사 및 디버그를 참고하세요.