문서 패턴

안정적인 앵커와 읽기 쉬운 값이 필요한 참조 정보에는 DocumentValueList를 사용하세요. 본문 열에 공간이 있으면 간결한 키/값 배치를 유지하고 좁은 화면에서는 각 항목을 쌓습니다. 긴 값은 내용을 숨기지 않고 줄바꿈됩니다.

fast

--duration-fast

Default .15s

raised

--color-surface-raised

Default light-dark(var(--color-white), var(--color-zinc-90))

smooth

--easing-smooth

Default cubic-bezier(.4, 0, .2, 1)

<DocumentValueList rows={[  { id: 'duration-fast', title: 'fast', identifier: '--duration-fast',    values: [{ label: 'Default', value: '.15s' }] }]} /><DocumentKeyList keys={['animation-duration:', 'transition-duration:']} />

각 행은 실제 제목과 일반 앵커 링크를 사용합니다. ID는 페이지 안에서 고유해야 하며 기존 3단계 제목 아래의 항목에는 headingLevel={4}를 사용합니다. 값은 선택 가능한 텍스트로 유지됩니다. 시각 견본이 있는 토큰 역할에는 DemoTokenTable을, 전체 소스 예제에는 기존 코드 렌더러를 사용하세요. 두 문서 컴포넌트는 모두 정적이며 측정용 데모 레이아웃 밖에 둡니다.

#네임스페이스 사용처

DocumentNamespaceTable은 네임스페이스를 모든 공개 사용처와 연결합니다. 긴 행은 처음에 6개 키를 표시하며 나머지는 마우스, 터치, Enter, Space로 네이티브 펼침 영역을 열어 볼 수 있습니다. 모든 키는 HTML과 이식 가능한 Markdown에 남습니다. 이 서버 컴포넌트는 클라이언트 상태가 필요 없고 학습용 측정 영역 밖에 둡니다.

<DocumentNamespaceTable rows={[  { namespace: 'font-family', consumers: ['font:', 'font-family:'] }]} /><DocumentKeyList keys={consumerKeys} previewCount={6} />

DocumentKeyList는 기본적으로 모든 키를 표시합니다. 긴 조회 목록이 읽기를 방해하면 previewCount를 설정하고 필수 지침은 펼침 영역 밖에 유지하세요. 전체 네임스페이스 레지스트리를 참고하세요.

#유틸리티 네임스페이스 표

NamespaceUtilityTable은 토큰 네임스페이스를 이를 받는 유틸리티 키와 연결합니다. 그룹에 설명이 있으면 원래 Guide의 그룹, 유틸리티 키, 설명 열을 따로 유지합니다. 다듬은 공유 스타일은 조용한 구분선과 일관된 읽기 리듬을 사용합니다. 좁은 화면에서는 키보드로 포커스 가능한 자체 영역 안에서 표만 스크롤되고 페이지 너비는 고정됩니다.

전체 유틸리티 표 견본을 참고하세요.

<NamespaceUtilityTable groups={[  { label: 'Surfaces', namespace: 'color-surface',    keys: ['surface'], description: 'Panels, cards and overlays.' }]} />

독자를 위한 그룹 이름과 manifest의 소스 키를 제공하세요. namespace 또는 namespaces는 지원하지 않는 키를 걸러냅니다. 설명이 없으면 표는 두 열을 사용합니다. 문서 읽기를 돕는 요소이므로 측정하는 데모 레이아웃 밖에 두세요. 실제 사용 예는 색상, 간격, 타이포그래피, 유틸리티 표 검토 페이지를 참고하세요.

#숫자 토큰 표

ThemeNumberVariableTable은 프리셋에서 숫자 토큰과 단위를 읽습니다. spacing 표현은 빗금 배경과 떠 있는 객체로 실제 간격을 드러냅니다. 표는 안정적인 토큰·값 열과 조용한 행 구분선을 가지며 좁은 화면에서는 키보드로 포커스할 수 있는 영역 안에서 스크롤됩니다.

전체 간격 표 견본을 참고하세요.

<ThemeNumberVariableTable namespace="spacing" representation="spacing" />

representation prop은 선택 사항입니다. 중단점과 컨테이너는 간격 견본 없이 설명과 함께 같은 데이터 기반 표를 사용합니다. 원래 토큰 값과 참조 단위를 텍스트로 유지하고 목록은 측정용 레이아웃 데모 밖에 두세요. 숫자 표 검토 페이지에서 현재 공유 표를 확인할 수 있습니다.

#파일 구조

Monorepo Guide처럼 파일과 디렉터리 구조에는 ExplorerView를 사용하세요. 네이티브 중첩 목록이 계층을 유지하며 폴더와 파일 형식 아이콘은 장식입니다. 설명은 주변 본문에 작성하세요.

<ExplorerView items={[  { name: 'package.json' },  { name: 'master.css' },  { name: 'assets', children: [] }]} />

읽기 전용 목록이므로 항목에는 탭 정지점, 펼침 상태, 트리 위젯 키보드 동작이 없습니다. 일반 코드 블록은 파일 내용과 명령에 사용하고 디렉터리 트리에는 사용하지 마세요.

일반 텍스트 트리를 내보낼 때도 같은 items를 사용하세요. 전체 예제는 Monorepo, 라우트 단위 스타일, 패키지 작성을 참고하세요.

#리소스 발견 워터폴

DemoWaterfall은 텍스트 설명과 이름이 있는 리소스 행으로 요청 순서를 예시합니다. 실측 시간 축이나 애니메이션 재생은 없습니다. 선택적 마커로 첫 페인트 같은 조건을 표시할 수 있지만 캡션에서도 조건을 설명하세요. 실측 결과는 벤치마크 컴포넌트에 두세요.

<DemoWaterfall  title="A dependency discovered later"  description="The second request becomes known after the first resource loads."  rows={[    { label: 'Entry', start: 0, end: 40, tone: 'violet' },    { label: 'Dependency', start: 50, end: 90, tone: 'blue' }  ]}/>

위치는 0에서 100 사이이며 그림의 기하만 나타냅니다. 의존 관계를 말로 설명하고 장식용 막대는 보조 기술에서 숨기세요. 좁은 컨테이너에서는 레이블이 각 트랙 위로 쌓입니다. 핵심 리소스를 참고하세요. 워터폴 검토 페이지에서 현재 요청 순서 그림을 확인할 수 있습니다.

#CSS 적용 전후

DemoStyleComparison은 동일하고 신뢰할 수 있는 HTML을 격리된 두 브라우저 문서에 배치합니다. 하나는 브라우저 기본 스타일을 사용하고 다른 하나에는 제공한 CSS를 적용합니다. 내용이 깜박이거나 주변 페이지가 바뀌지 않고 레이아웃 변화를 보여 줍니다.

<DemoStyleComparison  html='<p class="message">Saved to your workspace.</p>'  css='.message { padding: 1rem; font: 500 1rem/1.5 system-ui; }'  height={160}/>

기본적으로 두 미리보기는 같은 고정 높이를 사용하고 필요할 때 네이티브 스크롤을 제공합니다. 위의 첫 페인트 비교 같은 일반 흐름 콘텐츠에는 sizing="content"를 전달해 네이티브 margin을 포함한 문서에 맞춰 각 프레임이 늘고 줄게 하세요. fixed, sticky, 뷰포트에 의존하는 기하에는 기본 viewport 크기 방식을 유지하세요. 비교 그리드는 각 iframe 밖의 레이아웃을 담당하고 스타일 없는 문서는 데모 reset이나 객체 스타일을 받지 않습니다. 사이트에서 작성한 마크업만 전달하세요. 첫 페인트 스타일을 참고하세요.

#문서 흐름

DocumentFlow는 실제 텍스트와 네이티브 목록 의미 구조로 짧은 순서 있는 과정을 보여 줍니다. 번호 있는 단계는 넓은 화면에서 읽기 열을 함께 사용하고 공간이 좁으면 쌓입니다. 정적 설명이며 배치는 시간이나 현재 단계를 뜻하지 않습니다.

<DocumentFlow  title="Publish a document"  steps={[    { title: 'Write', description: 'Prepare the source content.' },    { title: 'Publish', description: 'Deliver the reviewed output.' }  ]}/>

간결한 단계를 2~4개 사용하세요. 선택적 캡션은 단계 아래에 공통 제약을 설명합니다. 컴포넌트가 자체 그리드, 간격, 테두리를 가지므로 측정하는 레이아웃 밖에 두세요. 컨트롤, 포커스 정지점, 애니메이션은 추가되지 않습니다.

DeliveryFlow는 런타임과 하이드레이션, 소스 스캔, 네이티브 CSS 가지치기, 라우트 스타일을 위한 공유 내보내기 가능한 레시피를 제공합니다. 순서 있는 텍스트는 검색과 Markdown에도 포함됩니다.

#문서 선택지

읽기 열 안에 소수의 관련 목적지를 표시하려면 DocumentChoices를 사용하세요. 각 링크는 제목, 짧은 설명, 선택적 장식 아이콘을 가집니다. 행은 넉넉한 클릭 영역, 보이는 키보드 윤곽선, 네이티브 탐색 의미 구조를 제공합니다. 전체 행을 하나의 링크로 유지하고 안에 컨트롤을 중첩하지 마세요.

<DocumentChoices label="Related guides" entries={[  { title: 'Theme tokens', description: 'Shared product values.', href: 'https://rc.css.master.co/guide/theme' }]} />

MigrationGuides 같은 제품 어댑터는 공유 탐색 기본 요소에 자체 그림과 항목을 제공합니다. 범주와 알파벳 탐색이 필요한 큰 카탈로그에는 DocumentationIndex를 사용하세요. 이 탐색 컴포넌트들은 학습 레이아웃 밖에 둡니다.

#본문 비교

문서 열 안에서 글이나 class 구문을 비교해야 하면 2열 Markdown 표를 DocumentComparison으로 감싸세요. 좁은 화면에서도 두 열을 모두 표시하고 긴 구문은 줄바꿈합니다. 여러 문단이 필요한 결정에는 목록을, 형식을 유지해야 하는 소스에는 코드 블록을 사용하세요. 이 정적 래퍼는 네이티브 표 머리글을 유지합니다. 독립 표와 같은 바깥 간격과 반응형 확장을 담당하며 안쪽 표는 다시 확장하지 않습니다. figure나 트레이 안에서는 해당 표면의 프레임 안에 머뭅니다.

<DocumentComparison>| Master CSS class | Native CSS effect || --- | --- || `(border-radius:.75rem)` | Sets `border-radius: .75rem`. |</DocumentComparison>

토큰 계열 매핑과 렌더링 선택을 참고하세요.

#구문 매핑

짧은 구문 토큰과 네이티브 CSS의 대응에는 DocumentCodeTable을 사용하세요. 행 머리글은 각 토큰을 분할하지 않고 유지하며 CSS는 자연스러운 공백에서 줄바꿈됩니다. 긴 생성 규칙은 코드 블록에 두세요. 표는 정적 읽기 보조 요소이므로 데모의 측정 영역 밖에 배치합니다.

<DocumentCodeTable label="Token" rows={[  { syntax: '@layer(components)', css: '@layer components' },  { syntax: '@motion-reduce', css: '@media (prefers-reduced-motion: reduce)' }]} />

첫 번째 열의 기본 레이블은 “Syntax”입니다. 조건 Reference는 이름이 있는 변형과 임의 쿼리 모두에 이 패턴을 사용합니다. 이식 가능한 Markdown은 원래의 2열 표와 모든 값을 유지합니다.