6.containerQuery

1. 컨테이너쿼리 VS 미디어쿼리

미디어 쿼리(Media Query): 미디어 쿼리는 CSS3에 소개된 기능으로, 브라우저의 뷰포트 너비와 같은 조건에 따라 스타일을 적용할 수 있게 해주는 기능입니다. 따라서 브라우저 창의 크기에 따라 다른 스타일을 적용하거나, 특정 뷰포트 크기에서만 특정 CSS를 적용하는 등의 작업이 가능합니다. 예를 들어, 미디어 쿼리를 사용해서 브라우저 창의 너비가 600px 미만일 때는 배경색을 빨간색으로, 600px 이상일 때는 파란색으로 변경하는 CSS를 작성할 수 있습니다.

컨테이너 쿼리(Container Query): 컨테이너 쿼리는 아직 웹 표준으로 채택되지 않은 기능이지만, 미디어 쿼리가 뷰포트를 기준으로 스타일을 적용하는 반면, 컨테이너 쿼리는 특정 요소의 너비를 기준으로 스타일을 적용합니다. 따라서 부모 요소의 크기에 따라 자식 요소의 스타일을 변경하는 등의 작업이 가능합니다.

2. 컨테이너쿼리

mdn

1. container 쿼리는 viewport기준이 아닌, 특정 요소의 크기에 따라 반응적으로 스타일링이 가능하다.
2. container 쿼리를 사용하기 위해선 container-name, container-type 지정이 필요하다.

2.1. container 쿼리 사용하기

2.1.1. container-type

• container-type을 사용해 특정 요소를 쿼리 컨테이너로 지정할 수 있다.
• 자식요소는 쿼리 컨테이너의 사이즈에 따라 반응적으로 스타일링할 수 있다.
• container-type에는 size, inline-size 등이 존재한다.

2.1.2. container-type

• container-name 쿼리 컨테이너의 이름을 지정한다.
• 지정된 이름은 @container container-name 형식으로 쓰인다.

.parent {
  container-type: inline-size;
  container-name: parent; /* 쿼리 컨테이너 이름 지정 */
}

@container parent (min-width: 300px) {
  /* 쿼리 컨테이너 이름 사용 */
  .child {
    /* styling */
  }
}

3. 예제코드

3.1. 컨테이너 요소의 너비에 따라 배경색 변경

<h2>container-type: inline-size</h2>
.parent {

요소의 너비에 따라 컨텐츠의 배열변경
Code
Code
<main>
.animalcard {