HTML 시간 표현

HTMLBeginner
지금 연습하기

소개

HTML 은 개발자가 사람이 읽을 수 있는 시간 또는 날짜를 나타낼 수 있도록 하는 <time> 태그를 제공하며, 이는 검색 엔진에서도 기계가 읽을 수 있는 형식으로 읽을 수 있습니다. 이 랩에서는 HTML 에서 <time> 태그를 사용하여 날짜 및 시간 스탬프를 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

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> 태그는 개발자가 사람과 기계가 읽을 수 있는 시간 및 날짜 표현을 만드는 데 사용할 수 있는 강력한 도구입니다.