<kbd>: 키보드 입력 요소

시도해 보기

특성

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

사용 일람

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

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

예제

기본 예제

결과

입력 안의 키입력 나타내기

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

스타일 없이

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

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

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

스타일 적용

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

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

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

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

재출력된 입력

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

결과는 다음과 같습니다.

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

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

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

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

결과

명세

브라우저 호환성

Enable JavaScript to view this browser compatibility table.

같이 보기

• <code>