<kbd>
태그의 정의 및 사용법
<kbd>
태그는
입력 장치(키보드뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 입력 장치)로부터의 사용자의 텍스트 입력을 나타내는 태그입니다.
'keyboard'(키보드)의 약어로 만들어진 <kbd>
태그는 주로 사용자가 입력하는 키보드에서 어떤 키인가를 나타냅니다.
windows에서 복사하려면 Ctrl + C를 누르세요.
Mac OS에서 복사하려면 Cmd + C를 누르세요.
대부분의 브라우저에서는 관례상 기본적으로 고정폭(monospace) 계열의 글꼴을 나타내지만, CSS로 스타일을 추가해서 좀 더 시각적인 의미를 명확히 나타낼 수도 있습니다.
windows에서 복사하려면 Ctrl + C를 누르세요.
Mac OS에서 복사하려면 Cmd + C를 누르세요.
위 코드 예제처럼 스타일을 추가하면 <kbd>
태그의 의미를 시각적으로 좀 더 명확히 나타낼 수도 있습니다.
사용 방법 참고 사항
<kbd>
과 <kbd>
태그의 중첩 사용의 의미
<kbd>
태그가 <kbd>
태그 내에서 중첩되면 바깥쪽의 <kbd>
태그는 전체의 입력 블록을 나타내며 안쪽의 <kbd>
태그는 각 개별 키 입력을 나타냅니다. 좀 더 정밀하게 <kbd>
태그를 마크업하는 방법입니다.
꼭 이렇게 중첩해서 사용할 필요는 없습니다.
여기에서는 <kbd>
태그가 <kbd>
태그 내에서 중첩되게 사용해도 유효하다는 것을 나타내는 마크업 표기의 예일 뿐입니다.
<kbd>
내에서 <samp>
태그 사용의 의미
<kbd>
는 주로 사용자가 입력하는 키보드에서 어떤 키인가를 나타내지만, <kbd>
내에 <samp>
태그를 사용하면 시스템 출력에 따른 입력을 나타냅니다.
<samp>
태그는
컴퓨터 프로그램이나 시스템의 샘플이나 인용된 출력을 나타내는 태그입니다.
위의 예시 코드와 같이 <kbd>
태그는 키보드 입력 뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 사용자 입력도 포함합니다.
이처럼 정밀하게 마크업할 수 있지만 꼭 필요한 것은 아닙니다. 다음의 예제는 위의 예제와 똑같이 괜찮습니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<kbd>
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<kbd>
|
HTML Standard #the-kbd-element |