Code and Kbd

코드와 키는 네이티브 <code>, <pre>, <kbd> 요소입니다. 컴포넌트는 없습니다. Todae는 todae.base 레이어에서 code와 kbd contract 토큰으로 이 요소를 모두 꾸밉니다.

Code

인라인 <code>는 주변 텍스트 색을 그대로 쓰고 그 색으로 상자를 옅게 칠합니다. 그래서 링크나 기본 버튼 안에서도 똑같이 읽힙니다. 주변 텍스트보다 한 단계 작습니다. <pre>는 줄이 너무 길면 가로로 스크롤하는 블록이고, 그 안의 <code>는 자기 상자를 버립니다.

const plan = await getPlan();
render(<Billing plan={plan} />);

<Text>
  Call <code>getPlan()</code> before you render the billing page.
</Text>
<pre tabIndex={0} role="region" aria-label="Example code">
  <code>{source}</code>
</pre>

스크롤하는 <pre>에는 tabIndex={0}을 주어 키보드 사용자가 닿아서 스크롤할 수 있게 하고, 그 탭 위치에 이름이 있도록 role="region"과 aria-label을 주세요. code.font.family와 code.font.scale(주변 텍스트에 대한 크기 비율)은 인라인 코드와 코드 블록의 글꼴을 함께 정합니다. 인라인 상자는 code.tint(텍스트 색을 얼마나 쓰는지), code.radius, code.padding.x, code.padding.y로, 블록은 code.block 토큰으로 바꾸세요.

Kbd

<kbd>는 키캡으로 그려집니다. 단축키는 HTML이 정한 대로 바깥 <kbd> 안에 키마다 <kbd>를 하나씩 넣으세요. 바깥 것은 주변 색 그대로 평범한 텍스트로 남으므로 키를 잇는 +에는 상자가 없습니다.

<kbd>
  <kbd>Ctrl</kbd>+<kbd>K</kbd>
</kbd>

kbd.fg, kbd.bg, kbd.border, kbd.border-width, kbd.radius, kbd.font.family, kbd.font.scale, kbd.padding.x, kbd.padding.y로 바꾸세요.

언제 쓰나요

쓸 때: Code → 읽는 사람이 코드에서 입력하거나 읽는 이름, 값, 코드 조각. Kbd → 읽는 사람이 누르는 키나 단축키.

쓰지 않을 때: 상태나 개수를 나타내는 레이블 → Badge. Mono 글꼴만 필요한 텍스트 → 직접 만든 클래스. 그래야 스크린 리더와 검색이 코드로 다루지 않습니다.