HCard

1. 개요

hCard는 연락처 정보를 구조화하기 위한 마이크로포맷으로, HTML 코드에 특정 클래스를 추가하여 이름, 별명, 조직, 전화번호, 웹 주소 등의 정보를 나타낸다. `vcard` 클래스는 전체 연락처 정보를 감싸는 컨테이너 역할을 하며, `fn`, `nickname`, `org`, `tel`, `url` 등의 속성을 사용하여 각 정보 항목을 정의한다. hCard는 브라우저 플러그인과 같은 소프트웨어를 통해 정보를 추출하여 주소록과 같은 다른 응용 프로그램으로 전송될 수 있으며, Geo 마이크로포맷을 포함하여 위치 정보를 나타내거나, `adr`을 독립적인 마이크로포맷으로 사용할 수 있다.

2. 예시

hCard 마이크로포맷을 HTML 코드에 적용하는 예시는 다음과 같다.

기본 HTML 코드는 다음과 같다.

```html

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

여기에 hCard 마크업을 추가하면 다음과 같이 된다.

```html

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

`fn`, `nickname`, `org` (조직), `tel` (전화 번호), `url` (웹 주소) 등의 속성은 특정 클래스 이름으로 식별되며, 전체는 `class="vcard"`로 묶여 hCard를 구성한다. hCard가 조직 또는 장소를 나타낼 때는 `fn`과 `org` 클래스를 같은 요소에 사용한다. (예: `위키백과`, `웸블리 스타디움`)

페이지 헤더에 `profile` 속성을 사용하여 hCard 프로필()을 선택적으로 포함할 수 있다.

이와 같이 마크업을 추가하면, 브라우저 플러그인 등이 정보를 추출하여 주소록 등 다른 응용 프로그램으로 전송할 수 있다.

2.1. 기본 HTML 예시

html

• Joe Doe


• Jo


• The Example Company


• 604-555-1234


• http://example.com/

2.2. hCard 마크업 추가

기본 HTML 코드에 hCard 마크업을 추가하는 방법을 알아본다.

다음은 hCard 마크업이 없는 기본 HTML 예시다.

```xml

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

위의 HTML 코드에 hCard 마이크로포맷 마크업을 추가하면 다음과 같이 변경된다.

```xml

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

`vcard` 클래스는 전체 연락처 정보를 감싸는 데 사용되며, `fn`(이름), `nickname`(별명), `org`(조직), `tel`(전화번호), `url`(웹 주소) 클래스는 각각의 정보를 나타낸다. hCard가 조직이나 장소를 나타내는 경우에는 `fn`과 `org` 클래스가 같은 요소에 사용될 수 있다. 예를 들어, `위키백과`나 `웸블리 스타디움`과 같이 표시할 수 있다.

선택적으로 페이지 헤더에 프로필을 포함시킬 수 있다.

```xml

```

이렇게 hCard 마크업을 추가하면 브라우저 플러그인과 같은 소프트웨어가 연락처 정보를 추출하여 주소록 등 다른 응용 프로그램으로 전송할 수 있게 된다.

2.3. 선택적 프로필 포함

페이지 헤더에 hCard 프로필을 선택적으로 포함시킬 수 있다.

```html

3. 구성 요소

hCard는 HTML에서 연락처 정보를 나타내는 데 사용되는 마이크로포맷이다. hCard를 구성하는 요소들은 특정 클래스 이름을 사용하여 식별되며, 전체는 `class="vcard"`로 묶인다.

다음은 일반적인 HTML 코드 예시이다.

```html

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

여기에 마이크로포맷 마크업을 추가하면 다음과 같이 변경된다.

```html

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

```

`fn`, `nickname`, `org` (조직), `tel` (전화 번호), `url` (웹 주소)과 같은 속성들은 특정 클래스 이름을 사용하여 식별되며, 전체는 `class="vcard"`로 묶여 hCard를 형성한다. hCard가 조직 또는 장소를 위한 것이라면, `fn`과 `org` 클래스가 동일한 요소에 사용된다.

페이지 헤더에 다음과 같이 `profile`을 선택적으로 포함시킬 수 있다.

```xml

```

이러한 마크업을 통해 브라우저 플러그인과 같은 소프트웨어가 정보를 추출하여 주소록 등 다른 응용 프로그램으로 전송할 수 있게 된다.

3.1. 주요 속성

hCard의 주요 속성은 특정 클래스 이름을 사용하여 식별되며, 전체는 `class="vcard"`로 묶여 있다. 이는 다른 클래스들이 hCard를 형성하며, 우연히 이름이 지정된 것이 아님을 나타낸다.

hCard의 주요 속성은 다음과 같다.

hCard가 조직 또는 장소를 위한 것이라면, `fn`과 `org` 클래스가 동일한 요소에 사용된다. 예를 들어, `위키백과` 또는 `웸블리 스타디움`과 같이 표현할 수 있다. 그 외에도 선택적으로 사용할 수 있는 hCard 클래스들이 존재한다.

이러한 속성들을 통해 브라우저 플러그인과 같은 소프트웨어가 정보를 추출하여 주소록과 같은 다른 응용 프로그램으로 전송할 수 있다.

3.2. 조직 및 장소 정보

`fn`과 `org` 클래스가 동일한 요소에 사용되는 경우가 있다. 예를 들면 `위키백과` 또는 `웸블리 스타디움`과 같이 사용된다. 이는 조직이나 장소를 위한 hCard를 나타낸다. 다른 hCard 클래스도 존재한다.

브라우저 플러그인과 같은 소프트웨어가 정보를 추출하여 주소록과 같은 다른 응용 프로그램으로 전송할 수 있다.

3.3. 기타 속성

hCard에서 일반적으로 사용되는 다른 속성들은 다음과 같다.

* `bday` - 개인의 생일
* `email` - 이메일 주소
* `honorific-prefix`
* `honorific-suffix`
* `label` - 세분화되지 않은 주소에 사용
* `logo`
* `nickname` - 별명
* `note` - 자유 텍스트
* `photo`
* `post-office-box`

4. Geo 및 adr

Geo 마이크로포맷은 hCard 명세의 일부이며, hCard 내에 위치의 좌표를 포함시키기 위해 자주 사용된다. hCard의 adr 부분은 독립적인 마이크로포맷으로도 사용될 수 있다.

5. 실제 사용 예시

hCard의 실제 사용 예시로, HTML 마크업에 마이크로포맷 마크업을 포함하는 방법을 보여준다.

기본 HTML 구조는 다음과 같다.

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

여기에 마이크로포맷 마크업을 추가하면 다음과 같이 된다.

• Joseph Doe


• Joe


• The Example Company


• 604-555-1234


• http://example.com/

위키미디어 재단의 연락처 정보를 hCard로 나타내는 예시는 하위 섹션을 참고하면 된다.

5.1. 위키미디어 재단 연락처 (hCard)

다음은 2023년 2월 현재 위키미디어 재단의 연락처 정보이다.

이 hCard는 개인이 아닌 조직에 대한 것이므로 fn 및 org 속성이 하나의 요소에 결합되어 있다.

다음은 2010년 10월 28일 현재 위키미디어 재단의 연락처 정보이다.



이 hCard는 개인이 아닌 조직에 대한 것이므로 fn 및 org 속성이 하나의 요소에 결합되어 있다.

5.2. 마크업 코드

html

```
위 예시에서 `fn` 및 `org` 속성은 하나의 요소에 결합되어 있으며, 이는 이 hCard가 개인이 아닌 조직에 대한 것임을 나타낸다.

```html

```
위 사용 예에서는 "fn"과 "org" 속성을 하나의 요소로 조합하여, 이는 인물이 아닌 조직을 위한 hCard임을 나타내고 있다.