1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
---
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><kbd></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><kbd></code> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.</p>
<ul>
<li><code><kbd></code> 요소를 다른 <code><kbd></code> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 {{anch("입력 안의 키입력 나타내기")}} 예제를 참고하세요.</li>
<li><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 {{anch("재출력된 입력")}} 예제를 참고하세요.</li>
<li>반면, <code><samp></code> 요소를 <code><kbd></code> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 {{anch("화면에 표시된 입력 옵션 나타내기")}} 예제를 참고하세요.</li>
</ul>
<div class="blockIndicator note">
<p>사용자 지정 CSS 파일을 정의해 <code><kbd></code> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.</p>
</div>
<h2 id="예제">예제</h2>
<h3 id="기본_예제">기본 예제</h3>
<pre class="brush: html"><p><kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를 확인하세요.</p></pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("기본_예제", 350, 80)}}</p>
<h3 id="입력_안의_키입력_나타내기">입력 안의 키입력 나타내기</h3>
<p>다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <code><kbd></code> 요소를 중첩할 수 있습니다. 바깥 <code><kbd></code>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <code><kbd></code>로 나타냅니다.</p>
<h4 id="스타일_없이">스타일 없이</h4>
<p>우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.</p>
<h5 id="HTML">HTML</h5>
<pre class="brush: html"><p>새로운 문서는 키보드 단축키
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>으로 만들 수 있습니다.</p>
</pre>
<p>단축키 조합 전체를 하나의 <code><kbd></code>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <code><kbd></code>로 감싼 모습입니다.</p>
<div class="blockIndicator note">
<p><strong>참고:</strong> 꼭 이렇게 중첩할 필요는 없습니다. 바깥 <code><kbd></code>를 생략하고, <code><kbd>Ctrl</kbd>+<kbd>N</kbd></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><kbd></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"><p>새로운 문서는 키보드 단축키
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>으로 만들 수 있습니다.</p>
</pre>
<h5 id="결과_3">결과</h5>
<p>원하던 바로 그 결과입니다!</p>
<p>{{EmbedLiveSample("스타일_적용", 650, 80)}}</p>
<h3 id="재출력된_입력">재출력된 입력</h3>
<p><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.</p>
<pre class="brush: html"><p>구문 오류가 발생하면, 오류 원인을 찾을 수 있도록
입력받은 명령을 다시 출력합니다.</p>
<blockquote>
<samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
</pre>
<p>결과는 다음과 같습니다.</p>
<p>{{EmbedLiveSample("재출력된_입력", 650, 120)}}</p>
<h3 id="화면에_표시된_입력_옵션_나타내기">화면에 표시된 입력 옵션 나타내기</h3>
<p>{{htmlelement("samp")}} 요소를 <code><kbd></code> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.</p>
<p>예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.</p>
<pre class="brush: html"><p>새로운 파일을 생성하려면, <kbd>
<kbd><samp>파일</samp></kbd>⇒<kbd><samp>새 문서</samp></kbd>
</kbd> 메뉴를 선택하세요.
<p>파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd>을
누르는 걸 잊지 마세요.</p>
</pre>
<p>흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 <code><kbd></code> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 <code><kbd></code>와 <code><samp></code>로 표시한 것을 볼 수 있습니다. <code><kbd></code> 안에 <code><samp></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', '<kbd>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '<kbd>')}}</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', '<kbd>')}}</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>
|
