[HTML] Time 태그 사용법 알아보기

목표: Time 태그의 의미와 사용법을 알아보자.

 

 

이번 게시글에서는 HTML에서 흔히 사용하는 Time Tag에 대해서 알아보겠다.

 

1. Time Tag의 용도

 

Time tag는 일반 텍스트로 보이는 날짜와 시간 정보를 진짜 날짜, 시간 정보임을 HTML에게 알려주기 위해 사용한다.

따라서 HTML5을 지원하는 모든 브라우저는

Time tag를 통해 아 얘가 진짜 날짜, 시간 정보네? 라고 파악한다.

 

 

한 예로, Google에서 무언가를 검색했다.

올라온 게시글 중에 최근 1개월간 작성된 것을 확인하고 싶다.

그때 Google에서는 이 time 태그를 통해 우리에게 해당 게시글이 언제 작성이 된 것인지를 알려준다.

 

Google과 같은 모든 브라우저가 이 Time 태그로하여금

사용자의 달력과 자동으로 연동하거나, 작성일을 검색하도록 하는데 사용된다.

 

2. Machine-readable date 로 표현하기: datetime element

 

특히, Time 태그에서 datetime 속성은 Time 태그 요소의 날짜와 시간 데이터를 기계가 읽을 수 있는(machine-readable) 형태로 알려준다.

즉, 우리가 표시하는 시간을 기계가 읽을 수 있는 날짜로 표시하기 위해 datetime 속성을 사용한다.

 

 

datetime 속성값으로 유효한 데이터는 다음과 같습니다.

- 24시간 형태로 표현된 시간 데이터

- 그레고리력(Gregorian calendar)으로 표현되는 날짜 데이터 (선택사항으로 시간 및 시간대 데이터를 포함할 수 있음)

- 유효한 기간 데이터

 

3. datetime 사용법

 

<time datetime="YYYY-MM-DDThh:mm:ssTZD|PTDHMS">

datetime을 작성할 때는 특정한 룰이 정해져있다.

 

YYYY-MM-DDThh:mm:ssTZD
YYYY	년도
MM	월
DD	일
T 또는 공백(space)	날짜와 함께 시간까지 함께 나타낼 경우 날짜와 시간을 구분해 주는 구분자(separator)
hh	시
mm	분
ss	초
TZD	표준 시간대 지정자(Time Zone Designator)를 의미하며, Z는 그리니치 표준시를 의미함 *  (Z or +hh:mm or -hh:mm), the + or - values indicate how far ahead or behind a time zone is from the UTC (Coordinated Universal Time) zone.

한 예로,

<time datetime="2019-12-01T:07:15:15+09:00"> 이라고 했다면

UTC +09:00은 서울(한국) 타임존에 있는 2019년 12월 1일 07시 15분 15초를 가르킨다.

 

위와 같은 형식 외에도 PTDHMS 형식으로 표시할 수 있다.

PTDHMS
P(Period)	기간
D(Days)	날짜
H(Hours)	시
M(Minutes)	분
S(Seconds)	초

 

프로그래밍 언어에 따라서 양식이 상이할 수도 있다.

 

 

 

 

 

 

 

2019. 11. 04. 라고 쓰여진 글자가 시간으로 읽을 수 있도록 datetime을 사용해서 명시해주고 있다.

맨 뒤에 표준 시간대 지정자를 쓰는 양식이 상이하지만,

저 값이 무엇을 의미하는지 이제 알수있다!

 

HTML에서는 지정된 양식을 사용해서 datetime 속성을 사용하고 있다.

 

---