Home
AMP
Component

구글 AMP – Actions 및 Events

11 min read

amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다.

Events

이벤트에 대한 액션 구문은 다음과 같습니다.

on="eventName:elementId[.methodName[(arg1=value, arg2=value)]]"

on 속성에 전달되는 세부 사항은 다음과 같습니다.

  • eventName: amp 구성 요소에 사용할 수 있는 이벤트의 이름을 사용합니다. 예를 들어, forforms는 submit-success, submit-error eventNames를 사용할 수 있습니다.
  • elementId: 이벤트가 호출되어야하는 요소의 ID를 가져오며 성공 또는 오류에 대해 알고자하는 양식의 ID가 될 수 있습니다.
  • methodName: 이벤트 발생시 호출할 메서드의 이름을 사용합니다.
  • arg=value: 메서드에 전달된 key=value 형식의 인수를 사용합니다.

on 속성에 여러 이벤트를 전달할 수도 있으며 다음과 같이 수행됩니다.

on="submit-success:lightbox;submit-error:lightbox1"

이벤트가 여러 개인 경우 on 속성으로 전달되고 세미콜론 (;)을 사용하여 구분됩니다.

Actions

액션은 기본적으로 on 속성과 함께 사용되며 구문은 다음과 같습니다.

on="tab:elementid.hide;"

다음과 같이 여러 액션을 전달할 수 있습니다.

on="tab:elementid.open;tab:elementid.hide;”

Elementid는 action이 수행될 요소의 ID입니다.

Amp에는 모든 amp 구성 요소에서 사용할 수 있는 전역적으로 정의된 이벤트 및 액션이 있습니다. 액션은 탭 이벤트와 hide, show 및 togglevisibility이 있습니다.

참고:
모든 html 또는 amp 구성 요소에서 togglevisibility를 숨기거나 표시하거나 사용하려면 on="tap:elementid.[ hide / show / togglevisibility ]"를 사용할 수 있습니다.

이벤트 및 액션에 대한 몇 가지 예제를 살펴보겠습니다.

Input 요소

실전 예제의 도움으로 이것을 더 잘 이해합시다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-actions-and-events.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-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    .lightbox {
      background: rgba(211,211,211,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #txtname{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    div {
      font-size:25px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on="tap:AMP.setState({displaylightbox: true})">Click Here</button>
<br/>
<br/>

<h3>AMP - Input Element</h3>
<input id="txtname" placeholder="Type here" on="input-throttled:AMP.setState({name: event.value})"> 

<div [text]="name"></div>
</body>
</html>

결과

위의 예에서는 다음과 같이 input 필드에 이벤트를 사용하고 있습니다.

<input id="txtname" placeholder="Type here" on="input-throttled:AMP.setState({name:event.value})">
사용된 이벤트는 input-throlled입니다. 다음과 같이 change를 사용할 수도 있습니다. 
<input id="txtname" placeholder="Type here" on="change:AMP.setState({name:event.value})">

사용자가 input 상자 입력하면 출력이 표시됩니다. input 유형에 대한 이벤트를 radio, checkbox 등으로 사용할 수 있으며 select 요소에서도 사용할 수 있습니다. 

<input id="txtname" placeholder="Type here" on="input-debounced:AMP.setState({name:event.value})">

input-debounced 이벤트는 change 이벤트와 동일하지만 사용자가 입력한 후 300ms 후에 출력이 표시됩니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-actions-and-events.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-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>
  
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
    .lightbox {
      background: rgba(211,211,211,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #txtname{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    div {
      font-size:25px;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on="tap:AMP.setState({displaylightbox: true})">Click Here</button>
<br/>
<br/>

<h3>AMP - Input Element</h3>
<input id="txtname" placeholder="Type here" on="input-debounced:AMP.setState({name: event.value})"> 

<div [text]="name"></div>
</body>
</html>

Amp Lightbox

라이트 박스에서 다음 이벤트를 테스트할 것입니다.

  • lightboxOpen
  • lightboxClose

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Lightbox</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-actions-and-events.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-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>
  
    amp-img {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }
    
    button{
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
    .lightbox {
      background: rgba(211,211,211,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    p{
      font-size:30px;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<p [text]="'Lightbox is ' + lightboxstatus + '.'">Lightbox Event Testing</p>
<button on="tap:my-lightbox.open">Show LightBox</button> 
<amp-lightbox id="my-lightbox"
              layout="nodisplay"
              close-button on="lightboxOpen:AMP.setState({lightboxstatus:'opened'});lightboxClose:AMP.setState({lightboxstatus: 'closed'});">
  <div class="lightbox">
    <amp-img alt="Beautiful Flower"
             src="images/loreal.gif"
             width="246"
             height="205">
    </amp-img>
  </div>
</amp-lightbox>
</body>
</html>

결과

다음 코드는 open 및 close 이벤트가 라이트 박스에서 구현되는 방법을 보여줍니다. 

<p [text]="'Lightbox is ' + lightboxstatus + '.'">Lightbox Event Testing</p>
<button on="tap:my-lightbox.open">Show LightBox</button> 
<amp-lightbox id="my-lightbox"
              layout="nodisplay"
              close-button
              on="lightboxOpen:AMP.setState({lightboxstatus:'opened'});lightboxClose:AMP.setState({lightboxstatus: 'closed'});">
  <div class="lightbox">
    <amp-img alt="Beautiful Flower"
             src="images/loreal.gif"
             width="246"
             height="205">
    </amp-img>
  </div>
</amp-lightbox>

Amp-selector의 이벤트

amp-selector에서 사용할 수 있는 이벤트는 select입니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Selector</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-actions-and-events.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-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <style amp-custom>
  
    .radio-menu {
      list-style: none;
    }

    .radio-menu [option][selected] {
      outline: none;
    }

    .radio-menu [option] {
      display: flex;
      align-items: center;
    }
    
    .radio-menu [option]:before {
      transition: background 0.25s ease-in-out;
      content: "";
      display: inline-block;
      width: 24px;
      height: 24px;
      margin: 8px;
      border-radius: 100%;
      border: solid 1px black;
    }

    .radio-menu [option=red][selected]:before {
      text-align: center;
      content: "✓";
      color: white;
      background: red;
    }

    .radio-menu [option=green][selected]:before {
      text-align: center;
      content: "✓";
      color: white;
      background: green;
    }

    .radio-menu [option=blue][selected]:before {
      text-align: center;
      content: "✓";
      color: white;
      background: blue;
    }

    p{
      font-size:30px;
    }

  </style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<p [text]="'Color selected is ' + ampselectorstatus + '.'">Amp Selector Event Testing</p>
<amp-selector class="radio-menu" layout="container" name="my-selector"
on="select:AMP.setState({ampselectorstatus: event.selectedOptions})">
  <div option="red">Red</div>
  <div option="green">Green</div>
  <div option="blue">Blue</div>
</amp-selector>
</body>
</html>

결과

select 이벤트는 다음과 같이 사용됩니다.

<p [text]="'Color selected is ' + ampselectorstatus + '.'">Amp Selector Event Testing</p>
<amp-selector class="radio-menu" layout="container" name="my-selector"
on="select:AMP.setState({ampselectorstatus: event.selectedOptions})">
  <div option="red">Red</div>
  <div option="green">Green</div>
  <div option="blue">Blue</div>
</amp-selector>

Amp-sidebar의 이벤트

사용 가능한 이벤트는 sidebarOpen 및 sidebarClose입니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Sidebar</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-actions-and-events.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-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <style amp-custom>
  
    amp-img {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }

    button{ 
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }

    .amp-sidebar-toolbar-target-shown {
      display: none;
    }

    p{
      font-size:30px;
    }

  </style>
</head>
<body>
<h3>Google AMP - Amp Sidebar</h3>
<p [text]="'Sidebar is ' + ampsidebarstatus + '.'">Amp Sidebar Event Testing</p>
<button on="tap:sidebar1">Show Sidebar</button>
<amp-sidebar id="sidebar1"
             layout="nodisplay"
             side="right"
             on="sidebarOpen:AMP.setState({ampsidebarstatus: 
'Opened'});sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>
<div id="target-element">
</div>
</body>
</html>

결과

이벤트는 다음과 같이 사용됩니다.

<p [text]="'Sidebar is ' + ampsidebarstatus + '.'">Amp Sidebar Event Testing</p>
<button on="tap:sidebar1">Show Sidebar</button>
<amp-sidebar id="sidebar1"
             layout="nodisplay"
             side="right"
             on="sidebarOpen:AMP.setState({ampsidebarstatus: 
'Opened'});sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

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

댓글 쓰기