Amp Date countdown이라는 또 다른 amp 구성 요소는 주어진 날짜까지의 일, 시간, 분, 초를 표시하는 데 사용됩니다. 날짜 표시는 선택한 로케일에 따라 수행될 수 있습니다. 기본값은 en (영어)입니다. Amp-date-countdown은 데이터 렌더링에 amp-mustache 템플릿을 사용합니다.
이 글에서는 amp-date-countdown을 더 자세히 이해하기 위해 몇 가지 작업 예제를 살펴 보겠습니다.
amp-date-countdown을 사용하려면 다음 스크립트를 추가해야 합니다.
amp-date-countdown의 경우
<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
amp-mustache의 경우
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Amp-date-countdown 태그
amp-date-countdown 태그는 다음과 같습니다.
<amp-date-countdown timestamp-seconds="2100466648"
layout="fixed-height"
height="50">
<template type="amp-mustache">
<p class="p1">
{{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until
<a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>
</p>
</template>
</amp-date-countdown>
amp-date-countdown의 속성
amp-date-countdown의 속성은 다음 표에 나열되어 있습니다.
| 속성 | 설명 |
|---|---|
| end-date | 카운트 다운할 ISO 형식 날짜입니다. 예: 2025-08-01T00:00:00+08:00 |
| timestamp-ms |
ms 초 단위의 POSIX epoch 값. UTC 시간대로 가정합니다. 예: timestamp-ms="1521880470000" |
| timestamp-seconds |
POSIX epoch 값 (초). UTC 시간대로 가정합니다. 예: timestamp-seconds="1521880470" |
| timeleft-ms |
카운트 다운할 값 (ms 초)입니다. 예: 50 시간 남음 timeleft-ms="180,000,000" |
| offset-seconds (optional) | 주어진 종료 날짜에서 더하거나 뺄 시간 (초)을 나타내는 양수 또는 음수입니다. 예를 들어 offset-seconds="60"은 종료 날짜에 60초를 추가합니다. |
| when-ended (optional) | 0초에 도달하면 타이머를 중지할지 여부를 지정합니다. 값을 stop (기본값)으로 설정하여 타이머가 0초에 중지하고 최종 날짜를 지나지 않거나 0초에 도달한 후에도 타이머가 계속되어야 함을 표시할 수 있습니다. |
| locale (optional) | 각 타이머 단위에 대한 국제화 언어 문자열입니다. 기본값은 en (영어)입니다. 지원되는 값은 다음과 같습니다. |
형식
amp-date-countdown이 카운트 다운을 표시하는 데 사용하는 형식은 다음 표에 나와 있습니다.
| 형식 | 설명 |
|---|---|
| d | 일 단위 표시 0,1,2,3... |
| dd | 일 단위 표시 00,01,02,03... |
| h | 시간 단위 표시 0,1,2,3... |
| hh | 시간 단위 표시 00,01,02,03... |
| m | 분 단위 표시 0,1,2,3... |
| mm | 분 시간 단위 표시 00,01,02,03... |
| s | 초 단위 표시 0,1,2,3... |
| ss | 초 단위 표시 00,01,02,03... |
| days | 로케일에 따라 요일 문자열 표시 |
| hours | 로케일에 따라 시간 문자열 표시 |
| minutes | 로케일에 따라 분 문자열 표시 |
| seconds | 로케일에 따라 초 문자열 표시 |
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-countdown.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown timestamp-seconds="2145683234"
layout="fixed-height"
height="50">
<template type="amp-mustache">
<p class="p1">
{{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until
<a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
</p>
</template>
</amp-date-countdown>
</body>
</html>
결과
예제
실제 예제를 통해 amp-countdown 속성 offset-seconds를 이해하겠습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-countdown.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown end-date="2020-01-19T08:14:08.000Z"
offset-seconds="-50"
layout="fixed-height"
height="100">
<template type="amp-mustache">
<p class="p1">
{{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until 50 seconds before 2020.
</p>
</template>
</amp-date-countdown>
</body>
</html>
결과
지원되는 로케일 목록
다음은 amp-date-countdown에서 지원하는 로케일 목록입니다.
| 이름 | 로케일 |
|---|---|
| en | English |
| es | Spanish |
| fr | French |
| de | German |
| id | Indonesian |
| it | Italian |
| ja | Japanese |
| ko | Korean |
| nl | Dutch |
| pt | Portuguese |
| ru | Russian |
| th | Thai |
| tr | Turkish |
| vi | Vietnamese |
| zh-cn | Chinese Simplified |
| zh-tw | Chinese Traditional |
이제 위의 로케일 중 하나를 사용하여 카운트 다운을 표시하는 한 가지 예를 시도해 보겠습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-countdown.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown locale="ja"
end-date="2020-01-19T08:14:08.000Z"
offset-seconds="-50"
layout="fixed-height"
height="100">
<template type="amp-mustache">
<p class="p1">
{{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}} and {{s}} {{seconds}} until 50 seconds before 2020.
<p>
</template>
</amp-date-countdown>
</body>
</html>