이 페이지에 스크립트 오류가 있습니다. 사이트 편집자가 처리하는 동안 아래에서 일부 내용을 보실 수 있습니다.

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

itemscope 은 불 방식(boolean )의 전역속성 으로서 관련있는 메타데이터의 범위를 구분짓습니다. 개체를 위한 itemscope 속성을 특정지으면 새로운 항목을 만들고 네임벨류 짝의 개수가 되어 요소와 관련됩니다. 관련있는 속성 itemtype는 (schema.org와 같은) 어휘의 유효한 URL을 특정하기위에 쓰여서 항목과 문맥(properties context)을 규정합니다. 각각의 예제에서 어휘는 schema.org.에서 가져왔습니다.

모든 HTML 요소는 itemscope 속성이 특정지어졌을 겁니다. itemscope 개체는 관련있는 itemtype이 없어 연관있는 itemref이 있어야 합니다.

Note: itemtype 속성에 관해 더 알고싶으면 http://schema.org/Thing을 방문하십시오.

간단한 예제

HTML

다음의 예제는 itemscope 속성을 나타냅니다. "http://schema.org/Movie" 와 같은 itemtype 와 3가지 관련있는 itemprop 속성을 나타냅니다.

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre>Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

구조화 데이터

다음의 표는 앞의 예제를 구조화한 데이터입니다.

itemscope Itemtype Movie
itemprop (itemprop name) (itemprop value)
itemprop director James Cameron
itemprop genre Science Fiction
itemprop name Avatar
itemprop https://youtu.be/0AY1XIkX7bY Trailer

itemscope id 속성

개체를 나타내기 위해 itemscope 속성을 나타내면 새로운 개체가 만들어집니다. 개체는 네임밸류 짝의 무리들로 이루어집니다. itemscope 속성과 itemtype 속성을 가진 개체를 만들기 위해 {{ html attrxref }} 속성을 나타내야 합니다. id 속성을 사용하여 새로운 항목을 위한 ㅇㅇ을 만들어야 합니다. ㅇㅇ으로 항목이 웹 너머 페이지에 다른 항목과 관련짓게 합니다.

예제

4가지의 itemscope 속성이 다음 예제입니다. 각각의 itemscope 속성은 해당하는 itemtype 속성의 범위를 설정합니다. 다음 예제에서 itemtypes인 Recipe, AggregateRatingNutritionInformation 은 구조화된 데이터인 schema.org의 일부분인 레시피로 첫번째 itemtype은 http://schema.org/Recipe에서 가져왔습니다.

<div itemscope itemtype="http://schema.org/Recipe">
<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Carol Smith</p></span>
</span> 
<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
November 5, 2009</p></time>
<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
 <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> 
Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
 Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
 Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
 Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
 <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
 Serving size: <span itemprop="servingSize">1 medium slice<br></span>
 Calories per serving: <span itemprop="calories">250 cal<br></span>
 Fat per serving: <span itemprop="fatContent">12 g<br></span> 
</span> 
<p>Ingredients:<br>
  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
 ... </p>

Directions: <br>
  <div itemprop="recipeInstructions"> 
    1. Cut and peel apples<br> 
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
    ... 
  </div> 
</div> 

결과

HTML

다음은 이전 코드 예제를 렌더링한 예제입니다.

구조화된 데이터

itemscope itemtype Recipe
itemprop name Grandma's Holiday Apple Pie
itemprop image https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itemprop datePublished 2009-11-05
itemprop description This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itemprop prepTime PT30M
itemprop cookTime PT1H
itemprop totalTime PT1H30M
itemprop recipeYield 1 9" pie (8 servings)
itemprop recipeIngredient Thinly-sliced apples: 6 cups
itemprop recipeIngredient White sugar: 3/4 cup
itemprop recipeInstructions 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itemprop author [Person]
itemprop name Carol Smith
itemscope itemprop[itemtype] aggregateRating [AggregateRating]
itemprop ratingValue 4.0
itemprop reviewCount 35
itemscope itemprop[itemtype] nutrition [NutritionInformation]
itemprop servingSize 1 medium slice
itemprop calories 250 cal
itemprop fatContent 12 g

Note: HTML로부터 마이크로 데이터 구조를 추출하는 간편한 툴은  Google's Structured Data Testing Tool입니다. 위에 보이는 HTML에서 사용해보세요.

Specifications

Specification Status Comment
HTML Microdata
The definition of 'itemscope' in that specification.
Working Draft  
HTML Living Standard
The definition of 'itemscope' in that specification.
Living Standard  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

관련자료

문서 태그 및 공헌자

이 페이지의 공헌자: jacobkim116
최종 변경자: jacobkim116,