소개
이 랩에서는 시맨틱 HTML5 <time> 태그를 탐구하고 웹 문서에서 날짜와 시간을 효과적으로 표현하는 방법을 배우게 됩니다. 이 랩은 <time> 태그의 주요 특징, 즉 사람이 읽을 수 있는 텍스트를 유지하면서 기계가 읽을 수 있는 시간 데이터를 제공하는 것과 다양한 HTML 컨텍스트에서 구현을 시연하는 데 중점을 둡니다.
단계별 접근 방식을 통해 HTML 파일을 생성하고, datetime 속성을 가진 <time> 태그를 추가하며, 이 시맨틱 요소가 웹 접근성을 향상시키고 날짜와 시간에 대한 구조화된 정보를 제공하는 방법을 이해하게 됩니다. 랩이 끝나면 웹 페이지에서 시간 데이터의 시맨틱 의미를 개선하기 위해 <time> 태그를 사용하는 실질적인 경험을 얻게 될 것입니다.
Time 태그 기본 이해
이 단계에서는 기계가 읽을 수 있는 형식으로 날짜와 시간을 나타내도록 설계된 시맨틱 요소인 HTML5 <time> 태그에 대해 배우게 됩니다. <time> 태그는 웹 접근성을 향상시키고 시간 데이터에 대한 구조화된 정보를 제공하는 데 도움이 됩니다.
<time> 태그의 주요 특징은 다음과 같습니다.
- 특정 기간을 나타냅니다.
- 사람이 읽을 수 있는 텍스트를 포함할 수 있습니다.
- 기계가 읽을 수 있는
datetime속성을 지원합니다. - 웹 페이지에서 날짜 및 시간 정보의 시맨틱 의미를 향상시킵니다.
<time> 태그를 설명하는 기본 예시는 다음과 같습니다.
<p>The conference is scheduled for <time>2023-09-15</time>.</p>
이 예시에서 <time> 태그는 사람 독자가 날짜를 볼 수 있도록 하고 기계가 정확한 날짜 형식을 구문 분석할 수 있도록 합니다.
<time> 태그를 사용하는 다양한 방법을 보여주는 또 다른 예시입니다.
<article>
<h2>Lab Publication</h2>
<p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>
datetime 속성은 표준화된 기계가 읽을 수 있는 날짜 형식을 제공하는 반면, 표시되는 텍스트는 사용자 친화적으로 유지됩니다.
Time 태그를 사용한 HTML 파일 생성
이 단계에서는 <time> 태그의 사용법을 보여주는 HTML 파일을 생성합니다. WebIDE 를 사용하여 ~/project 디렉토리에서 HTML 문서를 생성하고 편집합니다.
먼저, 프로젝트 디렉토리로 이동하여 event-schedule.html이라는 새 HTML 파일을 생성합니다.
cd ~/project
WebIDE 를 열고 event-schedule.html이라는 새 파일을 생성합니다. 그런 다음 다음 HTML 내용을 추가합니다.
touch event-schedule.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Event Schedule</title>
</head>
<body>
<h1>Upcoming Tech Conference</h1>
<article>
<h2>Conference Details</h2>
<p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
</article>
</body>
</html>
웹 브라우저에서 볼 때의 예시 출력:
참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.
이 예시는 특정 날짜를 나타내기 위해 단락 내에서 <time> 태그를 사용하는 방법을 보여줍니다. 이 태그는 날짜에 시맨틱 의미를 제공하여 브라우저와 보조 기술이 시간 정보를 더 쉽게 이해할 수 있도록 합니다.
Time 태그에 Datetime 속성 추가
이 단계에서는 datetime 속성을 추가하여 <time> 태그를 향상시키는 방법을 배웁니다. datetime 속성은 날짜와 시간에 대한 기계가 읽을 수 있는 형식을 제공하여 콘텐츠의 접근성을 높이고 시맨틱 의미를 부여합니다.
WebIDE 에서 event-schedule.html 파일을 열고 기존 <time> 태그를 수정하여 datetime 속성을 포함합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Event Schedule</title>
</head>
<body>
<h1>Upcoming Tech Conference</h1>
<article>
<h2>Conference Details</h2>
<p>
The annual tech conference will be held on
<time datetime="2023-09-15">September 15, 2023</time>.
</p>
<h3>Session Timing</h3>
<p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
</article>
</body>
</html>
datetime 속성은 다음과 같은 여러 가지 이점을 제공합니다.
- 표준화된 기계가 읽을 수 있는 날짜/시간 형식을 제공합니다.
- 실제 날짜/시간 값과 다른 표시 텍스트를 허용합니다.
- 전체 날짜, 시간 및 datetime 조합과 같은 다양한 형식을 지원합니다.
datetime 속성의 예시 형식:
- 전체 날짜:
2023-09-15 - 시간:
09:00 - Datetime:
2023-09-15T09:00 - 시간대 포함:
2023-09-15T09:00Z
웹 브라우저에서 볼 때의 예시 출력:
Upcoming Tech Conference
Conference Details
The annual tech conference will be held on September 15, 2023.
Session Timing
Morning keynote starts at 9:00 AM.
pubdate 속성을 사용한 Time 태그 탐구
이 단계에서는 <time> 태그의 특수한 부울 (boolean) 속성인 pubdate 속성에 대해 알아봅니다. 이 속성은 기사 또는 블로그 게시물의 게시 날짜를 나타냅니다. 현재 HTML5 에서는 사용되지 않지만, 과거 사용법을 이해하면 시맨틱 HTML 에 대한 통찰력을 얻을 수 있습니다.
WebIDE 에서 event-schedule.html 파일을 열고 pubdate 속성을 포함하는 블로그 게시물 예시를 포함하도록 내용을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Blog Post</title>
</head>
<body>
<article>
<h1>Latest Tech Insights</h1>
<header>
<h2>HTML5 Semantic Elements</h2>
<p>
Published on
<time datetime="2023-06-20" pubdate>June 20, 2023</time>
</p>
</header>
<p>In this article, we explore the semantic meaning of HTML5 tags...</p>
<footer>
<p>
Updated on
<time datetime="2023-06-22">June 22, 2023</time>
</p>
</footer>
</article>
</body>
</html>
pubdate 속성에 대한 주요 사항:
- 부울 속성입니다 (값 필요 없음).
- 기사의 게시 날짜를 나타냅니다.
- HTML5 에서 사용 중단되었지만, 많은 브라우저에서 여전히 지원됩니다.
- 일반적으로
<article>태그 내에서 사용됩니다.
웹 브라우저에서 볼 때의 예시 출력:
Latest Tech Insights
HTML5 Semantic Elements
Published on June 20, 2023
In this article, we explore the semantic meaning of HTML5 tags...
Updated on June 22, 2023
참고: pubdate는 현재 사용되지 않지만, 시맨틱 HTML 의 진화와 기계가 읽을 수 있는 날짜 정보를 제공하는 것의 중요성을 보여줍니다.
Time 태그 구현 검증
이 마지막 단계에서는 HTML 문서에서 <time> 태그의 구현을 검토하고 검증합니다. 다양한 속성과 컨텍스트에서 <time> 태그를 사용하는 다양한 방법을 보여주는 포괄적인 예제를 만들 것입니다.
WebIDE 에서 event-schedule.html 파일을 열고 완전한 예제로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Event Showcase</title>
</head>
<body>
<article>
<h1>Web Development Conference</h1>
<section>
<h2>Event Details</h2>
<p>
Conference Date:
<time datetime="2023-09-15">September 15, 2023</time>
</p>
<p>
Start Time:
<time datetime="09:00">9:00 AM</time>
</p>
</section>
<section>
<h2>Blog Post</h2>
<article>
<h3>HTML5 Semantic Elements</h3>
<p>
Published on
<time datetime="2023-06-20" pubdate>June 20, 2023</time>
</p>
<p>
Last Updated:
<time datetime="2023-06-22">June 22, 2023</time>
</p>
</article>
</section>
</article>
</body>
</html>
주요 구현 체크리스트:
- 다양한 컨텍스트의 여러
<time>태그 - 기계가 읽을 수 있는 날짜에 대한
datetime속성 사용 - 사람이 읽을 수 있는 날짜 텍스트 포함
pubdate속성 시연<article>및<section>태그를 사용한 시맨틱 HTML 구조
웹 브라우저에서 볼 때의 예시 출력:
Web Development Conference
Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM
Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023
요약
이 랩에서 참가자들은 기계가 읽을 수 있는 형식으로 날짜와 시간을 나타내도록 설계된 시맨틱 요소인 HTML5 <time> 태그에 대해 배웠습니다. 이 랩은 학습자가 태그의 주요 특징, 즉 사람이 읽을 수 있는 텍스트를 포함하고 웹 접근성을 향상시키고 구조화된 시간 정보를 제공하는 기계가 읽을 수 있는 datetime 속성을 지원하는 기능을 이해하도록 안내했습니다.
실습을 통해 참가자들은 <time> 태그의 구현을 보여주는 HTML 파일을 만들고, datetime 및 pubdate와 같은 다양한 속성을 사용하여 사용법을 탐구했습니다. 그들은 사람 독자와 기계 모두 날짜 및 시간 정보를 효과적으로 해석할 수 있도록 하는 시맨틱 마크업을 생성하는 연습을 했으며, 웹 개발에서 시맨틱 HTML 요소를 사용하는 것의 중요성을 강화했습니다.
