HTML에서 키보드 입력을 나타내는 텍스트를 표시하려면 <kbd> 태그를 사용합니다. HTML의 <kbd> 태그는 사용자가 키보드로 입력하는 내용을 정의하는 구문(phrase) 태그로, 브라우저에서는 일반적으로 고정폭(monospace) 글꼴로 렌더링됩니다.
kbd 태그란?
<kbd> 태그는 키보드 단축키나 사용자가 직접 눌러야 하는 키를 문서에 명확하게 표현할 때 유용합니다. 예를 들어 'Ctrl + C'처럼 여러 개의 키 조합을 안내할 때 각 키를 개별적으로 감싸면 시각적으로 구분하기 쉬워집니다.
사용 예제
다음 코드를 실행하여 <kbd> 태그의 실제 동작을 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML kbd Tag</title> </head> <body> <p>이전에 닫은 탭을 다시 열려면 <kbd>Ctrl</kbd>+ <kbd>Shift</kbd>+ <kbd>T</kbd> 키를 누르세요. </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 'Ctrl + Shift + T' 부분이 고정폭 글꼴로 표시되어, 일반 텍스트와 키보드 입력이 자연스럽게 구분되는 것을 확인할 수 있습니다.
참고 사항
<kbd> 태그는 CSS와 함께 사용하면 스타일을 더욱 세밀하게 조정할 수 있습니다. 예를 들어 배경색과 테두리를 추가해 실제 키보드 버튼처럼 보이게 만들 수도 있어, 기술 문서나 튜토리얼 작성 시 가독성을 크게 높여줍니다.