소피아 에멜리아노바
CSS 컨테이너 검색어는 웹 개발자들에게 많은 도움이 되는 새로운 CSS 기능입니다. 페이지 기반 반응형 디자인에서 컨테이너 기반 반응형 디자인에 이르기까지 웹 디자인의 혁명을 일으킬 수 있습니다.
Chrome DevTools를 사용하면 새로운 레이아웃 디자인 패턴을 채택하고 최신 트렌드를 파악할 수 있습니다. 이 CSS 기능이 지원되어 이제 DevTools에서 컨테이너 쿼리를 검사하고 디버그할 수 있습니다.
위 동영상은 컨테이너 쿼리와 그 구문, 그리고 DevTools에서 쿼리를 검사하는 방법에 대한 개요를 제공합니다.
이제 점선 오버레이를 전환하는 해당 배지를 사용하여 컨테이너 요소와 그 하위 요소를 찾을 수 있습니다.
컨테이너가 쿼리 조건을 충족할 때 하위 항목에 적용된 @container 규칙을 검사합니다.
DevTools의 컨테이너 쿼리 지원에 관해 자세히 알아보려면 CSS 컨테이너 쿼리 검사 및 디버그를 참고하세요.