<kbd>: 키보드 입력 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<kbd> 요소는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.

시도해 보기

<p>  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an  MDN page.</p>

kbd {  background-color: #eee;  border-radius: 3px;  border: 1px solid #b4b4b4;  box-shadow:    0 1px 1px rgba(0, 0, 0, 0.2),    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;  color: #333;  display: inline-block;  font-size: 0.85em;  font-weight: 700;  line-height: 1;  padding: 2px 4px;  white-space: nowrap;}

콘텐츠 카테고리	플로우 콘텐츠,구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠	구문 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	모두
DOM 인터페이스	`HTMLElement`

사용 일람

<kbd> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.

<kbd> 요소를 다른<kbd> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의입력 안의 키입력 나타내기 예제를 참고하세요.
<kbd> 요소를<samp> 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의재출력된 입력 예제를 참고하세요.
반면,<samp> 요소를<kbd> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의화면에 표시된 입력 옵션 나타내기 예제를 참고하세요.

참고 :사용자 지정 CSS 파일을 정의해<kbd> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.

예제

기본 예제

html

<p>  <kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를  확인하세요.</p>

결과

화면에 표시된 입력 옵션 나타내기

<samp> 요소를<kbd> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.

예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.

html

<p>  새로운 파일을 생성하려면,  <kbd>    <kbd><samp>파일</samp></kbd    >⇒<kbd><samp>새 문서</samp></kbd>  </kbd>  메뉴를 선택하세요.</p><p>  파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd  >을 누르는 걸 잊지 마세요.</p>

흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의<kbd> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의<kbd>와<samp>로 표시한 것을 볼 수 있습니다.<kbd> 안에<samp>가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.