[attribute] HTML - datetime 속성 - 날짜시간 지정 (= datetime속성 = 데이트타임속성)

1. datetime 예제 - <del> 경우
2. datetime 정의
3. datetime 구문
4. datetime 예제 - <ins> 경우
5. datetime 예제 - <time> 경우

datetime 예제 - <del> 경우

 

<p><del datetime="2023-01-08T14:23:45Z">삭제된 텍스트</del></p>

 

결과보기

datetime 정의

 

태그 종류에 따라 의미 다름.

• <del> 경우, 텍스트 삭제된 날짜/시간 표시.
• <ins> 경우, 텍스트 삽입된 날자/시간 표시.
• <time> 경우, 기계 판독 가능 날자/시간 표시.

 

PS. 날짜만 표시될 수도 있고, 날짜시간 함께 표시될 수도 있음.

---

 

1. datetime 속성 사용 가능 태그 종류

<del>, <ins>, <time>

 

2.

datetime 속성은 일반 브라우저에서 시각적으로 차이가 없으나, 스크린리더기 등에서는 사용될 수 있음.

 

3.

모든 브라우저 지원.

 

datetime 구문

 

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

 

---

[속성값]

 

YYYY-MM-DDThh:mm:ssTZD

지정되는 날짜시간

• YYYY - 연도 (예: 2023)
• MM - 월 (예: 1월 경우 01)
• DD - 날짜 (예: 08)
• T 또는 공백 - 구분 기호 (※ 시간도 지정 시 필요)
• hh - 시간 (예: 오후 10시 경우, 22)
• mm - 분(예: 55)
• ss - 초(예: 03)
• TZD - 시간대 지정자 (Z:  Zulu (=그리니치 표준시) 의미)

 

PTDHMS

기간으로 표시하는 날짜시간 

• P - "기간(Period)" 접두사
• D - "일(Days)" 접두사
• H - "시간(Hours)" 접두사
• M - "분(Minutes)" 접두사
• S - "초(Seconds)" 접두사

 

---

[예제]

 

날짜:

<time datetime="2023">  <!-- 2023년 -->

<time datetime="2023-01">  <!-- 2023년 01월 -->

<time datetime="2023-01-08">  <!-- 2023년 01월 08일 -->

<time datetime="01-08">  <!-- 매년 01월 08일 -->

<time datetime="2023-W07">  <!-- 2023년 7주차 -->

날짜시간:

<time datetime="2023-01-08T14:53">

<time datetime="2023-01-08 14:53">

<time datetime="2023-01-08 14:53:45">

<time datetime="2023-01-08 14:53:45.687">

시간:

<time datetime="08:00">  <!-- UTC 시간대 8시 -->

<time datetime="08:00-03:00">  <!-- UTC-3시 시간대 8시)  -->

<time datetime="08:00+03:00">  <!-- UTC+3시 시간대 8시)  -->

기간:

<time datetime="P2D">  <!-- 2일간 -->

<time datetime="PT15H10M">  <!-- 15시간 10분간 -->

 

datetime 예제 - <ins> 경우

 

<p>홈짱닷컴 <ins datetime="2023-01-08T14:23:45Z">Homzzang.com</ins></p>

 

결과보기

datetime 예제 - <time> 경우

 

<p><time datetime="2023-01-22">설날</time></p>

 

결과보기