---
title: '<kbd>: 키보드 입력 요소'
slug: Web/HTML/Element/kbd
tags:
  - Element
  - HTML
  - HTML text-level semantics
  - Reference
  - Web
translation_of: Web/HTML/Element/kbd
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;kbd&gt;</code> 요소</strong>는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.</span> 관례에 따라 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>



<table class="properties">
 <tbody>
  <tr>
   <th scope="row">콘텐츠 카테고리</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>모두</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>

<h2 id="사용_일람">사용 일람</h2>

<p><code>&lt;kbd&gt;</code> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.</p>

<ul>
 <li><code>&lt;kbd&gt;</code> 요소를 다른 <code>&lt;kbd&gt;</code> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 {{anch("입력 안의 키입력 나타내기")}} 예제를 참고하세요.</li>
 <li><code>&lt;kbd&gt;</code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 {{anch("재출력된 입력")}} 예제를 참고하세요.</li>
 <li>반면, <code>&lt;samp&gt;</code> 요소를 <code>&lt;kbd&gt;</code> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 {{anch("화면에 표시된 입력 옵션 나타내기")}} 예제를 참고하세요.</li>
</ul>

<div class="blockIndicator note">
<p>사용자 지정 CSS 파일을 정의해 <code>&lt;kbd&gt;</code> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.</p>
</div>

<h2 id="예제">예제</h2>

<h3 id="기본_예제">기본 예제</h3>

<pre class="brush: html">&lt;p&gt;&lt;kbd&gt;help mycommand&lt;/kbd&gt; 명령어를 입력해 "mycommand" 명령에 대한 문서를 확인하세요.&lt;/p&gt;</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample("기본_예제", 350, 80)}}</p>

<h3 id="입력_안의_키입력_나타내기">입력 안의 키입력 나타내기</h3>

<p>다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <code>&lt;kbd&gt;</code> 요소를 중첩할 수 있습니다. 바깥 <code>&lt;kbd&gt;</code>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <code>&lt;kbd&gt;</code>로 나타냅니다.</p>

<h4 id="스타일_없이">스타일 없이</h4>

<p>우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.</p>

<h5 id="HTML">HTML</h5>

<pre class="brush: html">&lt;p&gt;새로운 문서는 키보드 단축키
&lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;으로 만들 수 있습니다.&lt;/p&gt;
</pre>

<p>단축키 조합 전체를 하나의 <code>&lt;kbd&gt;</code>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <code>&lt;kbd&gt;</code>로 감싼 모습입니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong> 꼭 이렇게 중첩할 필요는 없습니다. 바깥 <code>&lt;kbd&gt;</code>를 생략하고, <code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;</code>로 작성하더라도 완벽하게 유효한 표기법입니다.</p>

<p>다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.</p>
</div>

<h5 id="결과_2">결과</h5>

<p>스타일 시트 없는 출력은 다음과 같습니다.</p>

<p>{{EmbedLiveSample("스타일_없이", 650, 80)}}</p>

<h4 id="스타일_적용">스타일 적용</h4>

<p>CSS를 좀 더해서 명확하게 바꿀 수 있습니다.</p>

<h5 id="CSS">CSS</h5>

<p>키보드 버튼을 렌더링 할 때 사용할 수 있는, <code>&lt;kbd&gt;</code> 요소의 <code>"key"</code> 스타일을 추가합니다.</p>

<pre class="brush: css">kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
</pre>

<h5 id="HTML_2">HTML</h5>

<p>HTML을 업데이트해 앞선 스타일을 적용합니다.</p>

<pre class="brush: html">&lt;p&gt;새로운 문서는 키보드 단축키
&lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;으로 만들 수 있습니다.&lt;/p&gt;
</pre>

<h5 id="결과_3">결과</h5>

<p>원하던 바로 그 결과입니다!</p>

<p>{{EmbedLiveSample("스타일_적용", 650, 80)}}</p>

<h3 id="재출력된_입력">재출력된 입력</h3>

<p><code>&lt;kbd&gt;</code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.</p>

<pre class="brush: html">&lt;p&gt;구문 오류가 발생하면, 오류 원인을 찾을 수 있도록
입력받은 명령을 다시 출력합니다.&lt;/p&gt;
&lt;blockquote&gt;
  &lt;samp&gt;&lt;kbd&gt;custom-git ad my-new-file.cpp&lt;/kbd&gt;&lt;/samp&gt;
&lt;/blockquote&gt;
</pre>

<p>결과는 다음과 같습니다.</p>

<p>{{EmbedLiveSample("재출력된_입력", 650, 120)}}</p>

<h3 id="화면에_표시된_입력_옵션_나타내기">화면에 표시된 입력 옵션 나타내기</h3>

<p>{{htmlelement("samp")}} 요소를 <code>&lt;kbd&gt;</code> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.</p>

<p>예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.</p>

<pre class="brush: html">&lt;p&gt;새로운 파일을 생성하려면, &lt;kbd&gt;
&lt;kbd&gt;&lt;samp&gt;파일&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;새 문서&lt;/samp&gt;&lt;/kbd&gt;
&lt;/kbd&gt; 메뉴를 선택하세요.

&lt;p&gt;파일의 이름을 입력한 후, &lt;kbd&gt;&lt;samp&gt;확인&lt;/samp&gt;&lt;/kbd&gt;을
누르는 걸 잊지 마세요.&lt;/p&gt;
</pre>

<p>흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 <code>&lt;kbd&gt;</code> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 <code>&lt;kbd&gt;</code>와 <code>&lt;samp&gt;</code>로 표시한 것을 볼 수 있습니다. <code>&lt;kbd&gt;</code> 안에 <code>&lt;samp&gt;</code>가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.</p>

<h4 id="결과_4">결과</h4>

<p>{{EmbedLiveSample("화면에_표시된_입력_옵션_나타내기", 650, 120)}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Expanded to include any user input, like voice input and individual keystrokes.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.kbd")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{htmlelement("code")}}</li>
</ul>