소개
HTML 은 개발자가 사람이 읽을 수 있는 시간 또는 날짜를 나타낼 수 있도록 하는 <time> 태그를 제공하며, 이는 검색 엔진에서도 기계가 읽을 수 있는 형식으로 읽을 수 있습니다. 이 랩에서는 HTML 에서 <time> 태그를 사용하여 날짜 및 시간 스탬프를 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 기본 구조 추가
HTML 파일을 생성하려면 HTML 보일러플레이트 (boilerplate) 로 시작해야 합니다. 다음 코드를 복사하여 index.html 파일에 붙여넣으세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Time Tag Lab</title>
</head>
<body></body>
</html>
날짜 및 시간 정의
날짜 및 시간을 정의하려면 datetime 속성을 가진 <time> 태그를 사용해야 합니다. datetime 속성은 기계가 읽을 수 있는 형식으로 날짜 및 시간을 지정합니다. 다음 코드를 body 태그 안에 추가하여 날짜 및 시간을 정의합니다.
<p>
현재 날짜 및 시간은
<time datetime="2022-07-23T18:30-05:00">23 July 2022, 6:30 PM</time>입니다.
</p>
유효한 시간 길이 추가
<time> 태그는 유효한 시간 지속 시간을 나타내는 데에도 사용할 수 있습니다. datetime 속성을 사용하여 <time> 태그에 유효한 시간 지속 시간을 추가할 수 있습니다. 다음 코드를 body 태그 안에 추가하여 시간 지속 시간을 정의합니다.
<p>
프로젝트의 총 지속 시간은
<time datetime="PT10M">10 minutes</time>입니다.
</p>
index.html 파일을 저장하고 웹 브라우저에서 열어 <time> 태그를 사용하여 생성된 날짜 및 시간 스탬프를 확인하세요.
요약
이 랩에서는 HTML 에서 <time> 태그를 사용하여 날짜 및 시간 스탬프를 만드는 방법을 배웠습니다. 또한 동일한 태그를 사용하여 유효한 시간 지속 시간을 정의하는 방법도 살펴보았습니다. <time> 태그는 개발자가 사람과 기계가 읽을 수 있는 시간 및 날짜 표현을 만드는 데 사용할 수 있는 강력한 도구입니다.
