<kbd>: 키보드 입력 요소

시도해 보기

<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;
}

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

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

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

예제

기본 예제

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

ê²°ê³¼

입력 안의 키입력 나타내기

다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <kbd> 요소를 중첩할 수 있습니다. 바깥 <kbd>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <kbd>로 나타냅니다.

스타일 없이

우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.

HTML

<p>
  새로운 문서는 키보드 단축키 <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
  >으로 만들 수 있습니다.
</p>

단축키 조합 전체를 하나의 <kbd>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <kbd>로 감싼 모습입니다.

ê²°ê³¼

스타일 시트 없는 출력은 다음과 같습니다.

스타일 적용

CSS를 좀 더해서 명확하게 바꿀 수 있습니다.

CSS

키보드 버튼을 렌더링 할 때 사용할 수 있는, <kbd> 요소의 "key" 스타일을 추가합니다.

kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

HTML을 업데이트해 앞선 스타일을 적용합니다.

<p>
  새로운 문서는 키보드 단축키
  <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd
  >으로 만들 수 있습니다.
</p>

ê²°ê³¼

원하던 바로 그 결과입니다!

재출력된 입력

<kbd> 요소를 <samp> 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.

<p>
  구문 오류가 발생하면, 오류 원인을 찾을 수 있도록 입력받은 명령을 다시
  출력합니다.
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

결과는 다음과 같습니다.

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

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

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

<p>
  새로운 파일을 생성하려면,
  <kbd>
    <kbd><samp>파일</samp></kbd
    >⇒<kbd><samp>새 문서</samp></kbd>
  </kbd>
  메뉴를 선택하세요.
</p>

<p>
  파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd
  >을 누르는 걸 잊지 마세요.
</p>

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

ê²°ê³¼

명세

브라우저 호환성

같이 보기

• <code>