구문 튜토리얼
Master CSS 클래스를 읽고 조합하며 상호작용 상태와 조건을 추가하고 가용 공간에 반응하는 가이드 카드를 만드세요.
이 페이지의 내용
가이드 카드에는 간격, 읽기 쉬운 텍스트, 상호작용에 반응하는 링크가 필요합니다. Master CSS에서는 HTML 안에서 이러한 결정을 내릴 수 있습니다. 스타일을 선택하고 적용할 위치나 시점을 정하는 선택자 또는 조건을 추가하세요.
먼저 설치를 완료하세요. 예제는 사용자 지정 유틸리티 정의 없이 기본 프리셋을 사용합니다. 통합 도구가 스캔하는 소스 파일에 마크업을 두고 앱 스타일시트를 불러오세요.
@import '@master/css';각 생성된 CSS 펼침 영역에는 함께 제시된 클래스를 컴파일한 출력이 표시됩니다. 열어서 브라우저에 전달되는 내용을 확인하세요. 출력을 스타일시트에 복사할 필요는 없습니다.
#클래스 읽기
뷰포트가 프리셋의 sm 쿼리에 일치할 때만 마우스를 올리면 파란색으로 바뀌는 링크로 시작하세요.
<a href="/guide/reusing-styles" class="fg-blue-60:hover@sm"> Read the guide</a>클래스는 세 부분으로 구성됩니다. fg-blue-60은 스타일, :hover는 상태를 선택하고 @sm은 조건을 추가합니다. 선택자와 조건이 모두 일치할 때만 스타일이 적용됩니다. 접미사가 없으면 fg-blue-60은 호버나 뷰포트 너비와 관계없이 적용됩니다.
스타일, 선택자, 조건 읽기
뷰포트가 sm과 일치할 때만 호버된 요소에 색상이 적용됩니다. 두 접미사는 모두 이 클래스에 속합니다.
텍스트 설명
- 스타일. fg-blue-60은 color를 var(--color-blue-60)으로 설정합니다.
- 선택자. :hover는 클래스를 가진 요소에 마우스를 올렸을 때 일치합니다.
- 조건. @sm은 규칙을 프리셋의 이름 있는 sm 미디어 쿼리로 감쌉니다. 선택자와 조건이 모두 일치해야 이 클래스가 적용됩니다.
생성된 CSS
@layer theme { :root, :host { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { @media (width >= 52.125rem) { .fg-blue-60\:hover\@sm:hover { color: var(--color-blue-60) } }}생성 규칙은 CSS 변수로 color를 설정하고 미디어 쿼리 안에 배치됩니다. 선택자의 문장 부호는 HTML의 실제 클래스 이름과 일치하도록 이스케이프됩니다. HTML에는 읽기 쉬운 형태를 작성하세요. 이스케이프된 CSS 선택자는 생성 출력에 속합니다.
접미사는 하나의 전체 클래스에 속함
괄호는 정확한 문자 범위에 연결됩니다. 공백이 첫 클래스를 끝내며 그 상태, 조건, 중요도는 r-md로 확장되지 않습니다.
텍스트 설명
- p(12)는 안쪽 여백을 제공합니다. :hover는 클래스를 가진 요소를 검사하고 @sm은 규칙을 명명된 미디어 조건으로 제한하며 마지막 !는 선언을 중요하게 표시합니다.
- 별도 r-md 클래스에는 이 접미사가 없습니다. 호버나 sm 조건 없이 적용될 수 있으며 선언은 중요 선언이 아닙니다.
#값 지정 방식 선택
일반적인 결정에는 프리셋 이름을 사용하세요. 정확한 로컬 값이 필요하면 지원 함수에 숫자를 전달하거나 네이티브 선언을 작성하세요.
| 작성 방법 | 의미 |
|---|---|
flex | display: flex의 고정 유틸리티 |
p-md | 이름 있는 간격을 위한 토큰 클래스 |
p(12) | 직접 값: 12픽셀 패딩 |
(max-width:32rem) | 전체 CSS 속성과 값이 있는 네이티브 선언 |
text-sm | 글자 크기, 행간, 자간을 조합하는 레시피 |
생성된 CSS
@layer theme { :root, :host { --font-size-sm: .875rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --spacing-md: 1rem }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .flex { display: flex } .p-md { padding: var(--spacing-md) } .p\(12\) { padding: calc(12 * 1px) } .\(max-width\:32rem\) { max-width: 32rem }}items-center, text-center 같은 고정 유틸리티는 일반적인 선언을 제공합니다. m(4), b(1), grow(1) 같은 직접 값 함수는 숫자를 받습니다. 길이 함수는 픽셀을 사용하고 grow(1)은 단위 없는 flex 계수를 지정합니다. 네이티브 선언은 괄호 안에 전체 속성 이름을 유지합니다. text-sm, grid-cols(2) 같은 레시피는 여러 선언을 조합할 수 있습니다. 모든 형태는 선택자와 조건 접미사를 지원합니다.
#하나의 클래스 안에 공백 유지
HTML은 공백으로 클래스를 구분합니다. 따옴표 문자열 밖에서 CSS 값에 공백이 필요하면 |를 쓰고 쉼표, 슬래시, 괄호는 그대로 유지하세요.
<div class="(transform:translate(0,1rem)) (color:rgb(30|60|90/80%))"> <span class="(content:'New|collection')::before"></span></div>생성된 CSS
@layer utilities { .\(color\:rgb\(30\|60\|90\/80\%\)\) { color: rgb(30 60 90/80%) } .\(transform\:translate\(0\,1rem\)\) { transform: translate(0, 1rem) } .\(content\:\'New\|collection\'\)\:\:before::before { content: 'New|collection' }}색상은 rgb(30 60 90 / 80%)가 됩니다. 따옴표로 감싼 content 문자열 안의 파이프는 그대로 유지되어 텍스트는 New|collection입니다. Master CSS는 calc(100%-2rem) 같은 식의 연산자 간격도 정규화하며 계산은 브라우저가 수행합니다. 네이티브 선언 경계, 따옴표 값, 이스케이프는 선언과 값을 참고하세요.
따옴표 안에서 의미가 달라지는 파이프
공백 디코딩은 따옴표 문자열 밖에 적용됩니다. 출력 문자열은 여전히 하나의 리터럴 값입니다.
텍스트 설명
두 리터럴 입력이 각 출력에 대응합니다. rgb(30|60|90)은 rgb(30 60 90)이 되고 따옴표 문자열 New|collection은 파이프를 유지합니다.
#공유 값에 토큰 사용
토큰 클래스는 접두사를 이름 있는 값에 연결합니다. p-md와 gap-md는 모두 간격 토큰 --spacing-md를 읽지만 서로 다른 속성을 설정합니다.
| 클래스 | 선언 |
|---|---|
p-md | padding: var(--spacing-md) |
gap-md | gap: var(--spacing-md) |
fg-text-muted | color: var(--color-text-muted) |
생성된 CSS
@layer theme { :root, :host { --color-zinc-40: oklch(68.6% .0028 265); --color-zinc-60: oklch(48.6% .003 265) } :root, :host { --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40)) } :root, :host { --spacing-md: 1rem }}@layer utilities { .fg-text-muted { color: var(--color-text-muted) } .gap-md { gap: var(--spacing-md) } .p-md { padding: var(--spacing-md) }}아래의 간격 값은 프리셋에서 직접 가져옵니다.
--spacing-sm:.75rem(:root,:host)--spacing-md:1rem(:root,:host)--spacing-lg:1.5rem(:root,:host)
p-md와 (padding:1rem)은 같아 보여도 다른 결정을 표현합니다. --spacing-md를 바꾸면 토큰 기반 패딩은 바뀌지만 리터럴은 1rem으로 유지됩니다. 스타일이 공유 값을 따라야 할 때 토큰을 사용하세요. 정의와 범위는 테마 토큰, 접두사와 이름 공간은 패밀리 색인을 참고하세요.
#독립적인 결정 조합
각 결정에 별도 클래스를 지정해 작은 표면을 구성하세요.
<article class="p-md r-lg b(1) b-solid b-line-divider bg-surface-raised"> <h2 class="m(0) text-lg fg-text-strong">Field notes</h2> <p class="mt-sm mb(0) text-sm fg-text-muted">Keep useful ideas close.</p></article>생성된 CSS
@layer theme { :root, :host { --color-zinc-40: oklch(68.6% .0028 265); --color-zinc-60: oklch(48.6% .003 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-size-sm: .875rem; --font-size-lg: 1.125rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0; --radius-lg: .5rem; --spacing-sm: .75rem; --spacing-md: 1rem }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) } .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-lg { border-radius: var(--radius-lg) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .fg-text-muted { color: var(--color-text-muted) } .fg-text-strong { color: var(--color-text-strong) } .m\(0\) { margin: calc(0 * 1px) } .mt-sm { margin-top: var(--spacing-sm) } .mb\(0\) { margin-bottom: calc(0 * 1px) } .p-md { padding: var(--spacing-md) }}여기서 b(1)은 테두리 너비, b-solid는 스타일, b-line-divider는 색상을 설정합니다. 하나를 바꿀 때 나머지를 다시 지정할 필요가 없습니다. 패딩, 반지름, 텍스트 설정도 독립적이므로 이후 변형을 작게 유지할 수 있습니다. 넓은 레이아웃에서 표면과 텍스트는 유지하고 패딩만 바꿀 수 있습니다.
#클래스 순서는 우선순위를 정하지 않습니다
p-md p(12)을 쓰면 이 속성에서 직접 값이 토큰보다 우선합니다. HTML 클래스 순서를 뒤집어도 같은 CSS가 생성됩니다.
생성된 CSS
@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .p-md { padding: var(--spacing-md) } .p\(12\) { padding: calc(12 * 1px) }}의도적인 재정의가 아니면 기본 패딩은 하나만 선택하세요. 네이티브 컴포넌트 CSS와 유틸리티를 조합할 때는 레이어 순서도 중요합니다. 프리셋은 일반 utilities 선언을 components 뒤에 배치합니다. 경쟁 규칙은 캐스케이드 레이어, 공유 외관을 유지하며 한 인스턴스를 바꾸는 방법은 스타일 재사용을 참고하세요.
#상태와 선택자 관계 추가
동작이 바뀌는 클래스에 선택자를 붙이세요. 이 버튼은 호버 시 표면을 바꾸고 키보드로 포커스하면 윤곽선을 표시합니다.
표면 변화와 포커스 윤곽선
<button type="button" class="px-md py-xs text-sm r-md b(1) b-solid b-line-divider bg-surface-raised fg-text-strong shadow-sm bg-surface-inset:hover outline-offset(3) outline(2):focus-visible outline-solid:focus-visible">Save changes</button>생성된 CSS
@layer theme { :root, :host { --color-zinc-5: oklch(96.5% .0011 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100)); --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-size-sm: .875rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --radius-md: .375rem; --spacing-xs: .5rem; --spacing-md: 1rem } :root, :host { --shadow-sm: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)) }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-md { border-radius: var(--radius-md) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .shadow-sm { box-shadow: var(--shadow-sm) } .fg-text-strong { color: var(--color-text-strong) } .outline-offset\(3\) { outline-offset: calc(3 * 1px) } .py-xs { padding-block: var(--spacing-xs) } .px-md { padding-inline: var(--spacing-md) } .bg-surface-inset\:hover:hover { background-color: var(--color-surface-inset) } .outline-solid\:focus-visible:focus-visible { outline-style: solid } .outline\(2\)\:focus-visible:focus-visible { outline-width: calc(2 * 1px) }}호버 접미사는 bg-surface-inset:hover에만 적용되며 이웃 클래스까지 조건부로 만들지 않습니다. :disabled, :nth-child(2), ::before 같은 네이티브 의사 클래스와 의사 요소를 사용할 수 있습니다. 선택자 함수도 지원합니다. fg-blue-60:is(:hover,:focus-visible)는 두 상태 중 하나에서 적용됩니다.
선택자는 다른 요소를 대상으로 할 수도 있습니다. 이 예제에서는 article이 클래스를 갖지만 article에 호버하면 직계 자식 링크가 색상을 받습니다.
<article class="fg-blue-60:hover>a"> <h3>Field notes</h3> <a href="/guide/reusing-styles">Read the guide</a></article>생성된 CSS
@layer theme { :root, :host { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .fg-blue-60\:hover\>a:hover > a { color: var(--color-blue-60) }}직계 자식에는 >, 하위 요소에는 _를 사용하세요. fg-blue-60_a는 하위 링크를 대상으로 합니다. 클래스를 가진 요소는 여전히 접미사의 기준입니다. 형제 결합자, 속성, 선택자 목록, 명시도는 선택자를 참고하세요.
#조건 추가
조건은 클래스가 적용되는 시점을 제어합니다. @sm을 추가하면 뷰포트가 해당 이름 있는 쿼리와 일치할 때만 스타일이 바뀝니다. 이 미리보기에서 첫 예제의 동작을 관찰할 수 있습니다.
뷰포트 너비에 따른 호버 색상
<div class="p-sm p-lg@sm"> <a href="/guide/responsive-design" target="_top" class="inline-flex py-xs text-sm fg-text-body underline fg-blue-60:hover@sm">Explore responsive design</a></div>생성된 CSS
@layer theme { :root, :host { --color-zinc-30: oklch(78% .0025 265); --color-zinc-70: oklch(39.8% .0028 265); --color-blue-60: oklch(51.83% .2687 266.1) } :root, :host { --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30)) } :root, :host { --font-size-sm: .875rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --spacing-xs: .5rem; --spacing-sm: .75rem; --spacing-lg: 1.5rem }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .fg-text-body { color: var(--color-text-body) } .inline-flex { display: inline-flex } .p-sm { padding: var(--spacing-sm) } .py-xs { padding-block: var(--spacing-xs) } .underline { text-decoration-line: underline } @media (width >= 52.125rem) { .p-lg\@sm { padding: var(--spacing-lg) } } @media (width >= 52.125rem) { .fg-blue-60\:hover\@sm:hover { color: var(--color-blue-60) } }}@sm은 프리셋의 사용자 지정 미디어 쿼리를 가리킵니다. 일회성 뷰포트 임계값에는 p-lg@media(width>=48rem) 같은 네이티브 쿼리를 쓰세요. 다른 조건 형태도 같은 패턴을 따릅니다.
| 클래스 | 조건 |
|---|---|
hidden@media(print) | 인쇄 시 |
grid@supports(display:grid) | 선언 지원 |
grid@sm@supports(display:grid) | 이름 있는 뷰포트 쿼리와 선언 지원 모두 |
생성된 CSS
@layer theme { :root, :host { --spacing-lg: 1.5rem }}@layer utilities { @media print { .hidden\@media\(print\) { display: none } } @supports (display:grid) { .grid\@supports\(display\:grid\) { display: grid } } @media (width >= 52.125rem) { @supports (display:grid) { .grid\@sm\@supports\(display\:grid\) { display: grid } } } @media (width >= 48rem) { .p-lg\@media\(width\>\=48rem\) { padding: var(--spacing-lg) } }}여러 조건은 왼쪽에서 오른쪽으로 중첩되므로 모든 래퍼가 일치해야 합니다. 사용자 지정 미디어와 다른 래퍼는 조건을 참고하세요.
두 조건이 모두 일치해야 합니다
grid@sm@supports(display:grid)는 어느 한 조건만으로 선언을 활성화하지 않습니다.
텍스트 설명
2×2 행렬에서 뷰포트가 sm과 일치하고 display:grid를 지원하는 교집합만 강조합니다.
#컴포넌트의 가용 공간 따르기
같은 뷰포트 너비에서도 사이드바 카드는 주 콘텐츠 영역의 카드보다 공간이 좁습니다. 부모에 container-inline을 추가하고 카드의 레이아웃 클래스에 컨테이너 조건을 붙이세요. 마지막 예제는 (container-name:card)로 부모에 이름을 지정하고 @container(card|width>=28rem)로 조회합니다.
부모가 컨테이너를 만들고 자식이 레이아웃을 바꿉니다. 28rem 임계값은 --container-md 같은 크기 토큰과 별개의 명시적 쿼리 값입니다. 반응형 디자인에서 이름 있는 컨테이너와 중첩 컨테이너로 차이를 설명합니다.
#하나로 조합
이 카드는 앞의 결정들을 조합합니다. 한 열로 시작하고 이름 있는 부모가 28rem에 도달하면 링크가 텍스트 옆으로 이동하고 패딩이 커집니다. 링크의 호버와 포커스 스타일은 레이아웃과 독립적으로 유지됩니다.
공간에 맞는 가이드 카드
<section class="container-inline (container-name:card)"> <article class="grid gap-lg p-md r-lg b(1) b-solid b-line-divider bg-surface-raised shadow-sm (grid-template-columns:1fr|auto)@container(card|width>=28rem) p-lg@container(card|width>=28rem)"> <div> <h3 class="m(0) text-lg font-regular fg-text-strong">Reusable styles</h3> <p class="mt-sm mb(0) text-sm fg-text-muted (max-width:38ch)">Keep shared appearance together and local choices in markup.</p> </div> <a href="/guide/reusing-styles" target="_top" class="inline-flex items-center justify-center self-start self-center@container(card|width>=28rem) gap-xs px-md py-xs text-sm (text-decoration-line:none) r-md b(1) b-solid b-line-divider bg-surface-raised fg-text-strong shadow-sm bg-surface-inset:hover outline-offset(3) outline(2):focus-visible outline-solid:focus-visible">Read the guide <span aria-hidden="true">→</span> </a> </article></section>생성된 CSS
@layer theme { :root, :host { --color-zinc-5: oklch(96.5% .0011 265); --color-zinc-40: oklch(68.6% .0028 265); --color-zinc-60: oklch(48.6% .003 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100)); --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-weight-regular: 400; --font-size-sm: .875rem; --font-size-lg: 1.125rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0; --radius-md: .375rem; --radius-lg: .5rem; --spacing-xs: .5rem; --spacing-sm: .75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem } :root, :host { --shadow-sm: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)) }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) } .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .items-center { align-items: center } .self-start { align-self: start } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-lg { border-radius: var(--radius-lg) } .r-md { border-radius: var(--radius-md) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .shadow-sm { box-shadow: var(--shadow-sm) } .fg-text-muted { color: var(--color-text-muted) } .fg-text-strong { color: var(--color-text-strong) } .container-inline { container-type: inline-size } .grid { display: grid } .inline-flex { display: inline-flex } .font-regular { font-weight: var(--font-weight-regular) } .gap-lg { gap: var(--spacing-lg) } .gap-xs { gap: var(--spacing-xs) } .justify-center { justify-content: center } .m\(0\) { margin: calc(0 * 1px) } .mt-sm { margin-top: var(--spacing-sm) } .mb\(0\) { margin-bottom: calc(0 * 1px) } .outline-offset\(3\) { outline-offset: calc(3 * 1px) } .p-md { padding: var(--spacing-md) } .py-xs { padding-block: var(--spacing-xs) } .px-md { padding-inline: var(--spacing-md) } .\(container-name\:card\) { container-name: card } .\(max-width\:38ch\) { max-width: 38ch } .\(text-decoration-line\:none\) { text-decoration-line: none } .bg-surface-inset\:hover:hover { background-color: var(--color-surface-inset) } .outline-solid\:focus-visible:focus-visible { outline-style: solid } .outline\(2\)\:focus-visible:focus-visible { outline-width: calc(2 * 1px) } @container card (width >= 28rem) { .self-center\@container\(card\|width\>\=28rem\) { align-self: center } } @container card (width >= 28rem) { .p-lg\@container\(card\|width\>\=28rem\) { padding: var(--spacing-lg) } } @container card (width >= 28rem) { .\(grid-template-columns\:1fr\|auto\)\@container\(card\|width\>\=28rem\) { grid-template-columns: 1fr auto } }}변형을 선택할 때는 'p-md', 'p-lg'처럼 완전한 클래스 이름을 소스에 유지하세요. 'p-' + size처럼 조각으로 구성하면 소스 스캐너가 전체 이름을 얻지 못합니다. 연속 값에는 네이티브 사용자 지정 속성과 (width:var(--progress)) 같은 고정 클래스를 사용하세요. 소스 탐색은 클래스 이름 스캔, CSS 생성 시점은 렌더링 모드를 참고하세요.
예상한 스타일이 없으면 먼저 생성된 CSS를 열어 클래스를 확인하세요. 이어서 선택자가 어느 요소를 대상으로 하는지, 조건이 일치하는지, 해석된 사용자 지정 속성과 브라우저의 경쟁 규칙을 확인하세요. HTML 클래스 순서를 바꾸는 것은 캐스케이드의 해결책이 아닙니다.
공유 값 정의는 테마 토큰, 컴포넌트 클래스·유틸리티·mixin의 선택은 스타일 재사용을 이어서 읽으세요. 전체 계약은 Reference에 있습니다.