The AMP Component Catalogue

The AMP HTML library consists of a basic runtime that brings the core functionalities of AMP to your page. If you want to add additional features you can do so by using one or more of the ready-to-use AMP components. They are classified as:

Built-in Components that are included in the base library, such as amp-img and amp-pixel.

Extended Extensions to the base library that must be explicitly included in the document as custom elements.

Experimental Components that are released but are not yet ready for wide use.

Highlighted Components

amp-analytics

AMP 문서에서 애널리틱스 데이터를 캡처합니다.

amp-autocomplete

Suggests completed results corresponding to the user input as they type into the input field.

Displays multiple similar pieces of content along a horizontal axis.

광고를 표시하는 컨테이너입니다.

동적으로 데이터를 다운로드하고 템플릿을 사용하여 목록 항목을 생성합니다.

Filter by category

전체 광고-분석 동적-콘텐츠 레이아웃 미디어 프레젠테이션 소셜 social login

광고-분석

Provides configurable behavior for ad exits for AMPHTML ads.

광고를 표시하는 컨테이너입니다.

AMP 문서에서 애널리틱스 데이터를 캡처합니다.

원격으로 제공되는 구성 파일을 사용하여 AMP 페이지에 동적으로 광고를 삽입합니다.

amp-call-tracking

Dynamically replaces a phone number in a hyperlink to enable call tracking.

Used to conduct user experience experiments on AMP pages.

페이지 조회수를 계산하는 추적 픽셀입니다.

amp-social-share

공유 추적 기능을 개발 중입니다.

Provides a way to display and stick ad content at the bottom of the page.

동적-콘텐츠

amp-access-laterpay

게시자가 LaterPay 소액결제 플랫폼과 손쉽게 통합할 수 있습니다.

amp-access-poool

Displays a Poool paywall.

amp-access-scroll

Integrates with Scroll membership.

AMP 페이월 및 구독 지원을 제공합니다.

amp-action-macro

Creates reusable actions.

amp-autocomplete

Suggests completed results corresponding to the user input as they...

사용자 작업 또는 데이터 변경에 따라 데이터 결합 및 JS와 같은 단순한 식을 통해 요소의 변경을 허용합니다.

amp-byside-content

Displays dynamic content from the BySide service.

Provides the ability to collect and store a user's consent through...

amp-date-picker

Provides a widget to select dates. The date picker can render as...

Allows you to create forms to submit input fields in an AMP document.

Provides an approximate country-level geolocation interface.

Creates an iframe and displays a GitHub Gist.

amp-google-document-embed

Displays a document file supported by Google Drive.

Provides input masking capabilities to inputs in AMP forms

amp-install-serviceworker

Installs a ServiceWorker for the current page.

amp-link-rewriter

Allows publishers to rewrite URL based on configurable pattern

동적으로 데이터를 다운로드하고 템플릿을 사용하여 목록 항목을 생성합니다.

Provides a way to display and update content live.

amp-minute-media-player

Displays a Minute Media player.

Mustache.js 템플릿의 렌더링을 허용합니다.

Infinite scrolling experience for document-level page recommendations.

amp-recaptcha-input

Appends a reCAPTCHA v3 token to AMP form submissions.

Renders remote or inline data using a template.

Runs custom JavaScript in a Web Worker.

사용자가 선택할 수 있는 옵션 메뉴를 표시하는 컨트롤을 나타냅니다.

Run Narrativ's Linkmate process inside your AMP page

amp-subscriptions-google

Implements subscription-style access protocol for Subscribe with Google.

amp-subscriptions

Implements subscription-style access protocol.

amp-user-notification

Displays a dismissable notification to the user.

amp-video-docking

Functionality for videos that minimize ("dock") to a corner or a...

Allows users to subscribe to web push notifications.

레이아웃

조회 사용자가 콘텐츠의 개요를 한눈에 파악하고 원하는 섹션으로 자유롭게 이동할 수 있습니다.

A wrapper and minimal UI for a cross-platform, fixed-position...

amp-base-carousel

Displays multiple similar pieces of content along a horizontal...

가로축을 따라 여러 개의 유사한 콘텐츠를 표시합니다.

amp-fx-collection

Provides a collection of preset visual effects, such as parallax.

amp-fx-flying-carpet

Wraps its children in a unique full-screen scrolling container...

iframe을 표시합니다.

amp-image-lightbox

Provides a lightbox effect for a specified image.

amp-image-slider

A slider to compare two images.

amp-inline-gallery

Displays multiple similar pieces of content along a horizontal...

The amp-layout` component allows you to apply aspect-ratio based...

amp-lightbox-gallery

Provides a "lightbox” experience. Upon user interaction, a UI...

전체 표시 영역 '라이트박스' 모달에 요소를 표시합니다.

Displays top-level navigational content inside expandable containers.

amp-nested-menu

Displays a drilldown menu with arbitrary levels of nested submenus.

amp-orientation-observer

Monitors the orientation of an element within the viewport as a...

amp-position-observer

Monitors the position of an element within the viewport as a user...

탐색, 링크, 버튼, 메뉴 등 임시 액세스용 메타 콘텐츠를 표시하는 방법을 제공합니다.

amp-stream-gallery

Displays multiple similar pieces of content at a time along a...

미디어

GL 전송 양식(glTF) 3D 모델을 표시합니다

Embeds videos from 3Q SDN.

Manages an animated image, typically a GIF.

amp-apester-media

Displays an Apester smart unit.

Replaces the HTML5 audio tag.

amp-bodymovin-animation

Displays an AirBnB Bodymovin animation player.

amp-brid-player

Displays a Brid.tv player.

Displays a Brightcove Video Cloud or Perform player.

amp-connatix-player

Displays a cloud-hosted Connatix Player.

amp-dailymotion

Displays a Dailymotion video.

amp-delight-player

The amp-delight-player element displays a cloud-hosted Delight Player.

amp-embedly-card

Displays an Embedly card.

amp-google-read-aloud-player

Embeds the Google Read Aloud Player.

Displays an embedded Hulu video.

Embeds a video player for instream video ads that are integrated...

Replaces the HTML5 img tag.

Displays an Imgur post.

Displays an Izlesene video.

Displays a cloud-hosted JW Player.

amp-kaltura-player

Displays the Kaltura Player as used in Kaltura's Video Platform.

Displays a Megaphone.fm podcast episode or playlist.

Displays a cloud-hosted Mow Player.

amp-nexxtv-player

Displays a media stream from the nexxOMNIA platform.

Displays an AOL O2Player.

amp-ooyala-player

Displays an Ooyala video.

Displays any Playbuzz item content (e.g., list, poll, etc.).

amp-powr-player

An amp-powr-player component displays the Powr Player as...

amp-reach-player

Displays a Beachfront Reach video player.

Run skimlinks inside your AMP page.

Displays a Soundcloud clip.

amp-springboard-player

Displays a Springboard Platform video player.

amp-video-iframe

Embeds an iframe containing a video player.

HTML5 동영상 태그를 대체합니다.

Displays a Vimeo video.

amp-viqeo-player

Displays a Viqeo video player.

amp-wistia-player

Displays a Wistia video.

Embeds a Yotpo on-site widget.

YouTube 동영상을 표시합니다.

프레젠테이션

amp-access-fewcents

Allows publishers to integrate with the Fewcents micropayments platform.

애니메이션을 정의하고 표시합니다.

amp-date-countdown

Displays a countdown sequence to a specified date.

amp-date-display

The amp-date-display component displays time data that you can...

amp-dynamic-css-classes

Adds several dynamic CSS class names onto the <body> element.

Expands or shrinks font size to fit the content within the space given.

Trigger and monitor the loading of custom fonts on AMP pages.

Displays a MathML formula.

Provides zooming and panning for arbitrary content.

amp-slikeplayer

Displays a cloud-hosted Slike Player.

Provides fuzzy timestamps by formatting dates as time ago (for...

amp-truncate-text

Truncates text with an ellipsis, optionally showing an overflow element.

amp-wordpress-embed

Embeds a WordPress post.