Style Gallery 실행 예제

용어·토큰·선택·문서 역할 비교

Terminology workbench

상단의 재생 버튼으로 실습을 실행할 수 있습니다.

실습 화면에서 직접 조작해 보세요. 화면을 벗어나거나 재생을 멈추면 실습도 닫히며, 다시 실행하면 처음부터 시작합니다.

이 예제의 코드

실행 화면의 HTML 소스입니다. 연결된 스타일·스크립트·미디어 경로는 원래 실행 위치를 기준으로 합니다.

코드 영역을 열면 원본을 불러옵니다.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

소스별 이름과 비교 축을 나누어 실제 사례를 선택합니다.

설계 도구·표준·플랫폼 지침·디자인 시스템의 주장을 같은 권위로 취급하지 않습니다.

Figma·DTCG·Fluent·Apple의 원래 이름과 역할을 함께 표시합니다.

값 문맥·조직·참조·의미 역할이 서로 다른 축임을 값 변화로 확인합니다.

partial_overlap와 not_comparable를 비교 축과 함께 표시합니다.

정식 레코드의 세 용어 쌍을 실행 가능한 비교 사례로 읽습니다.

출처 식별 → 역할 구분 → 축 선택 → 관계 판정 순서로 비교합니다.

그룹 변경은 문맥을 바꾸지 않고, 참조를 펼쳐도 색은 같지만 연결 정보는 사라집니다.

실제 DOM 포커스와 선택 상태가 독립적이라는 것을 조작합니다.

고정 속성 레코드와 크기 선호를 따르는 렌더링을 구분합니다.

동일한 저장 작업을 Tutorial·How-to·Reference·Explanation·Policy의 독자 목적으로 바꿔 봅니다.