디자인 시스템 작성

전체 예제, 소스, 컨트롤을 함께 두세요. 공유 UI는 주변 표현을 제공하고 예제는 모든 CSS 전제 조건과 측정하는 관계를 담당합니다.

마크, 금색, 글꼴, 문체는 브랜드 가이드를 참고하세요. 이 안내서는 컴포넌트 인터페이스와 예제 구성을 다룹니다.

#공유 컴포넌트 가져오기

Astro와 MDX에서 명시적인 @master/internal-site/demo/*.astro 또는 *.svelte 하위 경로로 기본 요소를 가져오세요. Astro는 정적 구조를 렌더링하고 Svelte 아일랜드는 측정, 재생, 뷰포트 컨트롤을 추가합니다. CSS를 사용하는 예제는 서버의 공개 컴파일러를 사용하며 전체 소스와 생성 출력을 유지합니다.

Demo

인터페이스: title, description, caption, controls, source, background, padding, align, frame

하나의 예제는 하나의 ui-tray입니다. 머리글(title, description, controls), ui-stage, source(코드 창과 접힌 DemoGeneratedCSS), 캡션으로 구성됩니다. class와 style은 스테이지에, frameClassName은 트레이에 적용됩니다. DemoViewport 브라우저나 비교처럼 내용 자체에 프레임이 있다면 frame="none"을 사용하세요.

자식이 자체 간격을 가지면 padding="none"을 사용하세요. 스테이지는 대상을 가운데 배치하고 align="start"는 시작 가장자리에 배치합니다. 프레임이 측정 대상에 레이아웃, containment, 잘림, 크기를 추가해서는 안 됩니다.

DemoSurface

인터페이스: elevation="flat" | "raised", 네이티브 div props

반경 10px의 ui-sheet이며 암시적 레이아웃, 패딩, 잘림은 없습니다. 명시적인 반경 유틸리티로 덮어쓸 수 있으며 raised 옵션은 rise-1 높낮이를 사용합니다.

DemoItem

인터페이스: tone, variant, 네이티브 div props

최소 크기 3rem의 ui-item 타일입니다. 유틸리티가 기하와 레이아웃을 설정합니다. 기본 색조는 neutral이며 blue, violet, amber, green, red는 명시적인 학습 역할로 항상 범례나 레이블로 이름을 붙입니다.

DemoComparison

인터페이스: label과 children이 있는 items, 네이티브 div props

ui-compare는 조건마다 캡션이 있는 스테이지 하나를 두며 공간이 충분하면 나란히 배치합니다.

DemoMedia, DemoSwatch

인터페이스: Media는 선택적 tone이 있는 SVG props 또는 src와 alt를 받습니다. 색상 견본은 label이 필수이며 value는 선택 사항입니다.

재사용 가능한 SVG 이미지와 이름이 있는 색상 견본입니다. 견본 텍스트는 프리셋 유틸리티를 직접 사용합니다.

DemoLabel, DemoLegend

인터페이스: 텍스트. 범례는 label과 tone이 있는 items입니다.

주석은 대상 옆에 두고 대상 레이아웃에는 참여하지 않습니다.

DemoMeasure

인터페이스: label, children

ResizeObserver로 내용 래퍼를 측정하고 별도 표시 영역의 너비와 높이를 갱신합니다. 시연하는 부모 요소 밖에 두세요.

DemoAxes

인터페이스: inline, block, children

예제 주위에 오른쪽 수평축과 아래쪽 수직축 레이블을 표시합니다. 해당 물리 방향이 장면과 여전히 맞을 때만 사용자 지정 레이블을 사용하세요.

DemoControls

인터페이스: label, variant="plain" | "segmented", children

레이블이 있는 네이티브 컨트롤 그룹입니다. segmented는 aria-pressed 버튼이 있는 ui-segmented 트랙을 렌더링합니다. controls를 통해 트레이 머리글에 배치하세요.

DemoScrollArea

인터페이스: 네이티브 div props

오버플로 범위가 제한된 포커스 가능한 영역입니다.

DemoMotion

인터페이스: children

브라우저 애니메이션으로 명시적인 재생, 일시정지, 다시 재생을 제공합니다.

DemoViewport

인터페이스: title, document 또는 src, responsive, chrome, widthPresets, theme, print, motion, initialTheme, inspect, height, maxWidth, sizing

격리된 iframe입니다. 너비 컨트롤이 실제 뷰포트 크기를 조절합니다. 브라우저 프레임(창 점만 있으며 주소는 표시하지 않음)은 responsive를 따르고 다른 미리보기는 plain을 유지합니다. 색상 모드를 비교하는 학습에만 theme를 추가하세요.

Fit은 maxWidth까지 사용 가능한 너비를 사용합니다. 슬라이더와 실시간 값은 같은 물리 뷰포트를 나타냅니다. DemoContainer는 같은 제한을 자체 래퍼에 적용하고 페이지 뷰포트는 유지합니다.

DemoThemeComparison

인터페이스: name, title, html, css, caption, height, print

신뢰할 수 있는 견본 하나를 독립적인 테마와 콘텐츠 크기를 가진 두 문서로 컴파일합니다.

DemoPalette

인터페이스: 선택적 families

고정된 프리셋 색상 목록과 네이티브 클립보드 동작입니다.

DemoCopyButton

인터페이스: value, label, 선택적 feedback="value" | "compact", 네이티브 button props

처리 중 요청과 실제 클립보드 결과를 차례로 알리고 키보드 포커스를 유지합니다. 기본 피드백에는 값이 포함됩니다. 값이 컨트롤 옆에 이미 보인다면 compact를 사용하고 짧은 상태 표시 공간을 확보하세요.

DemoTokenTable

인터페이스: rows, 선택적 descriptionTitle

2열 문서 목록이며 긴 토큰은 표 안에서 스크롤됩니다.

DemoContainer

인터페이스: title, caption, children, maxWidth

측정용 래퍼의 너비를 키보드로 조절하는 컨트롤이 머리글에 있는 전체 트레이입니다. containment는 자식이 담당합니다.

DemoPageViewport

인터페이스: src, title, height

신뢰할 수 있는 사이트 예제 페이지를 실제로 스크롤 가능한 뷰포트에 표시합니다.

#필요한 최소 프레임 선택하기

background는 plain(기본값), hatch, grid, dots, checkerboard를 받습니다. padding은 lg(기본값), sm, none을 받습니다. 내장 뷰포트, 전체 영역 장면, 자체 패딩이 있는 구성에는 none을 사용하세요.

#레이어 맞추기

모서리 반경은 트레이의 4px 안쪽 여백에 맞춰 중첩됩니다. 14px 트레이에는 10px 스테이지, 코드 창, 시트를 넣고 8px 메뉴에는 4px 항목을 넣습니다. 높낮이는 sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay 순서를 따르며 각 레이어는 직접 작성한 그림자 대신 --ui-elevation-* 역할을 사용합니다. 움푹 들어간 면은 --ui-elevation-sink로 주변보다 아래에 놓입니다.

선택, 누름, 복사 피드백 중에도 컨트롤 상자, 아이콘 슬롯, 레이블 시작점을 안정적으로 유지하세요. 호버는 반 픽셀 올라가고 누르면 움푹 들어간 면으로 내려갑니다. 글자가 커지면 컨트롤과 레이블이 줄바꿈되게 하고 키보드 포커스를 보이게 유지하세요.

본문 학습에 문서보다 넓은 너비가 필요하면 전체 대상을 이름이 있는 키보드 포커스 가능 스크롤 영역으로 감싸세요. 대상의 float, flex, 크기 규칙을 그대로 유지하세요. 사이트의 data-preview-scroll 경계는 좌우 방향 키로 가로 스크롤하며 레이블과 컨트롤은 대상 밖에 둡니다.

선택 메뉴는 ui-select로 네이티브를 유지하세요. 자체 화살표를 그리지만 브라우저 선택기와 키보드 동작은 바꾸지 않습니다. 옵션 레이블은 간결하게 쓰고 글자 크기 200%에서도 전체가 보이는지 확인하세요.

두 모드에서 아이콘과 범위 핸들을 실제 렌더링 크기로 확인하세요. 작은 핸들은 트랙 위에서 보이도록 큰 패널보다 강한 가장자리가 필요합니다. 비대칭 아이콘을 시각적으로 가운데 맞춰야 하면 안정적인 슬롯 안의 글리프만 조절하세요. 비활성 컨트롤은 선택 위치를 유지하되 활성 상태의 텍스트 색상과 접촉 그림자는 제거됩니다.

클라이언트 컴포넌트에는 레이아웃과 렌더링된 컨트롤 사이에 아일랜드 호스트가 있을 수 있습니다. 해당 경계를 가로지르는 직접 자식 관계에 의존하지 말고 컴포넌트 class의 범위를 지정하세요. 피드백 표시 전후에 실제 컨트롤을 검증하세요.

#최소 구성

아래 모든 견본은 MDX에서 직접 사용할 수 있습니다. 주변 예제가 기하를 담당하며 작은 구성은 주석과 컨트롤의 위치를 보여 줍니다.

<DemoSurface className="p-md">  <DemoLabel>Layer</DemoLabel>  <p className="mt-xs mb(0) text-sm">Form follows function.</p></DemoSurface><DemoComparison items={[  { label: 'Before', children: <DemoItem>Before</DemoItem> },  { label: 'After', children: <DemoItem tone="violet" variant="outline">After</DemoItem> },]} /><DemoMedia tone="blue" className="w-full h-auto" /><DemoMedia src="/demo/landscape.svg" alt="Sun above mountains" /><DemoSwatch label="Subject" value="bg-blue-60" className="bg-blue-60" /><DemoAxes>  <DemoMeasure label="Container">    <div className="flex gap-sm">{/* measured layout */}</div>  </DemoMeasure></DemoAxes><DemoLegend items={[{ tone: 'blue', label: 'Subject' }]} /><DemoControls label="Alignment" variant="segmented">  <button type="button" aria-pressed="true">Start</button></DemoControls><DemoScrollArea aria-label="Layers" className="(height:10rem)">  {/* overflowing content */}</DemoScrollArea><DemoMotion>  <DemoItem className="(width:4rem) (height:4rem) (animation-name:rotate) (animation-duration:2s) (animation-timing-function:linear) (animation-iteration-count:infinite)" /></DemoMotion><DemoViewport title="Responsive layout" document={htmlDocument} responsive />

DemoComparison은 각 조건을 캡션이 있는 별도 스테이지에 둡니다. 세로 비교에는 네이티브로 쌓이는 부모를 사용하세요. DemoScrollArea는 의도적으로 오버플로를 설정합니다. DemoViewport는 자체 CSS가 있는 전체 HTML 문서를 받아 네이티브 이벤트, 테마 검사, 인쇄 미리보기를 지원합니다. 기본 상한은 1600px이므로 프리셋의 1280px lg 중단점에 도달할 수 있습니다. 좁게 맞춘 뷰포트는 240px보다 작을 수 있으며 슬라이더는 실제 너비를 표시합니다. 더 넓은 임계값이 필요하면 maxWidth를 설정하세요. 신뢰할 수 있는 사이트 작성 문서만 전달하세요. iframe은 레이아웃을 격리하지만 보안 경계가 아닙니다. initialTheme="light" 또는 "dark"로 초기 모드를 고정하고 생략하면 주변 페이지를 따릅니다. 컨트롤은 미리보기가 준비된 뒤 사용할 수 있습니다. 컴파일되는 유틸리티 예제에는 Reference 레시피를 사용하세요.

#이름이 있는 뷰포트 너비

widthPresets와 responsive를 함께 사용해 범위 컨트롤 옆에 의미 있는 경계를 표시하세요. 첫 프리셋이 iframe 초기 너비를 설정하고 Fit은 사용 가능한 캔버스 너비로 돌아갑니다. 중단점 값은 프로젝트의 활성 테마에서 가져오세요. 프리셋이 표시하는 휴대전화보다 넓어도 실제 뷰포트가 바뀝니다.

<DemoViewport  title="A breakpoint comparison"  document={htmlDocument}  responsive  widthPresets={[    { label: 'Below the boundary', width: breakpoint - 1 },    { label: 'Above the boundary', width: breakpoint + 1 },  ]}/>

프리셋 너비는 범위(240px부터 maxWidth) 안에 두고 서로 다른 설명형 레이블을 사용하세요. 넓은 프레임은 캔버스 안에서 스크롤됩니다. 미디어 쿼리를 흉내 내기 위해 견본을 축소하거나 대상 스타일을 바꾸지 마세요. 구문 튜토리얼은 패딩과 조건부 호버에 프리셋 sm 경계를 사용합니다.

#실제 동작 유지하기

레이블을 가운데 맞추려고 대상에 레이아웃, containment, 변형, 잘림을 추가하지 마세요. 학습하는 동작이 바뀔 수 있습니다. 컨트롤은 장면 밖에 두고 뷰포트에 의존하는 예제에는 iframe을 사용하세요.

#학습에 맞게 캔버스 크기 정하기

작은 화면에서 쌓이는 일반 흐름 비교에는 sizing="content"를 사용하세요. 프레임은 이미지 로드나 텍스트 줄바꿈에 따른 문서의 자연 높이를 따르므로 두 번째 세로 스크롤 영역 없이 모든 견본을 볼 수 있습니다.

고정 위치, 스크롤, 뷰포트 단위, 높이 기반 조건에는 기본 sizing="viewport"를 유지하세요. 이 모드에서는 height가 실제 뷰포트를 정의합니다. 예제 높이가 iframe 자체 높이에 의존하면 content 크기 방식을 사용하면 안 됩니다.

<DemoViewport title="Image fitting" document={comparisonDocument} sizing="content" /><DemoViewport title="Sticky navigation" document={scrollingDocument} height={300} />

#위치와 페인트 경계 명시하기

위치 예제에는 표시된 HTML에 containing block을 작성하세요. flex 행이나 텍스트 흐름에 레이블을 넣으면 학습 내용이 바뀌므로 대상 레이아웃 밖에 두세요. 점선 윤곽은 테두리 크기를 추가하지 않고 원래 슬롯과 부모 경계를 표시합니다.

쌓임 예제에는 실제로 겹치는 위치 지정 상자가 필요합니다. z-index를 설명할 때는 자식과 부모 맥락을 모두 보여 주세요. isolation에서는 비교 배경을 대상 요소 밖에 두어 어떤 픽셀이 혼합에서 제외되는지 보이게 하세요.

잘림 예제는 스크롤 컨테이너와 잘림 경계를 구분해야 합니다. 뷰포트의 신뢰할 수 있는 견본 컨트롤은 data-scroll-container="element-id"와 data-scroll-edge="start" 또는 "end"를 지원하며 요소의 네이티브 scrollTo()를 호출합니다. 컨트롤은 잘린 요소 밖에 두고 독립 예제에서는 일반 DOM 이벤트 리스너를 사용하세요.

#실제 스크롤 기하 드러내기

표시된 HTML에 스크롤포트의 크기, overflow, 트랙 방향, 스냅 후보를 유지하세요. 스크롤 레시피는 해당 구조만 꾸미며 공유 스타일로 누락된 트랙이나 스크롤 높이를 제공하지 않습니다. 목적지 컨트롤과 위치 표시는 스크롤포트 밖에 두세요.

스크롤 체이닝은 바깥·안쪽 스크롤 영역을 중첩해 비교하세요. 네이티브 위치 표시는 플랫폼이 스크롤바를 숨겨도 결과를 보이게 합니다. data-scroll-readout="element-id"는 실제 오프셋을, data-scroll-offset="target-id"와 data-scrollport="container-id", data-scroll-axis="x" 또는 "y"는 스크롤포트 가장자리에서 대상까지의 안쪽 거리를 표시합니다.

data-scroll-to="target-id" 컨트롤은 대상의 계산된 스냅 정렬로 네이티브 scrollIntoView()를 호출합니다. nearest-container 옵션을 무시하는 브라우저에서도 주변 문서의 스크롤 위치를 유지합니다. 스냅 정지를 보여 주려면 data-scroll-by="container-id"와 data-scroll-distance="600"을 사용하세요. 상대 이동은 중간 스냅 지점에서 멈출 수 있지만 끝점 직접 이동은 지나칠 수 있습니다. 상대 스냅 정지 요청은 목적지를 비교하기 쉽게 즉시 실행됩니다. 부드러운 스크롤 레시피는 시스템 동작 줄이기 설정을 따릅니다.

#레이아웃 밖에서 flex 크기 측정하기

Flex 레시피는 표시된 전체 HTML에 부모, 항목, basis, 간격, 제약을 작성합니다. 장식 윤곽은 패딩, 최소 크기, flex 동작을 추가하지 않습니다. 축 레이블과 측정값은 대상 컨테이너 밖에 두어 추가 flex 항목이 되지 않게 하세요.

신뢰할 수 있는 iframe 견본에서 data-size-readout="element-id"는 실제 border-box 크기를 소수점 한 자리로 표시합니다. ResizeObserver는 글꼴 로드 후 변하는 내재 크기를 포함해 각 측정 요소를 추적합니다. data-layout-axis="container-id"는 계산된 주축을 inline 또는 block으로 나타내고 해당하면 반전도 표시합니다. 반응형 iframe은 실제 미디어 쿼리 조건을 바꿉니다.

시작 basis와 최종 크기를 구분하세요. grow 계수는 양의 여유 공간을 분배하고 shrink 계수는 내부 flex basis로 가중됩니다. 단순한 외부 크기 비율이 필요하면 측정 항목 안에 패딩이 있는 레이블을 넣으세요. 방향·순서 예제는 tabindex="0" 네이티브 버튼으로 소스 포커스 순서를 드러내고 사용자 지정 키보드 핸들러나 양수 tab index는 사용하지 않습니다.

#정렬과 분배 구분하기

정렬 레시피는 flex 크기 예제와 같은 레이아웃 표현을 사용합니다. 표시된 HTML에 전체 부모, 트랙, 항목, 간격, 자동 크기 제약을 작성하세요. 공유 표현은 윤곽과 색조만 더하며 전제 조건을 제공하지 않습니다. 각 비교에 이름을 붙이고 레이블과 표시는 대상 컨테이너 밖에 두세요.

data-alignment-axis="container-id"와 data-axis-kind="main", "cross", "both"로 계산된 레이아웃의 관련 논리축을 표시하세요. Grid에서 main은 inline, cross는 block에 대응하며 Flexbox에서는 현재 flex 방향을 따릅니다. data-style-readout="element-id"와 data-style-property="property-name"는 해석된 grid 열을 포함한 네이티브 계산값을 표시합니다.

data-position-readout="item-id"와 data-position-origin="container-id"는 컨테이너 안쪽 왼쪽 위에서 항목 border-box까지의 오프셋을 표시합니다. 이는 보이는 물리 오프셋이며 grid-area 원점이나 스크롤 전 콘텐츠 좌표가 아닙니다. 음수는 unsafe 정렬과 실제 스크롤을 드러냅니다. 크기와 함께 표시하고 어떤 요소나 트랙을 정렬하는지 설명하세요.

늘이기는 자동 크기 항목과 명시적 크기 형제를 함께 두어 보여 주세요. safe 정렬에는 들어맞는 내용과 실제 넘치는 내용을 비교하고 스크롤포트를 포커스 가능하게 하며 접근 가능한 이름을 제공하세요. 어떤 가장자리에 도달할 수 있는지 확인하도록 네이티브 오버플로를 유지하세요.

#grid 트랙과 배치 드러내기

Grid 레시피는 작성된 전체 부모와 자식을 렌더링합니다. 해당 HTML에 명시적 트랙, 암시적 크기, 흐름, 간격, 항목 배치를 정의하세요. 공유 프레임은 표현과 외부 표시만 더하며 트랙을 만들거나 누락 항목을 제공하거나 불완전한 부모에 Grid를 설정해서는 안 됩니다.

기존 크기·위치 표시와 함께 data-style-readout으로 grid-template-columns, grid-template-rows, grid-auto-flow를 표시하세요. 브라우저는 암시적 트랙을 포함한 해석된 크기를 보고합니다. 값만으로는 명시적·암시적 트랙을 구분할 수 없으므로 예제에서 경계와 관련 항목을 설명하세요. 선 번호는 경계를 세므로 명시적 트랙 3개에는 선 4개가 있습니다.

소수 픽셀 값이 주석을 복잡하게 만들면 스타일 표시에 data-round-pixels를 추가하세요. 표시 길이는 소수점 한 자리로 반올림하고 output의 title에 전체 계산값을 유지합니다. 측정 레이아웃은 바뀌지 않습니다. 캔버스에 이미 속성값이 있다면 빈 inspect 목록으로 도구 모음의 중복 값을 생략하세요.

dense 배치에는 실제 빈틈을 남기는 span과 나중에 그 틈을 채울 작은 항목을 사용하세요. 네이티브 컨트롤로 소스 순서 포커스를 표시하세요. 분수 트랙에서 측정 비율이 필요하면 사용 가능한 공간을 확정하세요. 트랙 최솟값과 콘텐츠 overflow 처리는 구분하고 의도적인 잘림을 설명하세요. 이름 있는 영역 예제에는 영역 맵과 트랙 크기를 모두 작성하며 크기 조절은 실제 iframe 미디어 쿼리를 바꿉니다.

#제약과 콘텐츠 보여 주기

크기 레시피는 containing block, 선호 크기, 최솟값, 최댓값, 실제 내용을 포함한 전체 표시 HTML을 렌더링합니다. 백분율의 참조를 보이도록 파란 대상과 부모를 따로 측정하세요. 뷰포트 높이 예제에는 높이가 제한된 iframe을 사용하세요. 내용과 함께 커지는 프레임은 자체 높이 단위를 안정적으로 보여 줄 수 없습니다. 중단점이 없어도 유동 래퍼에는 뷰포트 너비 컨트롤을 켜세요.

내재 크기에는 실제 문장을, 비율과 맞춤 예제에는 원본 크기가 알려진 실제 미디어를 사용하세요. 비교에서 내용과 overflow 정책을 같게 유지하세요. 스크롤 가능한 overflow 값은 Flex 자동 최솟값을 없앨 수 있으므로 0 최솟값 효과만 분리하려면 스크롤 없는 잘림을 사용하세요. 최댓값은 성장이나 잘림을 뜻하지 않으며 같은 경계도 정사각형을 보장하지 않습니다.

간격 레시피는 레이블과 값을 대상 레이아웃 밖에 둡니다. 중립 자식은 파란 padding 안의 content-box를 드러내고 outline은 border 없이 부모를 표시합니다. 기존 크기·위치 표시로 내용 크기와 물리적 안쪽 거리를 비교하세요. 필요한 flow-root, Grid, Flex는 명시하고 margin 상쇄가 학습 대상이면 일반 상쇄를 유지하세요. 실제 writing-mode나 방향 변경으로 inline/block 동작을 보여 주세요. 고정 높이 견본이 의도적으로 보이는 overflow를 드러내면 외부 표시 앞의 공간을 확보하고 측정 상자 밖에 두세요.

#글꼴, 글리프, 상속 유지하기

타이포그래피 레시피는 작성된 텍스트, 중첩, 인라인 상자, 전체 표를 렌더링합니다. 표시 HTML에 글자 크기, 굵기, 줄 높이, 간격, 정렬을 유지하세요. 공유 표현은 해당 속성을 바꾸지 않고 은은한 윤곽과 색조만 더합니다. 비교 이름과 계산값은 텍스트 맥락 밖에 두어 추가 줄 내용이 되거나 대상 자간을 상속하지 않게 하세요.

처리 방식을 비교할 때는 문장과 읽기 너비를 같게 하세요. 계산된 줄 높이는 글리프 높이가 아니며 글꼴 목록은 요청한 스택일 뿐입니다. 숫자 기능은 data-size-readout으로 실제 글리프 연속을 측정하고 선택 글꼴이 요청한 대체 글리프를 지원하는지 확인하세요. 표 형식 숫자 비교에는 비례 글꼴을 쓰세요. 기본 고정폭 글꼴은 변화를 숨깁니다.

data-font-status="Family name"은 일치하는 FontFaceSet 항목을 loaded, loading, unavailable로 표시합니다. font-family만으로 성공을 추정하거나 모든 문자가 해당 글꼴을 쓴다고 주장하거나 호스팅 리소스를 로컬 글꼴로 바꾸지 않습니다. 전체 문서 견본은 스타일시트 링크를 유지하고 작성된 body class를 실제 iframe body에 적용합니다.

선택적 플랫폼 속성의 계산값이 비어 있으면 data-empty-value="Not exposed"로 명확한 레이블을 제공하세요. 빈 inspect 목록은 속성 검사를 생략하며 자체적으로 도구 모음을 만들지 않습니다.

일반 텍스트 미리보기는 내용에 맞춰 커지게 하세요. 유동 글자 크기 공식에는 미디어 쿼리가 없어도 실제 뷰포트 컨트롤을 켜세요. reset 예제는 중첩하고 기준선 예제는 인라인으로 유지하세요. block 대체물은 vertical-align을 보여 줄 수 없습니다. 플랫폼별 렌더링 힌트에는 모의 픽셀 효과가 아닌 보이는 지원 제한을 제공하세요.

#텍스트 흐름과 읽기 경로 유지하기

텍스트 흐름 레시피는 같은 글꼴 표면과 외부 표시를 사용합니다. 표시 HTML에 lang, dir, 정확한 공백, 중첩 쓰기 맥락, 전체 overflow 전제 조건을 유지하세요. CJK나 RTL 내용을 영어 대체물로 바꾸거나 공백에 민감한 견본 안에 보이는 주석을 넣지 마세요.

동일한 텍스트와 제약을 비교하세요. 내재 줄바꿈 차이는 실제 min-content 상자로 보여 주고 의도적 overflow에는 직접 작성한 이름 있는 스크롤 영역을 사용하세요. 네이티브 Range 기하는 검증에 사용하며 줄바꿈을 덮어쓰거나 합성 텍스트로 대체해서는 안 됩니다.

숨긴 정보가 중요한 말줄임 예제에는 전체 내용을 읽을 수 있는 보이는 경로가 필요합니다. 설명형 summary가 있는 네이티브 펼침 컨트롤을 사용하고 필수 지침을 보이게 유지하며 키보드 포커스와 펼침을 검증하세요. 툴팁만으로는 부족합니다.

학습 속성이 의사 요소에 적용되면 스타일 표시에 data-style-pseudo="::first-letter"를 사용하세요. 같은 측정 컴포넌트가 네이티브 계산 스타일을 읽습니다. 힌트가 받아들여졌다는 이유만으로 렌더링 품질이나 성능 향상을 추론하지 마세요.

#글리프 페인트 격리하기

typeSpecimens(section, {  appearance: 'plain',  properties: ['text-decoration-line', 'text-decoration-style'],  measure: true,  caption: 'Compare the same words and font with two line styles.',})

투명 텍스트에는 잘린 그라데이션이나 0이 아닌 윤곽처럼 보이는 페인트 소스를 작성해야 합니다. 배경이 생략될 수 있는 인쇄에는 단색 대체를 제공하세요. plain 견본은 이 전제 조건을 제공하지 않습니다. 상호작용 대상은 공유 키보드 포커스 링을 유지합니다.

#목록과 생성 콘텐츠 유지하기

작성된 전체 목록, 글, 자손을 렌더링하세요. plain 텍스트 표면은 카운터 이름, 초기화 값, 마커, 항목, 의사 요소를 임의로 만들면 안 됩니다. 읽기 레이블은 글이나 목록 밖에 두고 속성을 소유한 요소의 값을 표시하세요. 네이티브 카운터 접두사는 계산 스타일에서도 미해결 counter() 표현식일 수 있습니다. 스크립트 숫자로 바꾸지 말고 렌더링된 텍스트를 확인하세요.

필수 링크 이름과 지침은 HTML에 유지하세요. 생성 표시는 네이티브 앵커를 보완하며 접근 가능한 이름에 들어갈 수 있습니다. 실제 의사 요소를 테스트하고 키보드 포커스를 유지하세요. 플랫폼 의존 구문은 브라우저의 실제 지원 분기를 보여 주고 작성한 대체를 명확히 표시하세요.

<DemoExample page="counter-set" section="set-a-counter-on-one-item" /><DemoExample page="list-style-position" section="place-markers-inside-the-content-box" />

#배경 페인트 전제 조건 유지하기

보이는 HTML에 이미지 소스, 상자 크기, 위치, 배경 크기, 반복 동작, 바탕색을 작성하세요. plain 견본은 대상에 이미지, 테두리, padding, 잘림, 혼합 모드를 추가하지 않습니다. 레이블과 계산값은 페인트 영역 밖에 두세요.

attachment에는 실제 넘치는 내용과 고정 높이 iframe 뷰포트를 제공하세요. 안쪽 패널과 문서 스크롤을 따로 테스트하고 변형 레이어로 대체하지 마세요. 전경 텍스트는 자체 불투명 표면에서 읽기 쉽게 유지하고 플랫폼별 고정 배경 동작을 내보내는 본문에도 설명하세요.

레시피는 완전히 작성된 예제에 연결합니다. HTML과 함께 제공된 테마 선언을 복사하세요. 그라데이션 글자에는 지원 검사가 있는 text-fill 패턴을 사용해 미지원 브라우저와 인쇄에서 단색 전경을 유지하세요.

#가장자리 페인트와 레이아웃 구분하기

border 너비, 스타일, 색상을 명시하세요. 같은 상자 크기를 비교하고 box-sizing 모델을 설명하세요. border는 레이아웃 공간을 차지하지만 outline과 shadow는 그렇지 않습니다. 논리적 가장자리는 writing-mode 비교로 설명하세요. 투명 border는 사용 너비를 유지하지만 일반 상자의 none이나 hidden 스타일은 유지하지 않습니다.

plain 견본은 대상에 border, outline, radius, shadow를 추가하지 않습니다. 실시간 값과 레이블은 대상 밖에 두세요. radius 자체는 자손 내용을 자르지 않습니다. 잘림이 예제 일부라면 별도 overflow 규칙을 보여 주세요.

작성한 테마 선언은 예제와 함께 컴파일하세요. shadow 레시피는 미리보기 테마 컨트롤을 명시적으로 켜 두 모드의 실제 토큰 값을 비교할 수 있게 합니다. 작성자가 테마 의존 토큰이나 조건을 제공하지 않으면 원시 페인트 값은 리터럴로 유지됩니다.

#소스와 조각 기하 유지하기

표 견본에는 인접한 의미 있는 셀과 명시적인 셀 테두리가 필요합니다. collapsed 표는 간격을 무시하므로 계산된 spacing만으로 틈을 입증할 수 없습니다. 캡션과 주석은 측정하는 이음새 밖에 두세요.

border-image에는 크기가 알려지고 모서리·가장자리 무늬가 보이는 로드 가능한 소스를 사용하세요. 일반 border, slice, 이미지 너비, 반복 동작을 작성하세요. 소스 좌표와 목적지 페인트를 구분하세요. 네이티브 width와 outset 숫자는 배수입니다. 바깥쪽 페인트에 공간이 필요하면 실제 레이아웃 공간을 확보하세요.

인라인 조각 견본은 명시적인 크기의 컨테이너 안에 실제 인라인 요소 하나를 유지합니다. 텍스트, 줄 높이, padding, 장식을 제공하고 네이티브 줄바꿈이 조각을 만들게 하세요. 텍스트를 별도 상자로 바꾸지 말고 표준·접두사 지원을 비교하세요.

#미디어 크기와 페인트 맥락 유지하기

이미지 견본에는 자연 크기가 알려진 로드 가능한 소스와 명시적인 content-box를 제공하세요. 맞춤과 위치는 주석과 분리하세요. 둥근 특징이 뚜렷한 소스는 늘어남과 잘림을 구분하기 쉽게 합니다.

SVG 견본에는 실제 path, viewBox, 뷰포트 크기, 명시적인 페인트 전제 조건이 필요합니다. 계산된 stroke-width는 viewBox 변환 후 최종 두께를 나타내지 않습니다. non-scaling 효과는 그리는 도형에 적용하세요. 네이티브 컨트롤이 장식 아이콘의 상태와 접근 가능한 이름을 제공하며 테마 비교는 기하를 일정하게 유지합니다.

#페인트 맥락과 상호작용 유지하기

filter 예제에는 보이는 소스 세부와 레이아웃 상자 밖의 페인트 공간이 필요합니다. 투명 이미지로 alpha를 따르는 drop-shadow와 사각형 box-shadow를 구분하세요. backdrop 예제에는 실제 배경 내용과 전경 패널을 넣고 반투명과 읽기 쉬운 텍스트를 명시하세요.

잘림과 마스크 기하는 작성 HTML에 유지하세요. clip 경계는 포인터 적중 검사를 바꾸지만 CSS 상자의 mask는 바꾸지 않습니다. 주석과 필수 컨트롤은 숨길 수 있는 효과 밖에 두세요. 사라지는 스크롤 영역에는 실제 overflow, 네이티브 접근 가능 이름, 키보드 포커스, 계속 읽을 수 있는 설명이 필요합니다.

혼합 그룹과 전체 배경을 명시적으로 작성하세요. isolation은 경계가 있는 그룹이 필요한 예제에만 사용하세요. 요소 전체의 opacity는 자손도 흐리게 하지만 비활성화하지 않습니다. 표면만 흐려야 하면 색상 alpha와 비교하세요. 네이티브 컨트롤 동작을 테스트하고 인쇄에서 적절한 페인트를 복원하세요.

#네이티브 도형 감싸기 유지하기

shape 견본에는 실제 float, 명시적 크기, 인접한 인라인 내용이 필요합니다. 레이블과 측정은 해당 서식 맥락 밖에 두세요. 그리는 도형은 따로 작성하세요. shape-outside는 감싸기를 바꾸지만 이미지를 자르거나 크기를 바꾸지 않습니다. margin이 좌표를 옮길 수 있다면 참조 상자를 명시하세요.

shape-margin은 float의 margin-box 안에서 감싸기 윤곽을 넓힙니다. 더 큰 윤곽에 공간이 필요하면 일반 margin을 확보하세요. 이미지 임계값은 alpha 값이 알려진 로드된 소스를 사용하고 비교에서 페인트 외형을 유지하세요. 그라데이션과 동일 출처 투명 이미지는 위치 지정 텍스트로 대체하지 않고 임계값 동작을 보여 줍니다.

#변형 기하와 힌트 유지하기

원래 레이아웃 슬롯과 회전 중심 가이드는 변형 요소 밖에 두세요. hover, focus, pressed 상태에는 실제 네이티브 컨트롤을 사용하세요. client 경계와 레이아웃 크기를 따로 보고하세요. getBoundingClientRect는 변형을 포함하며 SVG stroke는 보고된 사각형 밖에도 그려질 수 있습니다.

SVG 예제에는 명시적 viewBox, 소스 좌표, 참조 상자 차이가 필요합니다. 3D 장면은 perspective, 변형 부모, 이동 자식을 함께 작성하세요. 장식만을 위해 부모에 opacity, filter, isolation, 잘림을 추가하지 마세요. 그룹화 효과는 자손을 평면화할 수 있습니다. 계산 속성뿐 아니라 실제 깊이 기하도 비교하세요.

will-change 견본은 선언한 힌트와 수명을 드러냅니다. 컨트롤을 보이게 유지하고 적절하면 변화 전에 힌트를 준비한 뒤 해제하세요. 계산된 힌트는 성능 향상을 입증하지 않습니다. 시간 기반 상호작용은 동작 설정을 따르며 보간 없이도 네이티브 상태를 검사할 수 있어야 합니다.

#네이티브 전환 타임라인 유지하기

비교에서는 거리와 끝점을 명시하세요. 대기 구간과 상태별 easing을 포함한 실제 CSS transition을 사용하세요. 동작 줄이기에서는 duration과 delay를 모두 제어하고 인쇄는 즉시 상태를 유지하며 설정이 바뀌면 네이티브 transition이 끝나게 하세요. 재생 컨트롤은 명시적으로 참여한 데모만 일시정지해야 합니다.

#네이티브 애니메이션 단계 유지하기

fill을 설명할 때는 일반 값, 시작 keyframe, 끝 keyframe을 구분하세요. duration, delay, count를 명시하고 타이밍이나 방향 비교에는 같은 경로를 사용하세요. 전체 SVG를 유지하고 상태 텍스트는 정지시켜 두세요.

재생 컨트롤은 브라우저의 실제 CSS Animation 객체를 조작합니다. 완료된 일회성 타임라인을 다시 재생용으로 유지하고 기본 일시정지를 사용하며 수동 Play를 명시적인 동작 미리보기로 취급하세요. CSS play-state 예제는 자체 네이티브 checkbox와 focus 선택자를 가지므로 도구 모음이 학습 속성을 덮어쓰면 안 됩니다. 실행 규칙에는 screen 미디어와 동작 설정이 모두 필요합니다.

타임라인 표시는 경과 시간과 네이티브 진행률을, 속성 표시는 작성한 CSS 값을 보고합니다. keyframe 수준 easing이 특정 구간에서 요소 easing을 덮어쓸 수 있습니다. 두 표시 모두 성능 측정은 아닙니다.

#네이티브 입력과 접근성 유지하기

표시 HTML에 전체 네이티브 컨트롤, 옵션, 레이블, 설명을 유지하세요. appearance, accent, caret, cursor는 표현만 바꾸며 활성화나 비활성화 동작을 제공하지 않습니다. 실제 checkbox, 펼침, 폼 동작으로 결과를 관찰 가능하게 하세요. 독립 비교 견본은 ID와 함께 for, ARIA, 로컬 링크 참조를 범위 지정해 이름과 설명의 연결을 유지합니다.

포인터 적중 검사와 키보드 접근은 별개입니다. 실제 오버레이 기하와 상속되는 자식 규칙을 유지하고 포인터 입력과 키보드 활성화를 모두 테스트하세요. 예상 결과를 만들려고 크기나 선택 영역을 설정하지 말고 네이티브 크기 조절 핸들과 텍스트 선택 제스처를 관찰하세요.

touch-action은 터치 입력으로 테스트하세요. 마우스 드래그로는 제스처 중재를 재현할 수 없습니다. 이름 있는 스크롤 영역과 키보드 접근을 유지하고 resize와 공급업체 drag의 플랫폼 한계를 설명하세요. 네이티브 drag 표시는 dragstart와 dragend만 관찰하며 요소를 드래그 가능하게 만들거나 이벤트를 취소하지 않습니다. 공급업체 속성에 의존하는 모든 예제에는 명시적 지원 안내와 가능한 경우 이식 가능한 대안이 필요합니다.

#예제의 이식성 유지하기

DemoExample은 유틸리티 페이지와 섹션을 작성한 HTML·CSS 조각에 연결합니다. 표시 구조 자체가 동작 재현에 필요한 모든 전제 조건을 갖고 공유 레시피는 표현, 주석, 컨트롤을 제공합니다. Rust 렌더러가 실제 유틸리티 class를 컴파일합니다. 전체 설명과 프레임워크 중립 예제를 데모 옆에 두어 Markdown과 검색도 유용하게 유지하세요. 긴 HTML class 속성은 완전한 유틸리티 사이에서 줄바꿈해 학습 속성이 문서 열에서 읽히게 하세요. 하나의 class를 여러 줄로 나누지 마세요.

<DemoExample  page="clear"  section="clearing-both-left-and-right-floats"/>

#프로젝트 CSS를 사용하는 예제

미리보기에 프로젝트 토큰이나 관리 class가 필요하면 DemoConfiguredExample을 사용하세요. 같은 프로젝트 CSS와 리터럴 HTML이 실제 iframe, 보이는 코드, 전체 생성 CSS를 제공합니다. 각 미리보기는 자체 스타일시트를 가지며 주변 문서의 테마, 컴포넌트 class, 캐스케이드를 바꿀 수 없습니다.

<ProjectStyleExample name="tokens" /><ProjectStyleExample name="modes" /><ProjectStyleExample name="components" /><ProjectStyleExample name="layers" />

새 학습에는 실제 프로젝트 CSS와 전체 HTML을 제공하세요.

<DemoConfiguredExample name="project-spacing" title="A project spacing token"  source="@theme { --spacing-card: 1.5rem;  }"  html={'<article class="p-card">Collection details</article>'}  caption="p-card references --spacing-card." />

theme는 실제 문서 class 전환을 추가합니다. 해당 동작을 설명할 때는 프로젝트 CSS의 @theme 밖에 명시적인 .light, .dark 선택자를 정의하세요. 기본값에는 컨트롤이 없습니다. code={false}는 사용 링크로 전체 소스에 연결하는 갤러리 견본용입니다. 이들은 서버 컴포넌트이며 기존 iframe 컨트롤만 hydration됩니다. 리터럴 class를 가진 신뢰할 수 있는 사이트 작성 HTML을 사용하세요. 일반 문서 흐름에는 콘텐츠 크기 미리보기가 맞으며 제한된 스크롤, fixed 위치, 뷰포트 기하에는 DemoViewport를 직접 사용하세요.

shadow는 HTML과 생성 유틸리티 규칙을 실제 open shadow root 안에 배치합니다. 기반 변수는 iframe 문서에서 상속됩니다. 이 변형은 스타일 미리보기이며 프레임워크를 로드하거나 런타임 생명주기를 테스트하지 않습니다. 캡션에 구분을 유지하고 연결된 학습에 런타임 설정을 설명하세요.

<button type="button" class="px-md py-sm r-sm bg-blue fg-white">Hello Lit</button>

@layer theme {  :root,  :host {    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-blue: var(--color-blue-60)  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --radius-sm: .25rem;    --spacing-sm: .75rem;    --spacing-md: 1rem  }}@layer utilities {  .bg-blue {    background-color: var(--color-blue)  }  .r-sm {    border-radius: var(--radius-sm)  }  .fg-white {    color: var(--color-white)  }  .py-sm {    padding-block: var(--spacing-sm)  }  .px-md {    padding-inline: var(--spacing-md)  }}

<DemoConfiguredExample name="shadow-button" title="Shadow-root styling"  source="" html={'<button class="px-md py-sm bg-blue fg-white">Hello</button>'}  caption="Generated CSS inside a shadow root." shadow />

Lit 설치에 사용됩니다. 같은 기본 미리보기는 React와 Vue의 렌더링 마크업도 지원합니다.

실제 미리보기 없이 코드가 필요한 정식 규칙에는 ConfiguredExample을 사용합니다. 미리보기와 같은 네이티브 속성을 지원하며 전체 생성 CSS를 포함합니다.

#작동하는 레시피

학습에 맞는 모음을 여세요. 각 모음은 전체 소스와 실제 브라우저 동작을 유지합니다.