HTML - 마이크로데이터: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 마이크로데이터의 세계로 흥미로운 여정을 떠납니다. 새로운 것에 익숙하지 않아도 걱정하지 마세요 - 나는 당신의 친절한 가이드가 될 것이며, 단계별로 설명해 나갈 것입니다. 이 튜토리얼이 끝나면, 배운 것의 양에 놀라실 것입니다!

HTML - Microdata

마이크로데이터는 무엇인가요?

먼저 기본 개념으로 시작해보겠습니다. 마이크로데이터는 HTML 콘텐츠에 추가적인 의미를 더하는 방법입니다. 마치 웹 페이지에 검색 엔진과 다른 컴퓨터 프로그램이 이해할 수 있는 비밀의 언어를 주는 것과 같습니다. 멋지죠?

HTML 문서에서 마이크로데이터 사용하기

이제 코드로 손을 더러워보겠습니다! 마이크로데이터를 사용하는 간단한 예제를 보여드리겠습니다:

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<span itemprop="telephone">(123) 456-7890</span>
</div>

이를 분해해보면:

itemscope는 이 <div>에 마이크로데이터가 포함되어 있음을 브라우저에게 알립니다.
itemtype은 우리가 설명하고 있는 항목의 종류를 지정합니다 (이 경우, Person).
itemprop은 특정 정보를 레이블링합니다 (이름, 직책, 전화번호).

이를 사람에 대한 양식을 작성하는 것과 같은 걸 생각해보세요. 각 itemprop은 양식의 필드와 같습니다.

전역 속성

마이크로데이터는 모든 HTML 요소에서 사용할 수 있는 새로운 속성을 소개합니다. 이를 편리한 표로 보여드리겠습니다:

속성	설명
itemscope	HTML에 마이크로데이터가 포함되어 있음을 나타냅니다
itemtype	용어집(예: schema.org)을 지정합니다
itemprop	항목의 속성을 정의합니다
itemid	항목에 고유한 식별자를 제공합니다
itemref	itemscope의 자식이 아닌 속성을 참조합니다

속성 데이터 타입

마이크로데이터를 사용할 때, 다양한 타입의 데이터를 지정할 수 있습니다. 다음 표는 일반적인 데이터 타입을 보여줍니다:

데이터 타입	예제
텍스트	`<span itemprop="name">John Doe</span>`
숫자	`<span itemprop="age">30</span>`
날짜	`<time itemprop="birthDate" datetime="1990-05-15">May 15, 1990</time>`
URL	`<a href="http://example.com" itemprop="url">My Website</a>`

마이크로데이터 API 지원

이제 진짜 흥미로운 부분입니다! 마이크로데이터를 지원하는 브라우저는 JavaScript가 페이지의 마이크로데이터와 상호작용할 수 있는 특별한 API(Application Programming Interface)를 제공합니다.

간단한 예제를 보여드리겠습니다:

var items = document.getItems("http://schema.org/Person");
for (var i = 0; i < items.length; i++) {
var name = items[i].properties["name"][0];
console.log("Found person: " + name);
}

이 코드는 페이지에 있는 모든 "Person" 항목을 찾아 이름을 콘솔에 로그합니다. HTML에 대한 슈퍼파워 검색 기능 같은 것입니다!

마이크로데이터 용어집 정의

마지막으로, 용어집에 대해 이야기해보겠습니다. 용어집은 마이크로데이터의 사전과 같습니다. 항목이 가질 수 있는 속성을 정의합니다. 가장 일반적으로 사용되는 용어집은 Schema.org로, 주요 검색 엔진이 지원합니다.

다음은 영화에 대한 Schema.org 용어집을 사용한 예제입니다:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science Fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

이 예제에서 우리는 영화의 이름, 감독, 장르, 그리고 트레일러 링크를 설명하고 있습니다. 검색 엔진은 이 정보를 사용하여 검색 결과에 리치 스니펫을 표시할 수 있습니다.

결론

그렇습니다, 여러분! 우리는 HTML 마이크로데이터의 세계를 여행하며, 기본 개념에서 고급 사용법까지 다뤘습니다. 마이크로데이터는 HTML에 의미를 더해주는 것에 관한 것입니다. 기계가 콘텐츠를 이해하는 데 도움을 줍니다.

웹 개발자로서의 여정을 계속하면서, 마이크로데이터는 당신의 도구킷 속 비밀 무기와 같습니다. 검색 엔진이 콘텐츠를 더 잘 이해하여 사이트의 가시성을 향상시킬 수 있으며, 표준화된 형식으로 데이터를 구조화하는 좋은 방법입니다.

계속 연습하고, 탐구하고, 가장 중요한 것은 즐기세요! 누구도 몰라요, 마이크로데이터를 사용하여 만든 다음 웹사이트가 세상을 바꿀 수도 있습니다. 행복하게 코딩하세요!

Credits: Image by storyset