DevTools 팁: CSS 컨테이너 쿼리 검사 방법

Sofia Emelianova

CSS 컨테이너 쿼리는 웹 개발자들이 기대하는 새로운 CSS 기능입니다. 페이지 기반 반응형 디자인에서 컨테이너 기반 반응형 디자인으로 웹 디자인의 혁명을 일으킬 수 있습니다.

Chrome DevTools는 새로운 레이아웃 디자인 패턴을 채택하고 최신 트렌드를 파악하는 데 도움이 됩니다. 이제 이 CSS 기능을 지원하여 DevTools에서 컨테이너 쿼리를 검사하고 디버그할 수 있습니다.

위 동영상에서는 컨테이너 쿼리, 구문, DevTools에서 컨테이너 쿼리를 검사하는 방법을 간략하게 설명합니다.

이제 점선 오버레이를 전환하는 해당 배지를 사용하여 컨테이너 요소와 그 하위 요소를 찾을 수 있습니다.

컨테이너가 쿼리 조건을 충족할 때 하위 요소에 적용된 @container 규칙을 검사합니다.

DevTools에서 컨테이너 쿼리를 지원하는 방법에 관한 자세한 내용은 CSS 컨테이너 쿼리 검사 및 디버그를 참고하세요.