HTML <kbd>: 키보드 입력 요소

HTML <kbd> 요소는 사용자가 키보드, 음성 인식, 그 외의 기타 텍스트 입력 장치를 사용해 입력하는 텍스트를 나타냅니다.

<p>
  <kbd>Ctrl</kbd> +
  <kbd>Shift</kbd> +
  <kbd>R</kbd>을 눌러서 페이지를 다시 불러올 수 있습니다.
</p>

kbd {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 4px;
}

불러오는 중...

특성

전역 특성만 포함합니다.

사용 일람

<kbd>를 다른 요소와 함께 사용해서 좀 더 상세한 상황을 나타낼 수 있습니다.

<kbd>를 다른 <kbd> 안에 배치하면 바깥 <kbd>는 입력 전체를 나타내고, 안쪽 <kbd>는 키 하나하나의 입력을 나타낼 수 있습니다. “입력의 키보드 타이핑 나타내기” 예제를 참고하세요.
<kbd>를 <samp> 요소 안에 배치하면 시스템이 에코로 다시 출력한 사용자의 입력을 나타냅니다. “입력 에코 표현” 예제를 참고하세요.
반대로 <samp>를 <kbd>에 배치하는 경우에는 메뉴 이름, 메뉴 항목, 버튼 이름처럼 시스템이 출력한 텍스트를 기반으로 사용자가 입력하는 것을 나타냅니다. “화면에 표시된 입력 옵션” 예제를 참고하세요.

예제

입력의 키보드 타이핑 나타내기

다수의 키 입력을 구성된 전체 입력을 표현할 땐, 전체 입력을 나타내는 바깥 <kbd> 안에 각각의 키 입력이나 키 입력 조합 등 입력 단위을 나타내는 <kbd> 요소를 배치할 수 있습니다.

<p>
  복사는 <kbd><kbd>Ctrl</kbd> +
  <kbd>C</kbd></kbd>로 할 수 있습니다.
</p>

kbd {
  border-bottom: 3px double #ccc;
  display: inline-block;
  padding: 2px 4px;
}
kbd kbd {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
}

불러오는 중...

모든 입력을 이렇게 <kbd> 중첩으로 표현해야 할 필요는 없습니다. 즉, <kbd>Ctrl</kbd> + <kbd>C</kbd>만 사용해도 완벽하게 유효합니다. 현재 사용 중인 스타일에 따라 중첩 여부를 결정하세요.

입력 에코 표현

<kbd>를 <samp> 요소 안에 배치하면 시스템이 에코로 다시 출력한 사용자의 입력을 나타냅니다.

<p>수정 가능한 오류를 자동으로 바꾸려면 다음 명령어를 입력하세요:</p>
<blockquote>
  <samp><kbd>eslint . --fix</kbd></samp>
</blockquote>

불러오는 중...

화면에 표시된 입력 옵션

<samp>를 <kbd>에 배치하면 메뉴 이름, 메뉴 항목, 버튼 이름처럼 시스템이 출력한 텍스트를 기반으로 사용자가 입력하는 것을 나타냅니다.

<p>
  새로운 파일을 만들 땐 메뉴에서
  <kbd class="input">
    <kbd><samp>파일</samp></kbd>
    ⇒
    <kbd><samp>새 문서</samp></kbd>
  </kbd>를 선택하세요.
</p>
<p>
  <kbd><samp>확인</samp></kbd> 버튼까지 입력하는 것을 잊지 마세요.
</p>

kbd:not(.input) {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 4px;
}

불러오는 중...

명세

HTML Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`kbd`

MDN browser-compat-data

같이 보기

화면에 출력된 텍스트를 나타내는 <samp>