HTML5 Time 태그 사용법

1. Time 태그란?

Time 태그는 날짜와 시간을 표시하는 데 사용됩니다. 기계가 읽을 수 있는 형태로 날짜와 시간을 표시하며, 검색 엔진이나 스크린 리더가 이해할 수 있도록 도와줍니다.

2. 기본 구조

<time datetime="2024-03-20">2024년 3월 20일</time>

3. 자주 사용되는 속성

4. 실제 사용 예제

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

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

<!-- 날짜와 시간 예제 -->
<div class="datetime-example">
    <h3>날짜와 시간 예제</h3>
    <p>
        회의: <time datetime="2024-03-20T14:30:00">2024년 3월 20일 오후 2시 30분</time><br>
        약속: <time datetime="2024-03-21T15:00:00">2024년 3월 21일 오후 3시</time>
    </p>
</div>

<style>
    /* 날짜 예제 스타일 */
    .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;
    }

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

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

5. 스타일링 예제

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

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

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

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

6. 성능 최적화 팁

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

7. 검증 및 테스트

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

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