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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
|
---
title: itemprop
slug: Web/HTML/Global_attributes/itemprop
tags:
- Attribute
- Global attribute
- HTML
- HTML Microdata
- Microdata
- Reference
- 마이크로데이터
translation_of: Web/HTML/Global_attributes/itemprop
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><code><strong>itemprop</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템에 속성을 추가할 때 사용합니다. 모든 요소는 <code>itemprop</code> 특성을 가질 수 있으며, 하나의 <code>itemprop</code>은 키-값 쌍으로 구성됩니다. 각각의 키-값 쌍은 <strong>속성</strong>이라고 부르고, 하나 이상의 속성으로 구성한 그룹을 <strong>아이템</strong>이라고 부릅니다. 속성의 값으로는 문자열이나 {{glossary("URL")}}을 사용할 수 있고, {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} 등 다양한 요소와 연관지을 수 있습니다.</p>
<h2 id="예제">예제</h2>
<p>다음 예제는 일련의 요소에 <code>itemprop</code> 특성을 표기한 소스 코드와, 그 결과인 구조화된 데이터를 나타내는 표를 보입니다.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div itemscope itemtype ="http://schema.org/Movie">
<h1 <strong>itemprop="name"</strong>>Avatar</h1>
<span>Director:
<span <strong>itemprop="director"</strong>>James Cameron</span>
(born August 16, 1954)</span>
<span <strong>itemprop="genre"</strong>>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html"
<strong>itemprop="trailer"</strong>>Trailer</a>
</div></pre>
<h3 id="구조화된_데이터">구조화된 데이터</h3>
<table class="standard-table">
<tbody>
<tr>
<td colspan="1" rowspan="2"></td>
<th colspan="2" rowspan="1"><strong>Item</strong></th>
</tr>
<tr>
<th><strong>itemprop name</strong></th>
<th><strong>itemprop value</strong></th>
</tr>
<tr>
<td>itemprop</td>
<td>name</td>
<td>Avatar</td>
</tr>
<tr>
<td>itemprop</td>
<td>director</td>
<td>James Cameron</td>
</tr>
<tr>
<td>itemprop</td>
<td>genre</td>
<td>Science fiction</td>
</tr>
<tr>
<td>itemprop</td>
<td>trailer</td>
<td>../movies/avatar-theatrical-trailer.html</td>
</tr>
</tbody>
</table>
<h2 id="속성">속성</h2>
<p>속성은 문자열이나 {{glossary("URL")}}을 값으로 가질 수 있습니다. 문자열 값으로 URL을 지정할 경우 {{htmlelement("a")}}와 {{htmlattrxref("href", "a")}} 특성, {{htmlelement("img")}} 요소와 {{htmlelement("src", "img")}} 특성, 또는 그 외의 외부 리소스를 연결하는 기타 요소를 사용해 표현합니다.</p>
<h3 id="문자열을_값으로_갖는_세_개의_속성">문자열을 값으로 갖는 세 개의 속성</h3>
<pre class="brush: html notranslate"><div itemscope>
<p>My name is
<span itemprop="name">Neil</span>.</p>
<p>My band is called
<span itemprop="band">Four Parts Water</span>.</p>
<p>I am
<span itemprop="nationality">British</span>.</p>
</div></pre>
<h3 id="값이_URL인_image_속성">값이 URL인 "image" 속성</h3>
<pre class="brush: html notranslate"><div itemscope>
<img itemprop="image"
src="google-logo.png" alt="Google">
</div></pre>
<p>숫자와 문자로 구성된 긴 문자열처럼 사람이 쉽게 읽고 이해할 수 없는 문자열이 값일 경우, {{htmlelement("data")}} 요소의 {{htmlattrxref("value", "data")}} 특성 값을 사용해 나타내고, 사람이 보다 쉽게 읽을 수 있도록 표현한 문자열을 <code><data></code>의 콘텐츠로 지정할 수 있습니다. (<code><data></code> 콘텐츠는 구조화된 데이터의 일부가 아닙니다. 아래 예제를 참고하세요.)</p>
<h3 id="값이_상품_ID인_속성을_가진_아이템">값이 상품 ID인 속성을 가진 아이템</h3>
<p>ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있는 텍스트로는 ID 대신 상품 ID를 사용합니다.</p>
<pre class="brush: html notranslate"><h1 itemscope>
<data itemprop="product-id"
value="9678AOU879">The Instigator 2000</data>
</h1></pre>
<p>숫자 값으로는 {{htmlelement("meter")}} 요소와 그 {{htmlattrxref("value", "meter")}} 특성을 대신 사용할 수 있습니다.</p>
<h3 id="<meter>_요소"><code><meter></code> 요소</h3>
<pre class="brush: html notranslate"><div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Panasonic White
60L Refrigerator</span>
<img src="panasonic-fridge-60l-white.jpg" alt="">
<div itemprop="aggregateRating"
itemscope
itemtype="http://schema.org/AggregateRating">
<meter itemprop="ratingValue"
min=0 value=3.5 max=5>Rated 3.5/5</meter>
(based on <span
itemprop="reviewCount">11</span>
customer reviews)
</div>
</div></pre>
<p>비슷하게, 날짜와 시간 관련 데이터는 {{htmlelement("time")}}과 그 {{htmlattrxref("datetime", "time")}} 특성을 사용할 수 있습니다.</p>
<h3 id="날짜_값인_생년월일_속성을_가지는_아이템">날짜 값인 생년월일 속성을 가지는 아이템</h3>
<pre class="brush: html notranslate"><div itemscope>
I was born on <time
itemprop="birthday"
datetime="2009-05-10">May 10th 2009</time>.
</div></pre>
<p>속성을 선언하는 요소에 <code>itemscope</code> 특성을 지정해, 이름-값 쌍의 그룹으로 만들 수도 있습니다. 각 값은 문자열이거나, 이름-값 쌍 그룹(즉, 아이템)이어야 합니다.</p>
<h3 id="사람을_나타내는_바깥쪽_아이템과_밴드를_나타내는_안쪽_아이템">사람을 나타내는 바깥쪽 아이템과 밴드를 나타내는 안쪽 아이템</h3>
<pre class="brush: html notranslate"><div itemscope>
<p>Name:
<span itemprop="name">Amanda</span></p>
<p>Band:
<span itemprop="band" itemscope>
<span itemprop="name">Jazz Band</span>
(<span itemprop="size">12</span>
players)</span></p>
</div></pre>
<p>위의 코드에서 바깥쪽 아이템은 <code>name</code>과 <code>band</code> 두 개의 속성을 가지고 있습니다. <code>name</code>은 <code>Amanda</code>이고 <code>band</code>는 그 자체로 <code>name</code>과 <code>size</code>라는 두 가지 속성을 가진 아이템입니다. 밴드의 <code>name</code>은 <code>Jazz Band</code>이고, <code>size</code>는 <code>12</code>입니다. 이 예제에서, 바깥쪽 아이템은 최상위 마이크로데이터 아이템입니다. 다른 아이템의 일부가 아닌 아이템을 최상위 마이크로데이터 아이템이라고 합니다.</p>
<h3 id="모든_속성이_아이템에서_분리된_경우">모든 속성이 아이템에서 분리된 경우</h3>
<p>이 예제는 앞의 예제와 동일하지만 모든 속성이 아이템에서 분리되어 있습니다.</p>
<pre class="brush: html notranslate"><div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name:
<span itemprop="name">Amanda</span></p>
<div id="b"
itemprop="band"
itemscope itemref="c"></div>
<div id="c">
<p>Band:
<span itemprop="name">Jazz Band</span></p>
<p>Size:
<span itemprop="size">12</span> players</p>
</div></pre>
<p>이 예제의 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 두 가지 속성을 가지고 있는데, "name"은 "Amanda"로 설정했고, "band"는 다른 아이템으로 연결되어 있습니다. "band"가 가리킨 아이템은 또 다시 두 가지 속성을 가지고 있는데, "name"은 "Jazz Band"이고, "size"는 "12"입니다.</p>
<p>아이템은 같은 이름을 가지나 서로 다른 값을 갖는 다수의 속성을 가질 수 있습니다.</p>
<h3 id="두_가지_맛의_아이스크림">두 가지 맛의 아이스크림</h3>
<pre class="brush: html notranslate"><div itemscope>
<p>Flavors in my favorite ice cream:</p>
<ul>
<li itemprop="flavor">Lemon sorbet</li>
<li itemprop="flavor">Apricot sorbet</li>
</ul>
</div></pre>
<p>이 예제는 두 가지 프로퍼티를 가지고 있는 아이템을 보여주고 있는데, 두 프로퍼티 모두 "flavor"라는 이름을 가지고 "Lemon sorbet"와 "Apricot sorbet"라는 값을 각각 가지고 있습니다.</p>
<p>어떤 속성을 가진 요소는 프로퍼티 중 일부가 동일한 값을 가질 때 중복을 피하기 위해 한 번에 여러 프로퍼티를 가질 수도있습니다(An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value).</p>
<h3 id="값이_모두_orange인_favorit-color와_favorite-fruit_두_프로퍼티를_가진_아이템">값이 모두 "orange"인 "favorit-color"와 "favorite-fruit" 두 프로퍼티를 가진 아이템</h3>
<pre class="brush: html notranslate"><div itemscope>
<span
itemprop="favorite-color
favorite-fruit">orange</span>
</div></pre>
<div class="note">
<p>참고: 마이크로 데이터와 마이크로 데이터가 표시된 문서의 컨텐츠 사이에는 아무런 연관관계가 없습니다.</p>
</div>
<h3 id="구조화된_데이터를_두_가지_다른_방식으로_표시하기">구조화된 데이터를 두 가지 다른 방식으로 표시하기</h3>
<p id="There_is_no_semantic_difference_between_the_following_two_examples">다음의 두 예제는 의미상 차이는 없습니다.</p>
<pre class="brush: html notranslate"><figure>
<img src="castle.jpeg">
<figcaption><span
itemscope><span
itemprop="name">The Castle</span></span>
(1986)</figcaption>
</figure></pre>
<pre class="brush: html notranslate"><span itemscope><meta
itemprop="name"
content="The Castle"></span>
<figure>
<img src="castle.jpeg">
<figcaption>The Castle
(1986)</figcaption>
</figure></pre>
<p>두 예제 모두 caption을 가지고 있으며 figure와 전혀 관계가 없고 "name" 이라는 이름과 "The Castle"이라는 값의 쌍을 가진 아이템을 가지고 있습니다. 단 한 가지 차이는 사용자가 문서의 바깥쪽으로 figcaption을 드래그하면 drag-and-drop 데이터에 그 아이템이 포함된다는 점입니다다. 그 아이템과 연관된 이미지는 포함되지 않습니다.</p>
<h2 id="이름과_값">이름과 값</h2>
<p>프로퍼티는 고유한 토큰으로 이루어진 순서가 없는(unordered) 집합으로 대소문자를 구분하고 이름-값의 쌍을 나타냅니다. 프로퍼티 값은 하나 이상의 토큰을 가지고 있어야 합니다. 다음의 예제에서 각 데이터 셀이 토큰입니다.</p>
<h3 id="이름_예제">이름 예제</h3>
<table class="standard-table">
<thead>
<tr>
<th colspan="1" rowspan="2" scope="col"></th>
<th colspan="2" rowspan="1" scope="col">Item</th>
</tr>
<tr>
<th scope="col">itemprop <strong>name</strong></th>
<th scope="col">itemprop <strong>value</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th>itemprop</th>
<td>country</td>
<td>Ireland</td>
</tr>
<tr>
<th>itemprop</th>
<td>Option</td>
<td>2</td>
</tr>
<tr>
<th>itemprop</th>
<td>https://www.flickr.com/photos/nlireland/6992065114/</td>
<td>Ring of Kerry</td>
</tr>
<tr>
<th>itemprop</th>
<td>img</td>
<td>https://www.flickr.com/photos/nlireland/6992065114/</td>
</tr>
<tr>
<th>itemprop</th>
<td>website</td>
<td>flickr</td>
</tr>
<tr>
<th>itemprop</th>
<td>(token)</td>
<td>(token)</td>
</tr>
</tbody>
</table>
<p><strong>토큰(Tokens)</strong>은 문자열이거나 URL일 수 있습니다. item이 URL일 경우는 <strong>typed item</strong>이라고 하고 그렇지 않은 경우는 문자열(string)이라고 합니다. 문자열에는 마침표(period)나 콜론(colon)이 포함되어서는 안됩니다(아래 참고).</p>
<ol>
<li>아이템이 typed item일 경우 다음 중 하나이어야 합니다:
<ol>
<li>정의된 프로퍼티 이름이거나</li>
<li>어휘(vocabulary)의 정의를 참조하는 유효한 URL이거나</li>
<li>전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li>
</ol>
</li>
<li>아이템이 typed item이 아닐 경우 다음을 따라야 합니다:
<ol>
<li>"<strong>.</strong>" (U+002E FULL STOP) 문자나 "<strong>:</strong>" characters (U+003A COLON) 문자를 포함하지 않는 문자열로 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li>
</ol>
</li>
</ol>
<p class="note"><strong>참고:</strong> 위에서 금지한, URL 값이 아닌 경우 ":" 문자가 포함되면 안되는 이유는 이 문자가 문자열에 포함되어 있으면 URL과 구분할 수 없기 때문입니다. "."를 포함하는 문자는 향후 확장을 고려해 예약된 것입니다. 공백(space) 문자는 공백이 포함되어 있을 경우 여러 개의 토큰으로 파싱될 수 있기 때문에 금지되어 있습니다.</p>
<h2 id="값">값</h2>
<p>이름-값 쌍의 프로퍼티 값은 다음 목록에서 처음으로 일치하는 값입니다:</p>
<ul>
<li>해당 요소가 <strong>itemscope </strong>속성을 가지고 있을 경우
<ul>
<li>그 값은 해당 요소가 생성한 <strong>아이템(item)</strong>입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>meta </strong>요소일 경우
<ul>
<li>그 값은 해당 요소의 <strong>content </strong>속성의 값입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, 또는 <strong>video</strong>일 경우
<ul>
<li>그 값은 src 속성이 해당 요소에 설정될 당시 노드 문서(node document;<a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>의 일부)에 상대적인 src 속성의 값을 파싱한 URL 문자열입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>a</strong>, <strong>area</strong>, 또는 <strong>link </strong>요소일 경우
<ul>
<li>그 값은 href 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 href 속성의 값을 파싱한 URL 문자열입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>object </strong>요소일 경우
<ul>
<li>그 값은 data 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 data 속성의 값을 파싱한 URL 문자열입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>data</strong>일 경우
<ul>
<li>그 값은 해당 요소의 value 속성의 값입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>meter</strong>일 경우
<ul>
<li>그 값은 해당 요소의 <strong>value </strong>속성의 값입니다.</li>
</ul>
</li>
<li>해당 요소가 <strong>time</strong>일 경우
<ul>
<li>그 값은 해당 요소의 <strong>datetime</strong> 값 입니다.</li>
</ul>
</li>
</ul>
<p>그 외의 경우</p>
<ul>
<li>그 값은 해당 요소의 <strong>textContent</strong> 입니다.</li>
</ul>
<p>어떤 프로퍼티의 값이 <strong>URL</strong>이라면, 그 프로퍼티는 URL 속성 요소를 이용해 지정되어야 합니다. URL 속성 요소는 <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, 그리고 <strong>video </strong>요소입니다.</p>
<h3 id="이름_순서">이름 순서</h3>
<p>이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.</p>
<h4 id="다음_예제에서_a_프로퍼티는_순서대로_1과_2의_값을_가지지만_a_프로퍼티가_b_프로퍼티_보다_먼저_오는지_아닌지는_중요하지_않습니다.">다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다.</h4>
<pre class="brush: html notranslate"><div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div></pre>
<h4 id="다음_세_예제는_모두_같습니다.">다음 세 예제는 모두 같습니다.</h4>
<pre class="brush: html notranslate"><div itemscope>
<p itemprop="b">test</p>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
</div></pre>
<pre class="brush: html notranslate"><div itemscope>
<p itemprop="a">1</p>
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div></pre>
<pre class="brush: html notranslate"><div id="x">
<p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div>
</pre>
<h2 id="다른_예제">다른 예제</h2>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html notranslate"><dl itemscope
itemtype="http://vocab.example.net/book"
itemid="urn:isbn:0-330-34032-8">
<dt>Title
<dd
itemprop="title">The Reality Dysfunction
<dt>Author
<dd
itemprop="author">Peter F. Hamilton
<dt>Publication date
<dd><time
itemprop="pubdate"
datetime="1996-01-26">26 January 1996</time>
</dl>
</pre>
<h3 id="구조화된_데이터_2">구조화된 데이터</h3>
<table class="standard-table">
<tbody>
<tr>
<td colspan="1" rowspan="14">itemscope</td>
<td>itemtype: itemid</td>
<td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td>
</tr>
<tr>
<td>itemprop</td>
<td>title</td>
<td>The Reality Dysfunction</td>
</tr>
<tr>
<td>itemprop</td>
<td>author</td>
<td>Peter F. Hamilton</td>
</tr>
<tr>
<td>itemprop</td>
<td>pubdate</td>
<td>1996-01-26</td>
</tr>
</tbody>
</table>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</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 Microdata', "#dfn-attr-itemprop", "itemprop")}}</td>
<td>{{Spec2('HTML Microdata')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.global_attributes.itemprop")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/HTML/Global_attributes">다른 전역 특성</a></li>
<li>다른 마이크로데이터와 관련된 전역 속성:
<ul>
<li>{{htmlattrxref("itemid")}}</li>
<li>{{htmlattrxref("itemprop")}}</li>
<li>{{htmlattrxref("itemref")}}</li>
<li>{{htmlattrxref("itemscope")}}</li>
<li>{{htmlattrxref("itemtype")}}</li>
</ul>
</li>
</ul>
|