HTML에서 키보드 입력을 표시하는 <kbd> 태그 사용법

HTML <kbd> 태그란 무엇인가?

<kbd> 태그는 구문(phrase) 태그의 하나로, 사용자가 키보드로 입력하는 내용을 나타내는 텍스트를 표시할 때 사용합니다. 예를 들어 "Ctrl + C를 눌러 복사하세요"처럼 특정 키나 단축키를 안내해야 할 때 매우 유용합니다.

대부분의 브라우저는 <kbd> 요소를 고정폭(monospace) 글꼴으로 렌더링하기 때문에, 일반 본문 텍스트와 시각적으로 쉽게 구분됩니다.

HTML 문서에서는 다음과 같이 작성합니다:

<html>
<body>
  <p>키보드의 대표적인 특수 키는 <kbd>Ctrl</kbd>와 <kbd>Alt</kbd>입니다.</p>
</body>
</html>

위 코드는 화면에 아래와 같이 출력됩니다:

키보드의 대표적인 특수 키는 Ctrl와 Alt입니다.

기본 브라우저 스타일 대신 CSS를 활용하면 실제 키보드 키처럼 보이게 만들 수도 있습니다.

kbd {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 6px;
  background-color: #f7f7f7;
  font-family: monospace;
}

이처럼 용도에 맞는 시맨틱 태그를 선택하면 문서의 의미가 명확해지고, 접근성과 SEO 측면에서도 더 좋은 결과를 얻을 수 있습니다.