Home
AMP
Component

구글 AMP – Timeago

10 min read

Timeago는 'x'시간 전과 같이 과거와 비교하여 타임 스탬프 세부 정보를 제공합니다. 이 글에서는 이 기능에 대해 자세히 설명하겠습니다.

이 기능을 작업에 삽입하려면 아래의 스크립트를 .html 페이지에 추가해야 합니다. 

<script async custom-element="amp-timeago" 
src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>

amp-timeago 태그는 다음과 같습니다.

<amp-timeago layout="fixed"
             width="160" 
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="en">
  Monday 01 October 2018 00.37
</amp-timeago>

아래와 같이 실제 예제의 도움으로 이것을 이해합시다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - TimeAgo</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.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-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
</head>
<body>
<h1>Google AMP - TimeAgo Example</h1>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="en">
  Monday 01 October 2018 00.37
</amp-timeago>
</body>
</html>

결과

구글 AMP – Timeago

기본적으로 로케일은 en으로 설정됩니다. 필요에 따라 로케일에서 동일하게 변경하고 시간을 표시할 수 있습니다. timeago 태그와 함께 사용할 수 있는 로케일은 아래 표에 나와 있습니다.

로케일 설명
ar Arabic
be Belarusian
bg Bulgarian
ca Catalan
da Danish
de German
el Greek
en English
enShort English - short
es Spanish
eu Basque
fi Finnish
fr French
he Hebrew
ar Arabic
hu Hungarian
inBG Bangla
inHI Hindi
inID Malay
it Italian
ja Japanese
ko Korean
ml Malayalam
nbNO Norwegian Bokmål
nl Dutch
nnNO Norwegian Nynorsk
pl Polish
ptBR Portuguese
ro Romanian
ru Russian
sv Swedish
ta Tamil
th Thai
tr Turkish
uk Ukrainian
vi Vietnamese
zhCN Chinese
zhTW Taiwanese

아래에 주어진 작업 예제를 사용하여 몇 가지 로케일에 대해 논의하겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - TimeAgo Using Locale</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.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-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
</head>
<body>
<h1>Google AMP - TimeAgo Example Using Locale</h1>
<h3>Locale : Russian</h3>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="ru">
  Monday 01 October 2018 00.37
</amp-timeago>

<h3>Locale : Korean</h3>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="ko">
  Monday 01 October 2018 00.37
</amp-timeago>

<h3>Locale : Hindi</h3>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="inHI">
  Monday 01 October 2018 00.37
</amp-timeago>

<h3>Locale : Spanish</h3>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="es">
  Monday 01 October 2018 00.37
</amp-timeago>

<h3>Locale : French</h3>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="fr">
  Monday 01 October 2018 00.37
</amp-timeago>
</body>
</html>

결과

위 코드의 출력은 다음과 같습니다.

"X 시간 전" 디스플레이를 변경해야 하는 경우 timeago와 함께 "cutoff" 속성을 사용할 수 있습니다. Cutoff는 전 표시를 없애기 위해 몇 초 안에 값을 사용합니다.

아래에 주어진 실제 예제의 도움으로 이것을 이해합시다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - TimeAgo</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.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-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
</head>
<body>
<h1>Google AMP - TimeAgo Example</h1>
<amp-timeago layout="fixed"
             width="160"
             height="20"
             datetime="2018-10-01T00:37:33.809Z"
             locale="en"
             cutoff="300">
  Monday 01 October 2018 00.37
</amp-timeago>
</body>
</html>

결과
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – Story
    Amp-story는 사용자가 스토리에 계속 참여할 수 있도록 콘텐츠를 표시하는 데 사용되는 amp 구성 요소입니다. 예를 들어 브랜드에 대해 소개하는 일련의 이미지를 사용할 수 있습니다. amp-story로 작업하려면 아래와 같이 스크립트를 포함해야 합니다. <script async cust…
  • 구글 AMP – Timeago
    Timeago는 'x'시간 전과 같이 과거와 비교하여 타임 스탬프 세부 정보를 제공합니다. 이 글에서는 이 기능에 대해 자세히 설명하겠습니다. 이 기능을 작업에 삽입하려면 아래의 스크립트를 .html 페이지에 추가해야 합니다. <script async custom-element="amp-…
  • 구글 AMP – MathML
    MathML을 사용하여 수학 공식을 표시할 수 있습니다. 이 글에서는 MathML을 사용하는 방법과 몇 가지 수학 공식을 사용하여 동일한 결과를 표시하는 방법에 대한 실제 예제를 살펴보겠습니다. MathML을 사용하려면 다음 자바스크립트 파일을 포함해야 합니다. <script async cu…
  • 구글 AMP – 날짜 카운트 다운
    Amp Date countdown이라는 또 다른 amp 구성 요소는 주어진 날짜까지의 일, 시간, 분, 초를 표시하는 데 사용됩니다. 날짜 표시는 선택한 로케일에 따라 수행될 수 있습니다. 기본값은 en (영어)입니다. Amp-date-countdown은 데이터 렌더링에 amp-mustache 템플릿을 사…
  • 구글 AMP – 날짜 선택
    AMP Datepicker는 사용자가 날짜를 선택할 수 있는 페이지에 달력을 표시하는 amp 구성 요소입니다. AMP datepicker는 정적 달력처럼 표시되거나 입력 선택에 따라 버튼 클릭으로 표시될 수 있습니다. amp-date-picker를 작동시키려면 페이지에 다음 스크립트를 추가해야 합니다.…
  • 구글 AMP – Fit Text
    Amp 태그 amp-fit-text는 디스플레이를 렌더링하기에 공간이 충분하지 않은 경우 글꼴 크기를 줄입니다. 이 글에서는 이 태그에 대해 자세히 설명합니다. amp-fit-text가 작동하도록 하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="am…

댓글 쓰기