• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012