반응형을 화면 전체 너비 기준(Media Query)으로 만들면, 같은 컴포넌트를 다른 영역에 넣을 때마다 깨지거나 별도 CSS가 필요해 유지보수가 극도로 어려워짐.

이를 해결하는 최신 기술이 Container Query로, 브라우저 크기가 아니라 “컴포넌트를 감싸는 부모 요소 크기”에 따라 레이아웃이 자동으로 변화한다.

카드, 배너, 프로모션 박스, 관리자 위젯 같은 UI를 어디에 넣든 자동으로 세로형·가로형이 전환되기 때문에 CSS 중복이 70~80% 줄고 재사용성이 급격히 올라간다.

 

.card { container-type:inline-size; container-name:cardbox; }

@container cardbox (min-width:500px) {
  .card { flex-direction:row; }
}

@container cardbox (max-width:499px) {
  .card { flex-direction:column; }
}
 

이렇게 구성하면 같은 .card를 좁은 사이드바에 넣으면 세로형, 넓은 메인에 넣으면 가로형으로 자동 전환된다.

반응형 기준이 “브라우저”에서 “컴포넌트”로 바뀌면서 유지보수 난이도가 크게 낮아지고, 어디에 옮겨놔도 깨지지 않아 디자인·개발 협업 효율도 높아진다.

요즘 기업 퍼블리셔 요구 스택(CLAMP·Grid auto-fill·Motion UI와 함께)에서 가장 많이 언급되는 최신 핵심 기술이다.