IROUL
회원가입로그인
뒤로가기
CSS 유틸리티

[Container Style Queries] 클래스 대신 '값'으로 테마를 바꾸는 CSS

자식 요소가 자기 클래스가 아니라 부모에 심어둔 커스텀 속성 값(--tone)을 보고 색과 아이콘을 스스로 바꿉니다. 한 곳의 값 하나만 갈면 그 아래가 전부 따라옵니다.

CSS Container Style Queries@container style()CSS custom propertiescontainer-type@supports
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약 - 자식에 색 클래스를 붙이지 않고, 부모에 값 하나(--tone)만 심으면 그 아래 카드/배지/버튼이 @container style() 규칙으로 스스로 테마를 바꿉니다.

이럴 때 필요해요

알림 카드를 info/success/warning/danger 톤으로 바꿀 때, 보통은 카드와 그 안의 배지/버튼마다 .info, .success 같은 클래스를 일일이 붙였다 떼야 합니다. 종류가 늘수록 클래스 조합이 폭발하고, 한 군데만 빼먹으면 색이 어긋나죠. 톤이라는 데이터 하나로 한 번에 갈아끼우고 싶을 때 쓰는 기능입니다.

어떻게 동작하나

  1. 부모 요소에 커스텀 속성으로 값을 심습니다 (예: --tone: success). 데이터를 한 곳에 둔 셈입니다.

  2. 자식 쪽 CSS는 @container style(--tone: success) 로 작성합니다. 자식이 자기 클래스가 아니라 조상에 심긴 값을 보고 어떤 스타일을 쓸지 고릅니다.

  3. 컨트롤에서 톤 값을 바꾸면 매칭되는 규칙이 새로 걸려서, 카드 안의 모든 자식 색이 한꺼번에 따라 바뀝니다. 클래스는 그대로입니다.

핵심은 이거예요

요소마다 클래스를 갈아끼우는 대신, 조상에 둔 '값'으로 테마를 정한다는 점입니다. 폭(width)에 반응하는 사이즈 컨테이너 쿼리와 달리, 이건 속성 '값'에 반응하는 스타일 변종입니다. 테마를 한 곳에서 정해 아래로 물려주는 셈이죠.

놓치기 쉬운 것

  • 비교적 새 기능(Baseline 2026)이라 구형 브라우저는 @container style() 규칙을 통째로 무시합니다. CSS.supports 로 감지하고, 미지원이면 부모에 클래스(.tone-success 등)를 함께 붙여 폴백을 두세요. 화면이 깨지진 않고 기본 톤으로만 보입니다.

  • style() 쿼리가 동작하려면 컨테이너에 container-type 이 켜져 있어야 합니다. 또 지금은 '값이 정확히 같은가' 비교 위주라, 범위 비교 같은 건 아직 기대하지 마세요.

이런 곳에 써요

  • 알림/토스트/배지의 상태별 테마 (info/success/warning/danger) 를 값 하나로 전환

  • 다크/라이트, 브랜드 색 등 한 곳에서 정해 카드 묶음 전체에 물려주는 디자인 토큰형 테마

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { StyleQueriesDemo } from "./-components/StyleQueriesDemo";

export const metadata: Metadata = {
  title: "CSS Container Style Queries (데모)",
  description:
    "@container style(--tone: success) - 자식이 자기 클래스가 아니라 부모의 커스텀 속성 값을 보고 스타일을 바꾸는 CSS. 클래스 갈아끼우기 없이 값 하나로 테마를 전환합니다.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-white">
      <StyleQueriesDemo />
    </main>
  );
}
81조회수

댓글