time element - by. UXKM

2025-05-16

요약 설명
<time> 요소는 날짜나 시간 정보를 나타내는 시맨틱 태그로, 사람이 읽을 수 있는 형태의 텍스트와 함께 기계가 인식할 수 있도록 표준화된 시간 데이터를 datetime 속성에 포함할 수 있습니다.
<time> 요소를 통해 검색 엔진, 브라우저, 스크린 리더 등이 시간 정보를 정확히 처리할 수 있으며, 일정, 게시일, 마감일, 타이머 등 시간 관련 콘텐츠에 적합합니다. 반복적인 일정이나 날짜 정보를 표현할 때는 <time> 요소에 datetime 속성을 정확히 설정하여 기계가 인식할 수 있도록 해야 하며, 필요에 따라 pubdate 속성도 함께 활용할 수 있습니다.

주요 역할 및 특징

날짜 및 시간 표현
- <time>은 날짜와 시간을 표현하며, ISO 8601 형식으로 값을 제공할 수 있습니다.
- 예: 2025-01-01T12:00:00.
기계 읽기 형식 제공
- datetime 속성을 사용하여 날짜와 시간을 ISO 8601 표준 형식으로 기계가 읽을 수 있도록 제공합니다.
- 예: datetime="2025-01-01T12:00:00".
의미론적 사용
<time>은 사람이 읽을 수 있는 텍스트와 기계 읽기 데이터를 모두 포함하므로, 검색 엔진 최적화(SEO)와 데이터 처리를 위한 의미론적 태그로 활용됩니다.
주요 사용 사례
- 게시 날짜 및 시간
- 이벤트 일정
- 만료 날짜
- 특정 시간에 관련된 정보 표시
브라우저 지원 및 시각적 효과
<time> 요소는 시각적으로 별다른 효과를 제공하지 않으므로, CSS를 사용해 스타일링해야 합니다.

CSS 기본 값

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

							time {
								display: inline;
							}

기본 문법

							<time datetime="YYYY-MM-DDTHH:mm:ssTZD">표시 내용</time> <!-- 기본 문법 -->

속성

[datetime] 선택 사항 <time datetime="YYYY-MM-DDTHH:mm:ssTZD">

날짜 및 시간을 ISO 8601 형식으로 지정합니다. 이 속성이 없으면 <time> 요소는 단순한 텍스트로 간주됩니다.

형식 :

날짜 : YYYY-MM-DD, (예: 2025-01-23)
날짜 및 시간 : YYYY-MM-DDTHH:mm:ss, (예: 2025-01-23T15:30:00)
시간대 포함 : YYYY-MM-DDTHH:mm:ssZ 또는 YYYY-MM-DDTHH:mm:ss+09:00

									<time datetime="2025-01-01T12:00:00">1월 1일 오후 12시</time>

예제

블로그 게시 날짜

								<p>
									이 글은 <time datetime="2025-01-23">2025년 1월 23일</time>에 작성되었습니다.
								</p>

이벤트 일정

								<p>
									다음 회의는 <time datetime="2025-02-01T14:00:00+09:00">2월 1일 오후 2시</time>에 열립니다.
								</p>

마감 기한 표시

								<p>
									프로젝트 제출 마감일: <time datetime="2025-01-31">2025년 1월 31일</time>
								</p>

현재 시간 표시

								<p>
									현재 시간: <time datetime="2025-01-23T12:45:00">12:45</time>
								</p>

접근성을 고려한 날짜

								<p>
									이 문서는 <time datetime="2025-01-01" aria-label="2025년 1월 1일">1월 1일</time>에 작성되었습니다.
								</p>

주의사항

<time>에 사람이 읽을 수 있는 텍스트를 포함하더라도, datetime 속성을 통해 기계가 읽을 수 있는 형식으로 데이터를 제공하는 것이 권장됩니다.
datetime 속성의 값은 반드시 ISO 8601 형식을 따라야 합니다. 잘못된 형식은 데이터 해석 오류를 유발할 수 있습니다.
날짜와 시간 정보는 시각적 표시 외에도 스크린 리더 사용자에게 명확히 전달되어야 하므로, aria-label 또는 aria-describedby를 활용하세요.