kbd element - by. UXKM

요약 설명

<kbd> 요소는 사용자가 입력하는 키보드 입력(keyboard input)을 나타내는 시맨틱 태그로, 명령어나 키 조합, 단축키 등을 텍스트 상에서 명확히 구분할 때 사용됩니다.
브라우저에서는 기본적으로 고정폭 글꼴로 표시되며, <code>, <samp>, <pre> 등과 함께 사용하면 사용자 입력과 시스템 출력의 역할을 시각적으로 구분할 수 있습니다.
문서나 튜토리얼에서 "Ctrl + C", "Enter", "npm start" 등 직접 입력해야 하는 내용을 강조할 때 유용합니다.

주요 역할 및 특징

  1. 키보드 입력 표현
    • <kbd>는 사용자가 키보드로 입력해야 하는 내용을 표시하는 데 적합합니다.
    • 예: Ctrl + C, ls -la, git commit -m "message".
  2. 고정폭 글꼴 사용

    브라우저에서 기본적으로 고정폭 글꼴(예: monospace)로 렌더링되어 입력 내용을 명확하게 구분할 수 있습니다.

  3. 의미론적 역할

    <kbd>는 단순한 스타일링이 아닌, 문맥적으로 "키보드 입력"을 나타내는 의미론적 요소입니다.

  4. 다른 요소와의 조합
    • <samp>와 함께 사용하여 키보드 입력과 시스템 출력을 구분할 수 있습니다.
    • 예: 입력: <kbd>ls</kbd> → 출력: <samp>file1.txt file2.txt</samp>.
  5. CSS 스타일링 가능
    • 기본 스타일 외에도 CSS를 사용하여 테두리, 배경색 등을 추가하여 실제 키보드 버튼처럼 시각적으로 꾸밀 수 있습니다.
    • 예: ↑, →, ↓, ←, enter, tab, esc, shift, ctrl, N, F,

CSS 기본 값

<kbd> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<kbd> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

단축키 표시

터미널 명령어 입력

<samp>와의 조합 (키보드 입력 및 출력 구분)

CSS로 스타일링된 키보드 입력

접근성을 고려한 키보드 입력

주의사항

  • <kbd>는 반드시 키보드 입력을 나타내는 용도로만 사용해야 하며, 단순히 고정폭 글꼴을 적용하는 목적으로 사용해서는 안 됩니다.
  • 사용자 입력(<kbd>), 시스템 응답(<samp>), 코드 출력(<code>)은 각각 다른 의미를 가지므로 용도에 맞게 사용해야 합니다.