data element - by. UXKM

2025-05-16

요약 설명
<data> 요소는 기계가 처리할 수 있는 값(Machine-Readable Data)과 사람이 읽을 수 있는 값을 연결할 수 있는 시맨틱 태그로, 표시된 콘텐츠와 연결된 데이터 값을 value 속성에 명시합니다.
사용자는 텍스트를 보고 이해하고, 기계나 스크립트는 value 속성을 통해 의미 있는 값을 사용할 수 있게 되며, 정렬, 계산, 필터링 등에 활용될 수 있습니다. 통계 수치, 단가, 코드와 텍스트를 함께 제공해야 하는 상황에 유용합니다.

주요 역할 및 특징

기계와 사람 모두를 위한 데이터 표현
- value 속성을 통해 데이터를 기계가 이해할 수 있는 형식으로 제공하면서도, 사용자는 텍스트를 통해 읽을 수 있습니다.
- 예: 상품 가격, 날짜, 숫자 등.
브라우저에서 시각적 효과 없음
- <data> 요소는 시각적으로 별도의 스타일링을 제공하지 않습니다.
- 사람이 읽을 수 있는 텍스트와 함께 데이터를 제공하는 구조를 나타낼 뿐입니다.
의미론적 역할
콘텐츠와 관련된 데이터를 명확히 표현하며, 검색 엔진, 데이터 수집기, 애플리케이션 등에 유용합니다.
주요 사용 사례
- 상품 가격 태깅
- 데이터 시각화와 결합
- 검색 엔진 최적화(SEO)
- 머신러닝 및 데이터 처리

CSS 기본 값

<data> 요소는 기본적으로 인라인 레벨 요소입니다.

							data {
								display: inline;
							}

기본 문법

							<data value="데이터 값">표시 내용</data> <!-- 기본 문법 -->

속성

[value] 필수 <data value="데이터 값">

기계가 읽을 수 있는 값을 제공하는 속성입니다. 값은 문자열, 숫자, 날짜 형식 등이 될 수 있습니다.

								<p id="product-info">
									상품 가격: <data value="59.99" class="price">59.99 USD</data>
								</p>

예제

상품 가격 태깅

								<p>
									상품 가격: <data value="100">100 USD</data>
								</p>

날짜 데이터

								<p>
									출시일: <data value="2025-01-01">2025년 1월 1일</data>
								</p>

사용자 등급 데이터

								<p>
									사용자 등급: <data value="gold">Gold 회원</data>
								</p>

접근성을 고려한 데이터

								<p>
									이 상품의 가격은 <data value="49.99" aria-label="상품 가격 49.99 달러">49.99 USD</data>입니다.
								</p>

주의사항

<data> 요소는 value 속성을 포함해야 합니다. value 속성이 없는 경우, 기계가 데이터를 인식할 수 없습니다.
데이터 값과 태그 내부 텍스트가 서로 상충하지 않도록 주의해야 합니다.
<data> 요소는 HTML5에서 도입되었으며, 오래된 브라우저에서는 일부 지원되지 않을 수 있습니다.
<data>는 간단한 값을 표현하는 데 적합하며, 구조화된 복잡한 데이터는 JSON-LD, RDFa, 또는 Microdata와 같은 기술을 고려해야 합니다.