콘텐츠 / code
Code
인라인 코드 토큰 <code>.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
인라인 코드 토큰 <code>.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
본문 사이에 코드/식별자를 표기하는 인라인 <code> 이다. 블록 + copy 버튼을 가진 CodeBlock 과 의미상 분리된다. variant 로 시각 강조(muted=정보, accent=강조), size 로 sm/md 를 고른다. default/md 는 modifier 없이 base 클래스만 붙는다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
인라인 강조
import { Code } from "@axe/ui";export function Example() { return ( <> <p><Code>npm install</Code> 로 설치하고 <Code variant="accent">axe ship</Code> 로 배포.</p> <Code variant="muted" size="sm">deprecated</Code> </> );}CSS-only (비-React)
<code class="axe-code-inline">npm install</code><code class="axe-code-inline axe-code-inline--accent">axe ship</code>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
variant | "default" | "muted" | "accent" | — | "default" | 시각 강조. muted=정보(약), accent=강조. default 는 modifier 없음. |
size | "sm" | "md" | — | "md" | 글자 크기. sm 만 `axe-code-inline--size-sm` 추가, md 는 base. |
...rest | React.HTMLAttributes<HTMLElement> | — | — | children/className 병합 후 나머지 속성은 <code> 로 전파. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-code-inline | stable | 인라인 <code> 루트(default 톤 포함). |
.axe-code-inline--muted | stable | muted 강조 변형. |
.axe-code-inline--accent | stable | accent 강조 변형. |
.axe-code-inline--size-sm | stable | small 크기 modifier. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
시맨틱 <code> — 별도 role 불요. 표시 전용, 상호작용 없음.
Notes
여러 줄/블록 코드에는 쓰지 말 것(인라인 전용) — 블록은 CodeBlock/ServerCodeBlock.
06 · Judgment