💡 퀵 접속: htm.kr/data

HTML5 Data 태그 사용법

1. Data 태그란?

Data 태그는 기계가 읽을 수 있는 형태로 데이터를 표시하는 데 사용됩니다. 주로 제품 정보, 날짜, 시간 등의 데이터를 표시할 때 활용됩니다.

2. 기본 구조

Data 태그의 기본 사용법

<data value="12345">제품 번호: 12345</data>

3. 자주 사용되는 속성

속성 설명 예시
value 기계가 읽을 수 있는 값 <data value="2024-03-20">
class CSS 클래스 <data class="product-id">
id 고유 식별자 <data id="date1">

4. 실제 사용 예제

<!-- 제품 정보 예제 -->
<div class="product-example">
    <h3>제품 정보 예제</h3>
    <p>
        제품명: <data value="P001">스마트폰 X</data><br>
        가격: <data value="999000">999,000원</data><br>
        출시일: <data value="2024-03-20">2024년 3월 20일</data>
    </p>
</div>

<!-- 날짜 예제 -->
<div class="date-example">
    <h3>날짜 예제</h3>
    <p>
        오늘: <data value="2024-03-20">2024년 3월 20일</data><br>
        내일: <data value="2024-03-21">2024년 3월 21일</data>
    </p>
</div>

<!-- 시간 예제 -->
<div class="time-example">
    <h3>시간 예제</h3>
    <p>
        현재: <data value="14:30:00">오후 2시 30분</data><br>
        다음: <data value="15:00:00">오후 3시</data>
    </p>
</div>

<style>
    /* 제품 정보 예제 스타일 */
    .product-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 날짜 예제 스타일 */
    .date-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 시간 예제 스타일 */
    .time-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .product-example,
        .date-example,
        .time-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

💡 주의사항

  • data 태그는 value 속성을 포함해야 합니다.
  • value 속성은 기계가 읽을 수 있는 형태여야 합니다.
  • 태그 내용은 사람이 읽을 수 있는 형태여야 합니다.
  • 모든 브라우저에서 지원됩니다.
  • 접근성을 고려한 마크업을 작성합니다.

5. 스타일링 예제

<style>
    /* 기본 data 스타일 */
    data {
        font-family: 'Noto Sans KR', sans-serif;
        color: #333;
    }

    /* 강조 스타일 */
    data.emphasis {
        color: #4CAF50;
        font-weight: bold;
    }

    /* 인용 스타일 */
    data.quote {
        color: #2196F3;
        font-style: italic;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        data {
            font-size: 14px;
        }
    }
</style>

6. 성능 최적화 팁

  • 필요한 경우에만 data 태그를 사용합니다.
  • value 속성은 기계가 읽을 수 있는 형태로 작성합니다.
  • 불필요한 중첩을 피합니다.
  • 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

data 태그가 올바르게 사용되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 다양한 브라우저에서 테스트
  • 모바일 기기에서 테스트
  • 접근성 검사 도구 사용
  • 데이터 렌더링 테스트