<kbd> 태그의 정의 및 사용법

<kbd> 태그는
입력 장치(키보드뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 입력 장치)로부터의 사용자의 텍스트 입력을 나타내는 태그입니다.

'keyboard'(키보드)의 약어로 만들어진 <kbd> 태그는 주로 사용자가 입력하는 키보드에서 어떤 키인가를 나타냅니다.

HTML 
<p>
    windows에서 복사하려면
    <kbd>Ctrl</kbd> + <kbd>C</kbd>를 누르세요.
</p>
<p>
    Mac OS에서 복사하려면
    <kbd>Cmd</kbd> + <kbd>C</kbd>를 누르세요.
</p>
브라우저에서 실제 표시된 모습

<kbd> 태그는 대부분의 브라우저에서는 기본적으로 고정폭(monospace) 계열의 글꼴을 나타내지만, CSS로 스타일을 추가해서 좀 더 시각적인 의미를 명확히 나타낼 수도 있습니다.

CSS 
kbd {
    color: #222;
    font-size: 0.8em;
    vertical-align: text-top;
    padding: 0.09em 0.7em;
    background-color: #e6e6e6;
    border-radius: 0.3em;
    box-shadow: 0 1px 1px #666;
}
CSS로 스타일을 추가해서 실제 표시된 모습

위 코드 예제처럼 스타일을 추가하면 <kbd> 태그의 의미를 시각적으로 좀 더 명확히 나타낼 수도 있습니다.

사용 방법 참고 사항

<kbd>과 <kbd> 태그의 중첩 사용의 의미

<kbd> 태그가 <kbd> 태그 내에서 중첩되면 바깥쪽의 <kbd> 태그는 전체의 입력 블록을 나타내며 안쪽의 <kbd> 태그는 각 개별 키 입력을 나타냅니다. 좀 더 정밀하게 <kbd> 태그를 마크업하는 방법입니다.

HTML 
<!--
<p>
    windows에서 복사하려면
    <kbd>Ctrl</kbd> + <kbd>C</kbd>를 누르세요.
</p>
-->

<!-- 위 코드를 정밀하게 마크업해 보았습니다. -->
<p>
    windows에서 복사하려면
    <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>를 누르세요.
</p>

꼭 이렇게 중첩해서 사용할 필요는 없습니다.
여기에서는 <kbd> 태그가 <kbd> 태그 내에서 중첩되게 사용해도 유효하다는 것을 나타내는 마크업 표기의 예일 뿐입니다.

<kbd> 내에서 <samp> 태그 사용의 의미

<kbd>는 주로 사용자가 입력하는 키보드에서 어떤 키인가를 나타내지만, <kbd> 내에 <samp> 태그를 사용하면 시스템 출력에 따른 샘플 입력을 나타냅니다.

<samp> 태그는
다른 프로그램 또는 컴퓨팅 시스템의 샘플(sample) 출력이나 인용된 출력을 나타냅니다.

HTML 
<p>
    파일을 열려면,
    <kbd>
        <kbd><samp>파일</samp></kbd>
        ⇒<kbd><samp>열기</samp></kbd>
    </kbd>
    메뉴를 선택하세요.
</p>
<p>
    파일을 저장하려면,
    <kbd>
        <kbd><samp>파일</samp></kbd>
        ⇒<kbd><samp>저장</samp></kbd>
    </kbd>
    메뉴를 선택하세요.
</p>

위의 예시 코드와 같이 <kbd> 태그는 키보드 입력 뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 사용자 입력도 해당됩니다.

이처럼 정밀하게 마크업할 수 있지만 꼭 필요한 것은 아닙니다. 다음의 예제는 위의 예제와 똑같이 괜찮습니다.

HTML 
<p>
    파일을 열려면,
    <kbd>파일</kbd>
    ⇒<kbd>열기</kbd>
    메뉴를 선택하세요.
 </p>
<p>
    파일을 저장하려면,
    <kbd>파일</kbd>
    ⇒<kbd>저장</kbd>
    메뉴를 선택하세요.
</p>

브라우저 호환성

kbd 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<kbd> 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

kbd 태그의 명세서 사양
명세서 사양
<kbd> HTML Standard
#the-kbd-element

참고 문헌

같이 보기