container-query (@container)

* container-query 
viewport가 아닌 특정 요소의 크기에 따라 스타일링을 할 수 있는 쿼리
부모 박스 폭에 반응하는 css 작성 가능!
(media 쿼리는 브라우저 폭에 대해 반응했는데, 이건 부모 박스 폭에 반응함)
container 쿼리를 사용하기 위해선 container-name, container-type 지정이 필요

 

ex)
.card-container{
  contain:style layout inline-size; //기준점
} 

.title{
  font-size:30px;
}

@container(max-width:350px){ 
//부모박스의 크기가 350px이하이면 적용
  .title{
    color:grey;
    font-size:12px;
 }
}


현재 크롬에서는 동작하지 않음
chrome canary 버전 다운 -> chrome://flags옵션 -> container query 옵션 설정

 

* 참고자료

https://www.youtube.com/watch?v=4Vq8CQf-egI