<kbd> 태그는 키보드 입력을 정의할 때 사용됩니다. 사용자가 키보드로 직접 입력해야 하는 내용을 화면에 표시하고 싶을 때 유용하며, 대표적으로 복사를 위한 Ctrl+C, 종료를 위한 Esc와 같은 단축키를 나타낼 때 활용됩니다.
브라우저에서는 <kbd> 태그로 감싼 텍스트가 기본적으로 고정폭(monospace) 글꼴로 렌더링되어, 일반 텍스트와 시각적으로 구분됩니다. 필요하다면 CSS를 통해 스타일을 자유롭게 변경할 수도 있습니다.
예제
아래는 <kbd> 태그를 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>단축키</h2> <p>다음 단축키를 사용하세요 −</p> <p><strong>잘라내기</strong> − <kbd>CTRL</kbd>+<kbd>X</kbd></p> <p><strong>복사</strong> − <kbd>CTRL</kbd>+<kbd>C</kbd></p> <p><strong>붙여넣기</strong> − <kbd>CTRL</kbd>+<kbd>V</kbd></p> <p><strong>실행 취소</strong> − <kbd>CTRL</kbd>+<kbd>Z</kbd></p> </body> </html>
출력 결과
위 예제에서는 여러 가지 단축키를 설정했습니다. 그중 하나를 살펴보면 다음과 같습니다.
<strong>잘라내기</strong> − <kbd>CTRL</kbd>+<kbd>X</kbd>
단축키는 <kbd> 요소를 사용하여 표현합니다. 예를 들어 CTRL + X는 아래처럼 작성합니다.
<kbd>CTRL</kbd>+<kbd>X</kbd>
이처럼 <kbd> 태그를 사용하면 문서나 도움말 페이지에서 키보드 조작 안내를 명확하게 전달할 수 있습니다.