Home
AMP
Component

구글 AMP – Selector

6 min read

Amp-selector는 옵션 메뉴를 표시하는 amp 구성 요소이며 사용자가 옵션 중에서 선택할 수 있습니다. 표시되는 옵션은 텍스트, 이미지 또는 기타 amp 구성 요소 일 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다.

amp-selector를 사용하려면 다음 자바스크립트 파일을 포함해야 합니다.

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

Amp-selector의 형식

다음 코드는 amp-selector 형식의 샘플을 보여줍니다.

<amp-selector layout="container">
  <amp-img src="images/christmas1.jpg"
           width="60"
           height="40"
           option="1">
  </amp-img>
  <amp-img src="images/christmas2.jpg"
           width="60"
           height="40"
           option="2">
 </amp-img> 
  <amp-img src="images/christmas3.jpg"
           width="60"
           height="40"
           option="3">
  </amp-img>
  <amp-img src="images/christmas4.jpg"
           width="60"
           height="40"
           option="4">
  </amp-img>
</amp-selector>

amp-selector 내부에서 표준 html 태그 또는 amp 구성 요소를 사용할 수 있으며, 내용은 화면에 메뉴처럼 표시되며 사용자가 선택할 수 있으며 표시되는 메뉴는 단일 선택 또는 다중 선택이 가능합니다.

아래에 주어진 단일 및 다중 선택의 예를 통해 이것을 이해합시다.

amp-selector 단일 선택

코드는 amp-selector 단일 선택의 샘플입니다.

<!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-selector.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-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <style amp-custom>
    amp-selector:not([disabled]) amp-img[option][selected]:not([disabled]) {
      outline-color: #b6A848;
      outline-width: 2px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout="container">
  <amp-img src="images/christmas1.jpg"
           width="60"
           height="40"
           option="1">
  </amp-img>
  <amp-img src="images/christmas2.jpg"
           width="60"
           height="40"
           option="2">
  </amp-img> 
  <amp-img src="images/christmas3.jpg"
           width="60"
           height="40"
           option="3">
  </amp-img>
  <amp-img src="images/christmas4.jpg"
           width="60"
           height="40"
           option="4">
  </amp-img>
</amp-selector>
</body>
</html>

결과

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

위의 예에서는 amp-selector를 사용하고 내부 이미지를 사용하여 옵션을 표시했습니다. 단일 선택 selector이므로 출력에 표시된대로 하나의 이미지를 선택할 수 있습니다.

amp-selector 다중 선택

이 예제에서는 여러 속성을 사용하여 이미지와 함께 amp-selector를 표시하고 selector에서 여러 옵션을 선택할 수 있습니다.

예제

<!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-selector.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-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <style amp-custom>
    amp-selector:not([disabled]) amp-img[option][selected]:not([disabled]) {
      outline-color: blue;
      outline-width: 2px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout="container" multiple>
  <amp-img src="images/christmas1.jpg"
           width="60"
           height="40"
           option="1">
  </amp-img>
  <amp-img src="images/christmas2.jpg"
           width="60"
           height="40"
           option="2">
  </amp-img> 
  <amp-img src="images/christmas3.jpg"
           width="60"
           height="40"
           option="3">
  </amp-img>
  <amp-img src="images/christmas4.jpg"
           width="60"
           height="40"
           option="4">
  </amp-img>
</amp-selector>
</body>
</html>

결과

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

아래 코드와 같이 amp-selector를 사용하여 라디오 버튼을 표시할 수도 있습니다.

예제

<!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-selector.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-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;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector class="radio-menu" layout="container" name="my-selector">
  <div option="red">Red</div>
  <div option="green">Green</div>
  <div option="blue">Blue</div>
</amp-selector>
</body>
</html>

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

관심 있을 만한 글

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

댓글 쓰기