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

불러오는 중...

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

특성

전역 특성만 포함합니다.

사용 일람

<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>
실행 결과

불러오는 중...

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
지원12지원지원1*
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
MDN BCD에서 가져오는 데이터입니다.

같이 보기

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

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)