itemscope

itemscope 전역 특성은 연관된 메타데이터의 범위를 지정하는 불리언 특성입니다. 요소에itemscope 특성을 지정하면 새로운 아이템을 생성하고, 그 결과로 요소에 관련된 키-값 쌍 다수를 낳습니다. 관련 특성인itemtype은 어휘(schema.org 등)의 유효한URL을 지정할 때 사용합니다. 아래 각각의 예제는schema.org의 어휘를 사용합니다.

모든 HTML 요소는itemscope 특성을 가질 수 있습니다.itemscope를 가졌으나 연결된itemtype이 없는 경우 반드시 연관된itemref를 가져야 합니다.

참고 :itemtype 특성을 더 알아보려면http://schema.org/Thing을 방문하세요.

간단한 예제

HTML

다음의 예제는itemscope 특성의 사용법을 보입니다.itemtype은http://schema.org/Movie로 지정하고, 세 개의 관련itemprop 특성을 가집니다.

html

<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 특성을 가진 요소의 경우,id 특성도 지정할 수 있습니다.id를 사용하면 새로운 아이템에 대한 전역 식별자를 설정할 수 있으며, 전역 식별자를 사용하면 웹에서 찾을 수 있는 다른 아이템과 연결할 수 있습니다.

예제

다음 예제는 네 개의itemscope 특성을 가지고 있습니다. 각각의itemscope 특성은 대응하는itemtype 특성의 범위를 지정합니다.itemtype,Recipe,AggregateRating,NutritionInformation은 요리법에 관한schema.org 구조화된 데이터로, 첫 번째itemtype의 값인http://schema.org/Recipe 에 정의되어 있습니다.

html

<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</span>    </span>  </p>  <p>    Published:    <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time>  </p>  <span itemprop="description"    >This is my grandmother's apple pie recipe. I like to add a dash of    nutmeg.</span  >  <br />  <span    itemprop="aggregateRating"    itemscope    itemtype="http://schema.org/AggregateRating">    <span itemprop="ratingValue">4.0</span> stars based on    <span itemprop="reviewCount">35</span> reviews  </span>  <br />  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br />  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br />  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time  ><br />  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br />  <span    itemprop="nutrition"    itemscope    itemtype="http://schema.org/NutritionInformation">    Serving size: <span itemprop="servingSize">1 medium slice</span><br />    Calories per serving: <span itemprop="calories">250 cal</span><br />    Fat per serving: <span itemprop="fatContent">12 g</span><br />  </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