time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다.
안녕하세요. 언휴예요.
이번에는 날짜와 시각 정보를 표시할 때 사용하는 <time>태그를 알아보기로 해요.
<time > 태그를 이용하면 날짜 정보, 시각 정보 혹은 날짜 정보와 시각 정보를 표현하였을 때 브라우저나 검색 엔진 및 장애인이 사용하는 보조 기술에 해당 데이터가 일시를 나타낸다는 것을 정확하게 알려줄 수 있습니다.
일시를 다른 텍스트 구문을 입력하는 것처럼 입력하는 게 편하겠죠. 하지만 검색 엔진이나 보조 기술을 사용하는 프로그램이나 시각 장애인은 정확한 정보를 얻을 수가 없습니다.
<time> 태그는 날짜 정보만 표시하거나 시각 정보만 표시하거나 두 가지를 병행하여 표시할 수 있어요.
<time datetime="YYYY-MM-DDThh:mm:ssZ"> 형태로 표현합니다.
만약 날짜 정보만 표현할 때는 YYYY-MM-DD 부분만 표현할 수 있어요.
시간 정보만 표현할 때는 hh:mm:ss 부분만 표현할 수 있죠.
T는 두 가지 정보를 모두 표현할 때 날짜 저오와 시간 정보 사이에 넣습니다.
그리고 Z는 그리니치 표준시를 의미합니다.
주의할 점은 time 태그를 사용해도 실제 화면에 표시하지 않기 때문에 번거롭지만 다시 일시를 써 주셔야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>time 태그 사용하기</title>
<meta charset="utf-8" />
</head>
<body>
<p><time datetime="2016-05-25">2016년 5월 25일</time> 은퇴하는 날</p>
<p><time datetime="15:30:00">15시 30분</time> 마지막 강의가 끝나는 시각</p>
<p><time datetime="2016-05-25T15:30:00">2016년 5월 25일 15시 30분</time> 백수로 전향~ <strong>언제나 휴일!</strong></p>
<p><time datetime="2016-05-25T08:30:00Z">2016년 5월 25일 08시 30분</time> 그리니치 표준시로 백수로 전향하는 일시</p>
</body>
</html>
timetag.html
그럼 모두 즐거운 하루 보내세요.
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자 (0) | 2016.05.31 |
|---|---|
| [HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게 (0) | 2016.05.07 |
| [HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자. (0) | 2016.05.07 |
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |