[CSS]Container-query :객체 사이즈에 따라 css 적용하기

  회사에서 새 프로젝트를 들어가는데, 웹 viewport 사이즈는 동일하나 객체의 크기에 따라서 글씨 크기를 조절할 일이 생겼다.

기존에는 자바스크립트를 사용하여 글씨 크기를 조절할 수 있었지만, 더욱 손쉬운 방법을 찾아보다가 container-query라는 것을 알게 되었다.

 

  기존 media 쿼리는 윈도우 창의 사이즈에 따라서 css가 개별로 적용되는 방법이었다면,

이번의 container 쿼리는 객체 사이즈에 따라서 개별로 css를 적용할 수 있는 방법이다.

 

사용방법은 아래와 같다.

<div class="container_parent">
  <div class="container_child">I'm child</div>
</div>

html에 컨테이너 쿼리 범위가 적용될 부모 객체를 설정한 후 자식 객체에 개별 css를 적용하면 된다.

.container_parent{
  container-type:inline-size;
  container-name:containArea;
}
/*container query 선언*/
@container containerArea (max-width:520px){
  .container_child{
  /*적용할 css*/
  }
}

위의 container-name은 지정하지 않아도 적용되긴 하지만, 나중에 코드가 복잡해지지 않기 위해선 지정하는게 좋을 것 같다.

 

참고) 반응형 하기에 더욱 적합한 container-query의 유닛(단위)

1cqw : 1%의 컨테이너 쿼리 넓이

1cqh : 1%의 컨테이너 쿼리 높이

1cqi : 컨테이너 쿼리의 인라인 사이즈의 1%

1cqb : 컨테이너 쿼리의 블럭 사이즈의 1%

1cqmin : 가장 작은 cqi or cqb

1cqmax : 가장  큰 cqi or cqb

 

위의 단위를 이용하면 처음 프로젝트에 들어갈 폰트 사이즈의 고민을 간단하게 해결할 수 있다.

 

생각보다 티스토리 칸이 좁아서 html css js 부분은 끄고 result 부분만 켜서 확인해보면 알 수 있다.

조만간 바꿔야지..

See the Pen container-query by SIONS2 (@SIONS2) on CodePen.