Home
AMP
Component

구글 AMP – 날짜 선택

23 min read

AMP Datepicker는 사용자가 날짜를 선택할 수 있는 페이지에 달력을 표시하는 amp 구성 요소입니다. AMP datepicker는 정적 달력처럼 표시되거나 입력 선택에 따라 버튼 클릭으로 표시될 수 있습니다.

amp-date-picker를 작동시키려면 페이지에 다음 스크립트를 추가해야 합니다.

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

amp 날짜 선택기 태그

amp-date-picker의 태그는 다음과 같습니다.

<amp-date-picker layout="fixed-height"
                 height="360">
</amp-date-picker>

지원되는 속성

amp-date-picker에는 다음 속성이 지원됩니다.

속성 설명
mode 사용 가능한 옵션은 static 및 overlay입니다. 정적의 경우 캘린더는 기본적으로 페이지에서 열립니다. 오버레이의 경우 상호 작용할 때 달력이 열립니다.
type 사용 가능한 옵션은 single 및 single입니다. 단일의 경우 달력에서 하나의 날짜만 선택할 수 있습니다. 범위를 사용하면 둘 이상의 날짜를 선택할 수 있지만 연속적인 범위에 있습니다.
input-selector 이것은 날짜 입력을 위한 queryselector 일 수 있습니다. 예를 들어, id는 #nameoftheid이고 클래스는 nameoftheclass입니다. ID가 할당된 태그의 날짜가 업데이트됩니다.
start-input-selector 이것은 날짜 입력을 위한 queryselector 일 수 있습니다. 예를 들어, id는 #nameoftheid이고 클래스는 nameoftheclass입니다. ID가 할당된 태그의 날짜가 업데이트됩니다.
end-input-selector 이것은 날짜 입력을 위한 queryselector 일 수 있습니다. 예를 들어, id는 #nameoftheid이고 클래스는 nameoftheclass입니다. ID가 할당된 태그의 날짜가 업데이트됩니다.
min 사용자가 선택할 수 있는 가장 빠른 날짜입니다. ISO 8601 날짜 형식이어야 합니다. min 속성이 없으면 현재 날짜가 최소 날짜가 됩니다.
max 사용자가 선택할 수 있는 최신 날짜입니다. ISO 8601 날짜 형식이어야 합니다. max 속성이 없으면 날짜 선택기에 최대 날짜가 없습니다.
month-format 선택한 날짜를 표시하는 데 필요한 월 형식입니다. 기본적으로 값은 "MMMM YYYY" 입니다.
format input 또는 선택자가 사용되는 html 요소에 날짜를 표시할 형식입니다. 기본적으로 "YYYY-MM-DD"입니다.
week-day-format 요일을 표시하는 형식입니다.
locale 달력 보기를 표시할 로케일입니다. 기본적으로 en입니다.
minimum-nights 사용자가 날짜 범위에서 선택해야 하는 날짜 수입니다. 기본값은 "1"입니다. 값이 "0"이면 사용자가 시작 및 종료 날짜에 대해 동일한 날짜를 선택할 수 있습니다.
number-of-months 달력 보기에서 한 번에 표시할 개월 수입니다. 기본값은 "1"입니다.
first-day-of-week 요일 (0-6)로 지정할 요일입니다. 기본값은 "0"(일요일)입니다.
day-size 달력 보기 표에 있는 날짜 셀의 크기 (px)입니다. 기본값은 39입니다.

주요 속성은 type과 mode입니다. 모드의 경우 static 및 overlay 유형 달력이 있습니다. type의 경우 single 및 range 옵션을 사용할 수 있습니다. type="single"을 사용하면 달력에서 하나의 날짜만 선택할 수 있으며 type="range"의 경우 범위에서 둘 이상의 데이터를 선택할 수 있습니다.

이제 몇 가지 작업 예제를 통해 static 및 overlay 유형 달력에 대한 amp-date-picker를 이해하겠습니다.

AMP Static 날짜 선택기

정적 유형 날짜 선택기의 경우 아래 예제와 같이 mode = static을 지정해야 합니다. 

<!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-Picker Static</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-picker.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-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <style amp-custom>
    input[type=text] {
      width: 50%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
    }
    .col-label {
      float: left;
      width: 25%;
      margin-top: 6px;
    }
    .col-content {
      float: left;
      width: 75%;
      margin-top: 6px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .amp_example {
      background-color: #f1f1f1;
      padding: 0.01em 16px;
      margin: 20px 0;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    }
    h3 {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight: 400;
      margin: 10px 0;
    }
  </style>
</head>
<body>
<div class="amp_example">
  <h3>Google AMP - Amp Date-Picker using type=single</h3>
  <amp-date-picker id="static-date"
                   type="single"
                   mode="static"
                   layout="fixed-height"
                   height="600"
                   format="YYYY-MM-DD"
                   input-selector="#date">
    <div class="row">
      <div class="col-label">
        <label for="start">Date is:</label>
      </div>
      <div class="col-content">
        <input type="text" id="date" name="date" placeholder="Date Selected Is...">
      </div>
    </div>
  </amp-date-picker>
</div>
</body>
</html>

이 예제에서 우리는 달력 즉, 기본적으로 화면에 datepicker를 표시하고 있습니다.

사용자가 선택한 날짜는 아래의 미리보기 화면과 같이 텍스트 필드에 표시됩니다.

결과

amp-date-picker에서 선택한 날짜를 가져오는 방법

위의 예를 확인하면 텍스트 필드의 ID가 부여된 input-selector라는 속성이 있습니다. 사용자가 날짜를 선택하면 입력 필드 안에 표시됩니다. 

<amp-date-picker id="static-date"
                    type="single"
                    mode="static"
                    layout="fixed-height"
                    height="600"
                    format="YYYY-MM-DD"
                    input-selector="#date"
>
  <div class="row">
    <div class="col-label">
      <label for="start">Date is:</label>
    </div>
    <div class="col-content">
      <input type="text" id="date" name="date" placeholder="Date Selected Is...">
    </div>
  </div>
</amp-date-picker>

다음과 같이 input-selector 속성에 name 속성을 지정할 수도 있습니다. 

<amp-date-picker type="single"
                 mode="static"
                 layout="container"
                 input-selector="[name=date]">
  <input type="text" id="date" name="date" placeholder="Date Selected Is...">
</amp-date-picker>

input-selector가 amp-date-picker보다 지정되지 않은 경우 숨겨진 input 필드를 만들고 amp-date-picker의 ID를 사용하여 날짜 또는 ${id}-date 이름을 지정합니다.

date-picker로 사용할 수 있는 다른 속성을 가진 몇 가지 예를 더 살펴볼 것입니다. 위에서 언급했듯이 type="single"과 static으로 모드를 선택한 단일 날짜를 선택할 수 있습니다. 유형을 type ="range"로 지정하여 날짜 범위를 선택할 수도 있습니다. 

<!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-Picker Static</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-picker.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-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <style amp-custom>
    input[type=text] {
      width: 50%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
    }
    .col-label {
      float: left;
      width: 25%;
      margin-top: 6px;
    }
    .col-content {
      float: left;
      width: 75%;
      margin-top: 6px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .amp_example {
      background-color: #f1f1f1;
      padding: 0.01em 16px;
      margin: 20px 0;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    }
    h3 {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight: 400;
      margin: 10px 0;
    }
  </style>
</head>
<body>
<div class="amp_example">
  <h3>Google AMP - Amp Date-Picker Static Multi Select Dates using type=range</h3>
  <amp-date-picker id="static-date"
                   type="range"
                   mode="static"
                   layout="fixed-height"
                   height="600"
                   start-input-selector="#start"
                   end-input-selector="#end"
                   format="YYYY-MM-DD"
                   input-selector="#static-date-input"> 
    <div class="row">
      <div class="col-label">
        <label for="start">Start Date:</label>
      </div>
      <div class="col-content">
        <input type="text" id="start" name="start" placeholder="Start Date">
      </div>
    </div>
    <div class="row">
      <div class="col-label">
        <label for="end">End Date:</label>
      </div>
      <div class="col-content">
        <input type="text" id="end" name="end" placeholder="End Date">
      </div>
    </div>
  </amp-date-picker>
</div>
</body>
</html>

결과

위에 표시된 코드의 출력은 다음과 같습니다.

amp-date-picker에서 선택한 type ="range"를 사용하여 시작일과 종료일을 확인하는 방법

시작일과 종료일을 확인하기 위해 amp-date-picker 속성 start-input-selector 및 end-input-selector를 사용했습니다.

구문에 대한 세부 정보는 다음과 같습니다.

<amp-date-picker id="static-date"
                 type="range"
                 mode="static"
                 layout="fixed-height"
                 height="600"
                 start-input-selector="#start"
                 end-input-selector="#end"
                 format="YYYY-MM-DD"
                 input-selector="#static-date-input"> 
  <input type="text" id="start" name="start" placeholder="Start Date">
  <input type="text" id="end" name="end" placeholder="End Date">
</amp-date-picker>

두 선택자 모두 시작 및 종료 날짜를 표시할 입력 필드 ID가 있습니다. 여기에 설명된대로 입력 필드의 이름을 제공할 수도 있습니다.

AMP 오버레이 날짜 선택기

오버레이 모드 날짜 선택기의 경우 입력 필드에 대한 응답으로 달력이 표시됩니다. 정적 날짜 선택기에서 보았 듯이 type ="single"및 type ="range"로 오버레이 할 수 있습니다.

이제 오버레이 유형의 date-picker의 날짜 범위를 선택하는 작업 예제를 살펴 보겠습니다

예제

<!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-Picker Static</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-picker.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-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <style amp-custom>
    input[type=text] {
      width: 50%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
    }
    .col-label {
      float: left;
      width: 25%;
      margin-top: 6px;
    }
    .col-content {
      float: left;
      width: 75%;
      margin-top: 6px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .amp_example {
      background-color: #f1f1f1;
      padding: 0.01em 16px;
      margin: 20px 0;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    }
    h3 {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight: 400;
      margin: 10px 0;
    }
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }
  </style>
</head>
<body>
<div class="amp_example">
  <h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type=range</h3>
  <amp-date-picker id="overlay-date"
                   type="range"
                   mode="overlay"
                   start-input-selector="#start"
                   end-input-selector="#end"
                   format="YYYY-MM-DD"
                   open-after-select
                   input-selector="#start"> 
    <div class="row">
      <div class="col-label">
        <label for="start">Start Date:</label>
      </div>
      <div class="col-content">
        <input type="text" id="start" name="start" placeholder="Start Date">
      </div>
    </div>
    <div class="row">
      <div class="col-label">
        <label for="end">End Date:</label>
      </div>
      <div class="col-content">
        <input type="text" id="end" name="end" placeholder="EndDate">
      </div>
    </div>
     <div class="row">
       <div class="col-label"></div>
       <div class="col-content">
         <button class="ampstart-btn caps" on="tap:overlay-date.clear">Clear</button>
       </div>
     </div>
  </amp-date-picker>
</div>
</body>
</html>

결과

위에 표시된 코드의 출력은 다음과 같습니다.

우리는 이미 시작일과 종료일을 얻는 방법을 보았습니다. 여기에서 open-after-select 속성을 하나 더 사용했습니다. 이 속성은 선택 후 오버레이를 열어 둡니다. 날짜 선택기 외부를 클릭하면 닫힙니다. clear라는 버튼도 추가되었습니다. 지우기 버튼을 클릭하면 선택한 날짜가 지워집니다. 이를 수행하는 구문은 다음과 같습니다. 

<button class="ampstart-btn caps"
        on="tap:overlay-date.clear">
  Clear
</button>

이벤트를 추가하려면 on 속성을 사용해야 합니다. 이벤트에 대한 자세한 내용은 나중에 다시 설명합니다. 우리는 태그 동작을 사용했고 datepicker의 id가 주어졌고 선택된 날짜 범위를 지우는 이벤트를 지우는 것을 사용했습니다.

다음으로 amp-date-picker를 라이트 박스로 사용하는 방법을 살펴보겠습니다.

AMP 라이트 박스 날짜 선택기

날짜 선택기는 모달 창 내에서 사용할 수 있습니다. 라이트 박스 날짜 선택기를 사용할 수도 있습니다. 실제 예제의 도움으로 이것을 이해합시다.

라이트 박스 내에서 날짜 선택기를 사용하려면 아래와 같이 라이트 박스 스크립트를 추가해야 합니다. 

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

예제

<!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-Picker Static</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-date-picker.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-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <style amp-custom>
    input[type=text] {
      width: 50%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
    }
    .col-label {
      float: left;
      width: 25%;
      margin-top: 6px;
    }
    .col-content {
      float: left;
      width: 75%;
      margin-top: 6px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .amp_example {
      background-color: #f1f1f1;
      padding: 0.01em 16px;
      margin: 20px 0;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    }
    h3 {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight: 400;
      margin: 10px 0;
    }
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }
    .lightbox {
      background-color: rgba(100, 100, 100, 0.5);
    }
  </style>
</head>
<body>
<div class="amp_example">
  <h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type=range</h3>
  <div class="row">
    <div class="col-label">
      <label for="start">Start Date:</label>
    </div>
    <div class="col-content">
      <input type="text" id="start" name="start" placeholder="Start Date" on="tap:lightbox.open">
    </div>
  </div>
  <div class="row">
    <div class="col-label">
      <label for="end">End Date:</label>
    </div>
    <div class="col-content">
      <nput type="text" id="end" name="end" placeholder="End Date" on="tap:lightbox.open">
    </div>
  </div>
  <div class="row">
    <div class="col-label"></div>
    <div class="col-content">
      <button class="ampstart-btn caps" on="tap:overlay-date.clear">Clear</button>
    </div>
  </div>
  <amp-lightbox id="lightbox"
                layout="nodisplay"
                class="lightbox">
    <amp-date-picker id="overlay-date"
                     type="range"
                     layout="fill"
                     start-input-selector="#start"
                     end-input-selector="#end"
                     format="YYYY-MM-DD"
                     on="activate: lightbox.open;deactivate: lightbox.close"> 
    </amp-date-picker>
  </amp-lightbox>
</div>
</body>
</html>

결과

사용자가 입력 필드를 클릭하면 아래와 같이 라이트 박스 내부에서 날짜 선택기가 열립니다.

이를 수행하기 위해 아래와 같이 입력 필드에 이벤트가 추가됩니다.

<input type="text" id="start" name="start" placeholder="Start Date" 
on="tap:lightbox.open">
<input type="text" id="end" name="end" placeholder="End Date" 
on="tap:lightbox.open">

on은 tap:lightbox.open을 호출하여 라이트 박스를 여는 이벤트입니다.

여기서 lightbox는 아래와 같이 amp-lightbox에 부여된 ID입니다. Amp-date-picker는 amp-lightbox 내부에서 호출되며 입력 필드를 탭하면 활성화됩니다. 

<amp-lightbox id="lightbox"
              layout="nodisplay"
              class="lightbox">
  <amp-date-picker id="overlay-date"
                   type="range"
                   layout="fill"
                   start-input-selector="#start"
                   end-input-selector="#end"
                   format="YYYY-MM-DD"
                   on="activate: lightbox.open;deactivate: lightbox.close"> 
  </amp-date-picker>
</amp-lightbox>
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – Actions 및 Events
    amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. Events 이벤트에 대한 액션 구문은 다음과 같습니다. on="eventName:elementId[.methodName[(arg1=value, arg2=value…
  • 구글 AMP – Font
    Amp 글꼴은 기본적으로 amp 페이지에 대한 사용자 지정 글꼴을 트리거하고 모니터링하는 데 도움이 되는 amp의 amp 구성 요소입니다. 이 글에서는 amp-font에 대해 자세히 설명합니다. Amp-font를 사용하려면 다음 자바스크립트 파일을 추가해야 합니다. <script async …
  • 구글 AMP – Link
    Amp의 Link 태그는 사용 가능한 amp 및 non-amp 페이지에 대해 Google 검색 엔진에 알리는 데 사용됩니다. 이 글에서는 Link 태그와 관련된 측면과 구글이 amp-page 및 non amp-page에 대해 결정하는 방법에 대해 자세히 설명하겠습니다. AMP 페이지 발견 https…
  • 구글 AMP – User Notification
    구글 amp-user-notification은 사용자에게 닫을 수 있는 대화 상자 메시지를 표시하는데 사용됩니다. 우리는 페이지의 쿠키에 대해 사용자에게 알리는데 사용할 수 있습니다. amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <sc…
  • 구글 AMP – List
    Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다. amp-list를 사용하려면 다음 스크립트를 포함해야 합니다. <script async custom-element="am…
  • 구글 AMP – 동적 CSS 클래스
    amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…

댓글 쓰기