CSS API 참조

CSS API 참조는 토큰 시스템 위에 구축된 pantoken의 클래스 기반 컴포넌트 계층을 다룹니다: 컴포넌트, 유틸리티, 글로벌 규칙 및 선언.

컴포넌트

이름	클래스	요약
agent-shell	.instui-agent-shell	AI 에이전트를 위한 표면 컨테이너.
alert	.instui-alert	상태 색상 바와 공유 아이콘 세트의 마스크된 상태 글리프를 가진 인라인 메시지.
avatar	.instui-avatar	이니셜 또는 이미지를 표시하는 사용자 아바타로 기본적으로 원형입니다.
badge	.instui-badge	대상 모서리에 배치된 작은 카운트 또는 상태 도트.
banner	.instui-banner	페이지 수준 또는 문맥 내 공지를 위한 닫기 가능한 아이콘 메시지 표면.
billboard	.instui-billboard	큰 빈 상태 또는 행동 유도 블록: 히어로 아이콘/이미지, 헤딩, 메시지로 구성됩니다.
breadcrumb	.instui-breadcrumb	구분자가 있는 브레드크럼 궤적; 마지막 크럼이 현재 페이지입니다.
breadcrumb.link	li	크럼(InstUI Breadcrumb.Link), 부모의 <ol> 안에 있는 <li>; 마지막 것이 현재 페이지입니다.
button	.instui-button	토큰 팔레트에서 스타일링된 접근성 있는 액션 컨트롤; 기본값은 primary입니다.
byline	.instui-byline	타이틀과 설명 옆에 배치된 미디어 오브젝트: 히어로 피겨.
calendar	.instui-calendar	네비게이션, 요일 헤더 및 일 셀을 가진 정적 월간 그리드.
calendar.day	.day	하루 셀(InstUI Calendar.Day); -today, -selected, 및 -outside-month는 그 상태를 표시합니다.
card	.instui-card	임의의 콘텐츠를 수용하는 표면 컨테이너.
checkbox	.instui-checkbox	네이티브 체크박스와 레이블, 또는 -variant-toggle를 통한 스위치.
close-button	.instui-close-button	자체 × 글리프를 그리는 투명 아이콘 버튼, 세 가지 크기와 온-컬러 변형을 가집니다.
context-view	.instui-context-view	케어트가 있는 상승형 콜아웃으로 어떤 쪽에도 위치시킬 수 있으며 네이티브 [popover]로 작동합니다.
drawer-layout	.instui-drawer-layout	접이식 사이드 트레이와 기본 스크롤 가능한 콘텐츠 창이 있는 분할 레이아웃.
drawer-layout.content	.content	트레이 옆에 남은 공간을 채우는 주요 콘텐츠 창.
drawer-layout.tray	.tray	메인 콘텐츠 옆의 사이드 패널로, 선택적 오버레이 및 트레이 유사 표면 수식자가 있습니다.
file-drop	.instui-file-drop	호버, 수락 및 거부 상태를 가진 파일 드롭존.
form-field	.instui-form-field	폼 필드 래퍼: 레이블, 그에 속한 컨트롤들, 인라인/필수/읽기전용 레이아웃.
form-field-group	.instui-form-field-group	<fieldset> 전설을 가진 그룹으로 열 또는 인라인 레이아웃과 구성 가능한 간격을 제공합니다.
form-field-messages	.instui-form-field-messages	필드 도움말 및 검증 메시지 — 힌트, 오류, 성공, 스크린리더 전용 — 오류와 성공 시 글리프를 표시합니다.
heading	.instui-heading	-level-h1에서 -level-h6까지의 헤딩 타이포그래피.
img	.instui-img	디스플레이, 크롭 및 이펙트 수식자가 쌓이는 스타일된 <img>.
in-place-edit	.instui-in-place-edit	포커스되기 전까지는 텍스트로 읽히고 포커스 시 입력 크롬을 표시하는 [contenteditable].
input-group	.instui-input-group	선행 및 후행 아이콘 슬롯이 있는 텍스트 입력의 외관(facade).
link	.instui-link	크기, 다크 배경용 역변형, 인라인 또는 무스타일 형식을 가진 스타일된 하이퍼링크.
list	.instui-list	토큰 기반 항목 간격을 가진 리스트.
list.item	.instui-list	리스트 항목(InstUI List.Item).
mask	.instui-mask	그 위치 지정된 부모를 채우고 내용 중앙에 배치하는 인플로우 오버레이 — 예: 카드 위의 스피너. 모달의 경우 네이티브 <dialog>(그의 ::backdrop가 마스크)를 권장합니다. 이 수식자들은 전역에서도 사용 가능(베어 또는 다른 컴포넌트에 체인) — mask 글로벌 유틸리티를 참조하세요.
menu	.instui-menu	항목, 그룹 및 구분자가 있는 드롭다운 표면.
menu.group	.group	레이블이 붙은 그룹 헤딩(InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	메뉴 항목(InstUI Menu.Item); -disabled, -highlighted 또는 -active/[aria-checked]를 추가하세요.
menu.separator	.separator	항목 사이의 구분 규칙(InstUI Menu.Separator).
metric	.instui-metric	레이블이 붙은 통계 — 캡션 위의 큰 값.
modal	.instui-modal	대화상자 표면(네이티브 <dialog>에서 작동); 헤더/바디/푸터 파트.
modal.body	.body	콘텐츠 영역(InstUI Modal.Body); 단독인 <img>는 풀-블리드로 갑니다.
modal.footer	.footer	액션 행(InstUI Modal.Footer).
modal.header	.header	타이틀 행(InstUI Modal.Header).
number-input	.instui-number-input	± 스피너 칼럼이 있는 숫자 입력 외관(facade).
pagination	.instui-pagination	페이지 네비게이션: 번호 매긴 페이지, 첫/이전/다음/마지막 화살표 및 간격을 위한 생략부호.
pagination.page	.page	페이지 링크 또는 버튼(InstUI Pagination.Page); 현재 페이지는 [aria-current]를 가집니다.
pill	.instui-pill	컴팩트 상태 레이블; 공유 -icon-<name> 형식으로 선행 글리프를 추가하세요.
popover	.instui-popover	네이티브 [popover]용으로 엘리베이티드 표면이며 CSS 앵커 포지셔닝으로 위치시킵니다.
progress	.instui-progress	컬러 미터, 크기 및 선택적 값 레이블을 갖춘 결정형 진행 바.
progress-circle	.instui-progress-circle	--value 및 --value-max 커스텀 프로퍼티로 구동되는 원형 진행 링.
radio	.instui-radio	네이티브 라디오 버튼과 레이블.
radio-input-group	.instui-radio-input-group	단일 선택 라디오 <fieldset>로, 일반형 또는 연결된 분할 토글로 사용 가능.
range-input	.instui-range-input	역방향 값 버블을 가진 스타일된 레인지 슬라이더.
rating	.instui-rating	채워진 글리프와 비어 있는 글리프가 있는 별점 평가와 선택적 숫자 레이블.
side-nav-bar	.instui-side-nav-bar	아이콘 위에 레이블이 있는 항목들의 수직 내비게이션 레일로, 최소화된 아이콘 전용 모드 포함.
side-nav-bar.item	.item	네비게이션 항목(InstUI SideNavBar.Item); -selected이 활성 항목을 표시함.
simple-select	.instui-simple-select	텍스트 입력의 상태와 크기에 맞춘 캐럿이 있는 스타일된 네이티브 <select>.
spinner	.instui-spinner	애니메이션 로딩 링; role="status"와 aria-label을 지정해 사용.
table	.instui-table	th와 td용 스타일된 데이터 테이블 및 선택적 캡션, 호버, 고정, 카드형 스택 레이아웃 지원.
table.body	tbody	테이블의 데이터 행 그룹(InstUI Table.Body).
table.cell	td	데이터 셀(InstUI Table.Cell).
table.col-header	th	열 헤더 셀(InstUI Table.ColHeader); 기본 th 스타일이 있으며 th[scope="row"]의 경우 table.row-header로 대체됨.
table.head	thead	테이블의 헤더 행 그룹(InstUI Table.Head).
table.row	tr	테이블 행(InstUI Table.Row).
table.row-header	th[scope="row"]	행 헤더 셀(InstUI Table.RowHeader); 열 헤더 토큰이 아닌 행 헤더 토큰에서 스타일링됨.
tabs	.instui-tabs	탭 패널 세트: 탭 목록, 선택 가능한 탭들, 그리고 각 탭의 패널들.
tabs.panel	.panel	탭의 콘텐츠 패널(InstUI Tabs.Panel).
tabs.tab	.tab	단일 탭 버튼(InstUI Tabs.Tab, 부모 Tabs의 탭 목록으로 구성); -selected가 활성 탭을 표시함.
tag	.instui-tag	키워드나 필터용 인라인 칩.
text	.instui-text	크기, 굵기, 색상 및 스타일 수식어가 있는 본문 텍스트 타이포그래피.
text-area	.instui-text-area	텍스트 입력과 동일한 상태와 크기를 갖춘 스타일된 크기 조절 가능한 네이티브 <textarea>.
text-input	.instui-text-input	스타일된 네이티브 <input> — 브라우저가 픽커를 제공하는 date, time, datetime-local 포함 — 유효성 검사 상태와 크기 지원.
toggle-details	.instui-toggle-details	회전하는 체브런을 가진 스타일된 네이티브 <details> 공개(disclosure).
toggle-group	.instui-toggle-group	<details> 기반의 테두리형 공개(disclosure): 체브런 요약 행과 접을 수 있는 콘텐츠.
tooltip	.instui-tooltip	CSS 호버 및 포커스 툴팁 버블로, 어느 쪽에나 위치시킬 수 있음.
tray	.instui-tray	모서리에 고정되어 어느 쪽에서든 슬라이드로 들어오는 패널; 네이티브 [popover] 또는 <dialog>.
tree-browser	.instui-tree-browser	회전 체브런이 있는 중첩된 컬렉션과 리프 항목의 공개 트리(disclosure tree).
view	.instui-view	View 프리미티브: 배경, 테두리, 반경, 그림자, 디스플레이, 위치, 오버플로우, 커서에 대한 키-값 수식어를 가진 중립 박스. 이 수식어들은 전역에서도 사용 가능(단독 또는 다른 컴포넌트에 체인) — background/border/shadow/display/position/overflow/cursor 유틸리티 참조.

유틸리티

이름	클래스	요약
color	.--text-danger	시맨틱 색상 유틸리티: 큐레이션된 시맨틱 팔레트용 .--bg-<name>, .--text-<name>(별칭 .--color-<name>), 및 .--border-<name>. 각 항목은 컴포넌트 부착 별칭 수식어도 가짐(예: 어떤 .instui-<component> 위의 -bg-danger).
cursor	.--cursor-pointer	cursor을 구성 가능한 전역 클래스 — .--cursor-<value> — 로 사용 가능; 단독 또는 다른 컴포넌트에 체인(.instui-button.--cursor-pointer).
gap	.--gap-md	간격 스케일의 플렉스/그리드 gap 유틸리티, 짧은(--gap-sm) 또는 긴(--gap-small) 표기법. 단독 또는 다른 컴포넌트에 체인(.instui-view.--gap-sm)으로 사용 가능 — 이미 컴포넌트별 토큰으로 자체 gap를 설정한 컴포넌트는 이를 덮어쓸 수 있음.
icon	.instui-icon	아이콘 시스템: .instui-icon 크기와 요소 앞에서 글리프를 마스킹하는 공유 -icon-<name> 페인터(currentColor) 포함.
layout	.--display-flex	디스플레이 및 텍스트 정렬 유틸리티 — .--display-<value> 및 .--text-align-<value> — 구성 가능한 전역 클래스로, 단독 또는 다른 컴포넌트에 체인하여 사용 가능.
maskglobal	.--mask-overlay	mask 컴포넌트의 오버레이 수식어의 전역 이중 복사본 — --mask-overlay, --mask-fullscreen, --mask-blur — 단독 또는 다른 컴포넌트에 체인 가능, .instui-mask 요소로 래핑하지 않아도 됨.
overflow	.--overflow-x-hidden	overflow-x/overflow-y을 구성 가능한 전역 클래스 — .--overflow-x-<value> / .--overflow-y-<value> — 로 사용 가능; 단독 또는 다른 컴포넌트에 체인.
position	.--position-relative	position을 구성 가능한 전역 클래스 — .--position-<value> — 로 사용 가능; 단독 또는 다른 컴포넌트에 체인(.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	테마화된 브레이크포인트 스케일에 따른 뷰포트 또는 컨테이너 너비 기반의 표시/숨김 클래스.
screen-reader-content	.instui-screen-reader-content	보조 기술에는 남기고 시각적으로는 숨기는 콘텐츠(표준 클립 패턴).
spacing	.--p-md	여백(margin) 및 패딩 유틸리티 — 간격 스케일의 .--m<side>-<step> / .--margin-<side>-<step> 및 .--p<side>-<step> / .--padding-<side>-<step> (측면 t/b/s/e/x/y 또는 없음, 축약형 또는 전체형 표기 가능 — 예: --mb-sm과 --margin-bottom-small은 동일한 규칙입니다; margin은 또한 auto을 허용합니다). 단독으로 사용하거나 어떤 컴포넌트에 체이닝해서도 사용 가능(예: class="instui-view --mb-sm").
stacking	.--stack-topmost	z-인덱스 깊이 유틸리티 — .--stack-<level> (deepest, below, above, topmost) — 단독으로 또는 어떤 컴포넌트에 체이닝하여 사용 가능하므로 레이어가 수동으로 조정한 숫자가 아닌 예측 가능한 방식으로 쌓입니다.
transition	.instui-transition.-transition-fade-entering	Transition 컴포넌트용 애니메이션 상태 클래스 — .instui-transition 및 상태 클래스들(-transition-fade-entering, -transition-scale-exited 등) — 단독 또는 컴포넌트에 체이닝하여 사용 가능.
truncate	.--truncate	라인 클램핑으로 제어되는 말줄임(ellipsis) 자르기 — --lines로 제어하며 단독 또는 어떤 컴포넌트에 체이닝하여 사용 가능(.instui-button.--truncate).
visual-debug	.-with-visual-debug	레이아웃 디버깅을 위한 윤곽선: 어떤 요소에든 결합된 .-with-visual-debug를 적용하면 박스와 그 직계 자식들이 윤곽 표시되어 레이아웃 구조를 한눈에 볼 수 있습니다.

규칙

이름	클래스	요약
base	*	선택적 전역 리셋: box-sizing, 페이지 표면, 기본 텍스트 색상 및 폰트, color-scheme, 그리고 링크 기본값.
prose	:where(body)	원시 HTML에 대한 타이포그래피 기본값 — 제목, 문단, 목록, 링크, 코드 — 임포트되는 곳 어디에든 자동 적용(기본 :where(body)); 다른 콘텐츠 루트를 대상으로 하려면 options.scope을 전달하세요(예: .vp-doc).

Plugins

이름	클래스	요약
logos	.logos	CSS 이미지 토큰으로서의 Instructure 제품 로고: --instui-logo-<product>-<layout>-<mode>는 데이터 URI SVG를 담고 있으므로 예: background-image: var(--instui-logo-canvas-horizontal-color)로 로고를 표시할 수 있습니다.
primitives	.instui-bg-primitive-color-white	원시 프리미티브 팔레트를 위한 선택적 유틸리티 클래스: .instui-bg-/fg-/border-primitive-color-<name>는 프리미티브 색상 토큰에서 색을 칠하고, font-family/font-weight는 프리미티브 폰트 토큰용 유틸리티입니다. 시맨틱 유틸리티에서는 제외하여 그쪽 오버라이드는 시맨틱 전용으로 유지됩니다.
visual-debug	.-with-visual-debug	레이아웃 디버깅을 위한 윤곽선: 어떤 요소에든 결합된 .-with-visual-debug를 적용하면 박스와 그 직계 자식들이 윤곽 표시되어 레이아웃 구조를 한눈에 볼 수 있습니다.

layout

이름	클래스	요약
callout	div[class~="instui-callout"]	짧은 알림이나 메모용 인라인 정보 알림.
hero	div[class~="instui-hero"]	제목, 부제목 및 선택적 배경 이미지를 가진 전체 너비 헤더 섹션.
page-layout	div[class~="instui-page-layout"]	헤더, 사이드바 및 메인 콘텐츠를 갖춘 표준 3열 페이지 레이아웃.
rubric-note	div[class~="instui-rubric-note"]	루브릭 카테고리와 점수 표시기가 포함된 구조화된 노트.
testimonial	div[class~="instui-testimonial"]	출처와 선택적 이미지를 포함한 인용문 또는 추천사 표시.
two-column	div[class~="instui-two-column"]	왼쪽과 오른쪽 콘텐츠 영역이 있는 2열 레이아웃.
wrapper	body[class~="instui-display-flex"]	앱 셸 행: 사이드 내비게이션, 헤더가 있는 컨테이너, 및 선택적 패널.