본문 바로가기

개발/HTML-CSS

time 태그와 datetime 속성

time 태그와 datetime 속성

  • 시간의 특정 지점 또는 구간을 나타냄
  • datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용 가능
  • 주로 일반 텍스트로 보이는 날짜와 시간 정보를 의미있는 날짜, 시간 정보임을 HTML을 알려주기 위해서 사용된다.

datetime 속성

  • 해당 속성을 통해 날짜와 시간을 기계가 쉽게 읽을 수 있는 형태로 알려준다.
  • 형식은 다음과 같다.

  • YYYY-MM-DDThh:mm:ssTZD 형식 같은 경우 ISO 8601 date format에서 변형되었다.
  • TZD 같은 경우는 UTC(협정 세계시)에서의 오프셋으로 Z는 offset이 없음을 의미하고 +01:00 은 UTC에서 1시간 후의 타임존을 의미한다.
  • PTDHMS 같은 경우는 특정 기간을 뜻하는 것이다. 예를 들면 P2D는 2일의 동안의 기간을 의미한다.

사용 예

Dates:
<time datetime="1914">  <!-- the year 1914 -->
<time datetime="1914-12">  <!-- December 1914 -->
<time datetime="1914-12-20">  <!-- 20 December 1914 -->
<time datetime="12-20">  <!-- 20 December any year -->
<time datetime="1914-W15">  <!-- week 15 of year 1914 -->

Date and Times:
<time datetime="1914-12-20T08:00">  <!-- 20 December 1914 at 8am -->
<time datetime="1914-12-20 08:00">  <!-- 20 December 1914 at 8am -->
<time datetime="1914-12-20 08:30:45">  <!-- with minutes and seconds -->
<time datetime="1914-12-20 08:30:45.687">  <!-- with minutes, seconds, and milliseconds -->

Times:
<time datetime="08:00">  <!-- 8am -->
<time datetime="08:00-03:00">  <!-- 8am in Rio de Janeiro (UTC-3 hours)  -->
<time datetime="08:00+03:00">  <!-- 8am in Madagascar (UTC+3 hours)  -->

Durations:
<time datetime="P2D">  <!-- a duration of 2 days -->
<time datetime="PT15H10M">  <!-- a duration of 15 hours and 10 minutes -->

참고

'개발 > HTML-CSS' 카테고리의 다른 글

Happy New Year!  (0) 2021.01.01
HSL Color  (0) 2020.12.26
-webkit-line-clamp 속성 사용시 주의사항  (0) 2020.12.24
브라우저 렌더링 엔진  (0) 2020.11.27
overflow: auto 특징  (0) 2020.11.27