구글 AMP 기본 구성 요소 유형

1 min read

AMP는 HTML 태그와 유사한 기능을 하는 대체 가능한 AMP HTML 태그를 제공하지만, 이는 제한적이고 성능에 최적화된 방식으로 제공합니다. 이를 AMP Components 또는 AMP Custom Elements라고 합니다.

AMP 구성 요소에는 세 가지 유형이 있습니다.

내장(Built-in) 구성 요소

내장 구성 요소는 AMP-HTML 페이지에서 바로 사용할 수 있습니다. AMP 자바스크립트 라이브러리와 함께 제공되므로 문서 헤드에 추가할 필요가 없습니다. 여기에는 가장 기본적으로 사용되는 태그인 amp-img, amp-video, amp-pixel 등이 포함됩니다.

확장(Extended) 구성 요소

확장 구성 요소는 일반적인 구성 요소의 기능을 넘어 확장합니다. 이 기능을 페이지에서 사용하기 전에 문서 헤드에 반드시 해당 구성 요소가 포함된 스크립트 태그를 추가해야 합니다. 예를 들어 유튜브를 사용하려면 AMP 문서의 헤드에 다음을 추가해야 합니다.

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

실험(Experimental) 구성 요소

공개적으로 출시되었지만 아직 확정되지 않았고 아직 검증되지 않은 구성 요소입니다. 실험적 기능은 선택 가능하며, 문서 또는 기능 수준에서 활성화할 수 있습니다. AMP 실험 기능은 여기에 온라인으로 잘 설명되어 있습니다.

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

관심 있을 만한 글

  • 탭 콘텐츠는 페이지 내에서 이동하지 않고 탭을 전환하여 다양한 보기 방식를 제공합니다. 탭으로 구분된 콘텐츠는 amp-selector를 사용하여 구현할 수 있습니다. 사용자가 선택할 수 있는 옵션의 목록을 표시하는 구성 요소입니다. 예를 들면 전자 상거래에서는 제품…
  • amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. Events 이벤트에 대한 액션 구문은 다음과 같습니다. on="eventName:elementId[.methodName[(arg1=value, arg2=value…
  • amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…
  • Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다. Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-animati…
  • 구글 amp-user-notification은 사용자에게 닫을 수 있는 대화 상자 메시지를 표시하는데 사용됩니다. 우리는 페이지의 쿠키에 대해 사용자에게 알리는데 사용할 수 있습니다. amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <sc…
  • Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다. amp-list를 사용하려면 다음 스크립트를 포함해야 합니다. <script async custom-element="am…

댓글 쓰기