CSS3 컨테이너 쿼리(container query) 사용하는 방법

컨테이너 쿼리(Container Query)가 있기 전에는 Media Query 만 있었습니다.

Media Query는 브라우저의 가로폭에 반응하기 때문에 브라우저의 가로폭이 변하지 않으면 웹사이트 요소의 스타일을 다이나믹하게 변경하기 쉽지 않았습니다.

컨테이너 쿼리가 나오고 나서는 웹사이트 요소의 가로값에 반응하는 디자인을 적용할 수 있습니다.

그래서 이번 시간에는 컨테이너 쿼리를 사용하는 방법에 대해서 알아보겠습니다.

.

HTML 코드를 다음과 같이 작성해서 wrapper 블록과 그 안에 card 블록 세개를 만듭니다.

그리고 버튼을 클릭해서 wrapper 블록의 크기를 줄이고 다시 원상 복구 될 수 있도록 click 버튼과 reset 버튼을 만듭니다.

.

<div class="wrapper">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>
<button onclick="changewidth()">Click</button>
<button onclick="reset()">Reset</button>

.

웹사이트 요소가 적절히 배치 되도록 CSS를 다음과 같이 작성합니다.

.

.wrapper {
  width: 500px;
  height: 500px;
  background-color: lightgreen;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  container-type: inline-size;
  container-name: wrapper;
}
.card {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightcoral;
}

@container wrapper (max-width:400px) {
  .card {
    width: 50px;
    height: 50px;
    background-color: lightblue;
  }
}

.

컨테이너 쿼리는 미디어 쿼리와 비슷하게 작성합니다. 대신 컨테이너 쿼리를 작성할 요소에 container-type 과 container-name을 지정해주고 미디어 쿼리처럼 @표시로 시작해서 container-name을 적고 기준이 되는 가로값을 지정해 줍니다. 그리고 기준이 맞을 때의 card 요소의 값을 안에 작성해 줍니다.

.

버튼을 클릭해서 wrapper 요소의 크기를 줄이고 원상복구하는 코드도 작성해서 추가해줍니다.

.

const wrapper = document.querySelector(".wrapper");

const changewidth = function () {
  wrapper.style.width = "300px";
  wrapper.style.height = "300px";
};
const reset = function () {
  wrapper.style.width = "500px";
  wrapper.style.height = "500px";
};

.

Click 버튼을 클릭하면, wrapper 요소의 가로 및 세로 크기가 500px에서 300px으로 줄어들면서 card 요소의 가로 및 세로의 크기가 줄어들면서 색상도 변경되는 것을 확인 하실 수 있습니다.

.

ClickReset

.

이렇게 컨테이너 쿼리를 사용하는 방법에 대해서 알아봤습니다.

감사합니다.