AMP-Layout은 구글 amp에서 사용할 수 있는 중요한 기능 중 하나입니다. Amp Layout은 페이지가 로드될 때 깜박임이나 스크롤 문제없이 amp 구성 요소가 올바르게 렌더링되도록 합니다. 구글 AMP는 이미지에 대한 http 요청, 데이터 호출과 같은 다른 원격 리소스가 수행되기 전에 페이지에서 레이아웃 렌더링이 수행되는지 확인합니다.
레이아웃 속성 목록은 다음과 같습니다.
- width and height
- layout
- sizes
- heights
- media
- placeholder
- fallback
- noloading
이 글에서는 레이아웃 속성에 대해 자세히 살펴보겠습니다. 나머지 속성은 구글 AMP – 속성에서 자세히 설명합니다.
레이아웃 속성
페이지 내에서 구성 요소가 렌더링되는 방식을 결정하는 amp 구성 요소에 레이아웃 속성을 사용할 수 있습니다. amp에서 지원하는 레이아웃 목록은 다음과 같습니다.
- Not Present
- Container
- Fill
- Fixed
- Fixed-height
- Flex-item
- Intrinsic
- Nodisplay
- Responsive
각각의 레이아웃 속성에 대해 amp 구성 요소를 다르게 렌더링하는 방법을 보여주는 예제를 볼 수 있습니다. 예제에서는 amp-img 구성 요소를 사용합니다.
레이아웃 속성이 존재하지 않는 예
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Google AMP - Image Example</h1>
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205">
</amp-img>
</body>
</html>
결과
Container
layout="container"는 대부분 상위 요소에 제공되며 하위 요소는
정의된 크기를 사용합니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout=container Image Example</h1>
<amp-accordion layout="container">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205">
</amp-img>
</amp-accordion>
</body>
</html>
결과
Fill
layout="fill"은 상위 요소의 너비와 높이를 사용합니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout=fill Image Example</h1>
<div style="position:relative;width:100px;height:100px;">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205"
layout="fill">
</amp-img>
</div>
</body>
</html>
결과
Fixed, Fixed-Height
Fixed와 Fixed-Height의 사용법을 이해하기 전에 다음 두 가지 사항에 유의하십시오.
-
layout="fixed"에는 너비와 높이가 있어야 하며 여기에 amp 구성 요소가 표시됩니다. -
layout="fixed-height"는 구성 요소에 높이를 지정해야 합니다. 높이가 변경되지 않았는지 확인합니다. 고정 높이를 사용할 때 너비를 지정하지 않아도 auto로 정해질 수 있습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
div{
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout=fixed and Layout=fixed-height Image Example</h1>
<div style="position:relative;width:100px;height:100px;">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205"
layout="fill">
</amp-img>
</div>
</body>
</html>
결과
Flex-item, Intrinsic
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
displayitem {
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout=flex-item and Layout=intrinsic Image Example</h1>
<div class="displayitem">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
layout="flex-item">
</amp-img>
</div>
<div class="displayitem">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205"
layout="intrinsic">
</amp-img>
</div>
</body>
</html>
결과
Nodisplay, Responsive
layout="nodisplay"인 amp 구성 요소는 display:none과
마찬가지로 페이지에서 공간을 차지하지 않습니다. 이러한 레이아웃에 너비 및 높이
속성을 추가할 필요가 없습니다.
layout="responsive"를 사용하는 amp 구성 요소는 사용 가능한
공간이나 페이지 너비를 차지하며 요소의 가로 세로 비율을 유지하면서 높이가
조정됩니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
displayitem {
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout=no-display and Layout=responsive Image Example</h1>
<div class="displayitem">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
layout="no-display">
</amp-img>
</div>
<div class="displayitem">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205"
layout="responsive">
</amp-img>
</div>
</body>
</html>
결과
구글 AMP에서 지원되는 레이아웃 목록은 다음과 같습니다.
- Accordion
- Carousel
- Lightbox
- Slider
- Sidebar
Amp-Accordion
Amp-accordion은 콘텐츠를 펼치기-접기 형식으로 표시하는데 사용되는 amp 구성 요소입니다. 사용자는 아코디언에서 선택한 섹션을 선택할 수 있는 모바일 장치에서 쉽게 볼 수 있습니다.
Amp-accordion으로 작업하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Amp-accordion 태그
<amp-accordion>
<section class="seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
…
</amp-accordion>
Amp-accordion의 작동 예를 살펴 보겠습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>Google AMP - Amp Accordion</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.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;
}
input[type=submit] {
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);
}
.seca {
background-color:#fff;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion>
<section class="seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section expanded class="seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
결과
Amp-accordion에는 내부에 섹션이 있습니다. 각 섹션에는 2개의 하위 항목이 있을 수 있으며 2개 이상은 브라우저 콘솔에 오류를 표시합니다. 섹션에 컨테이너를 추가하고 여러 요소를 포함할 수 있습니다.
기본적으로 섹션으로 expanded 속성을 사용하여 하나의 섹션을 확장
모드로 유지했습니다.
Auto-collapsing
Auto-collapsing의 경우 예제와 같이 amp-accordion에서 expand-single-section 속성을 사용하고 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>Google AMP - Amp Accordion</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.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;
}
input[type=submit] {
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);
}
.seca {
background-color:#fff;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion expand-single-section>
<section class="seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
결과
Amp-accordion 애니메이션
animate 속성을 사용하여 아코디언 확장 / 축소 애니메이션을 추가할
수 있습니다. 아래 예를 살펴보십시오.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>Google AMP - Amp Accordion</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.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;
}
input[type=submit] {
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);
}
.seca {
background-color:#fff;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion animate expand-single-section>
<section class="seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
결과
AMP Carousel
Amp-carousel은 화면에 유사한 콘텐츠 세트를 표시하고 화살표를 사용하여 콘텐츠 사이를 이동하는 amp 구성 요소입니다.
Amp-carousel을 사용하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Amp-Carousel 태그
Amp-carousel 태그는 다음과 같습니다.
<amp-carousel height="300"
layout="fixed-height"
type="carousel">
<amp-img src="images/christmas1.jpg"
width="400"
height="300"
alt="a sample image">
</amp-img>
…
</amp-carousel>
Amp-carousel에 사용할 수 있는 속성
Amp-carousel에 사용할 수 있는 속성은 아래 표에 나열되어 있습니다.
| 속성 | 설명 |
|---|---|
| type | 캐러셀 항목을 carousel 및 slides 표시할 수 있습니다. |
| height | 캐러셀 높이 (px) |
| controls (선택) |
화면에 왼쪽 / 오른쪽 화살표를 표시합니다. 장치에서 몇 초 후에
사라집니다. CSS를 사용하여 화살표를 항상 표시 할 수 있습니다. |
| data-next-button-aria-label (선택) | "다음" 캐러셀의 라벨을 설정하는데 사용합니다. |
| data-prev-button-aria-label (선택) | "이전" 캐러셀의 라벨을 설정하는데 사용합니다. |
| autoplay (선택) |
5000ms 후 다음 슬라이드를 표시하는데 사용합니다. amp-carousel에서 ms 없이 delay 속성을 사용하여 덮어 쓸 수 있으며, 슬라이드에 loop 속성이 추가되고 슬라이드가 끝에 도달하면 다시 재생됩니다. type="slides"에만 사용되며 자동 재생이 작동하려면최소 2개의 슬라이드가 필요합니다. |
이제 다양한 방법으로 캐 러셀을 표시하는 예제를 살펴 보겠습니다.
Amp-Carousel Carousel
Carousel 타입을 사용하면 항목을 가로로 스크롤할 수 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>amp-carousel</title>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
h3 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google Amp-Carousel</h3>
<amp-carousel height="300"
layout="fixed-height"
type="carousel">
<amp-img src="images/christmas1.jpg" width="400" height="300" alt="a sample image"></amp-img>
<amp-img src="images/christmas2.jpg" width="400" height="300" alt="another sample image"></amp-img>
<amp-img src="images/christmas3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>
</body>
</html>
결과
Amp-Carousel Slides
type="slides"는 한 번에 하나의 항목만 표시합니다. 레이아웃을
fill, fixed, fixed-height, flex-item, nodisplay, responsive으로 사용할 수
있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>amp-carousel</title>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
h3 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google Amp-Carousel</h3>
<amp-carousel height="300"
layout="fixed-height"
type="slides">
<amp-img src="images/christmas1.jpg" width="400" height="300" alt="a sample image"></amp-img>
<amp-img src="images/christmas2.jpg" width="400" height="300" alt="another sample image"></amp-img>
<amp-img src="images/christmas3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>
</body>
</html>
결과
Amp-Carousel Autoplay
아래 주어진 예에서는 지연 시간이 2000ms (2초) 인 autoplay 속성을 추가했습니다. 2초 후에 슬라이드가 변경됩니다. 기본적으로 지연 시간은 5000ms (5초)입니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>amp-carousel</title>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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>
<style amp-custom>
h3 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="amp_example">
<h3>Google Amp-Carousel</h3>
<amp-carousel width="400"
height="300"
layout="responsive"
type="slides"
autoplay
delay="2000">
<amp-img src="images/christmas1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="images/christmas2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
<amp-img src="images/christmas3.jpg" width="400" height="300"
layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>
</body>
</html>
결과
Amp-Lightbox
Amp-lightbox는 전체 뷰포트를 차지하고 오버레이처럼 표시되는 amp 구성 요소입니다.
Amp-lightbox로 작업하려면 다음 스크립트를 추가하세요.
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
amp-lightbox에 사용할 수 있는 속성
amp-lightbox의 속성 목록은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| animate-in (선택) |
라이트 박스를 열기 위한 애니메이션 스타일을 지정할 수 있습니다. 기본적으로 fade-in입니다. 스타일 지정에 지원되는 값은 fade-in, fly-in-bottom 및 fly-in-top입니다. |
| close-button (AMP 광고에 필요) | AMP 광고에 사용되는 경우 라이트 박스에 닫기 버튼을 지정할 수 있습니다. |
| id (필수) | 라이트 박스의 고유 식별자입니다. |
| layout (필수) | 레이아웃 값은 nodisplay입니다. |
| Scrollable (선택) |
amp-lightbox의 이 속성을 사용하면 라이트 박스의 콘텐츠를 스크롤하여 라이트 박스의 높이를 넘길 수 있습니다. |
라이트 박스의 예
<!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-layout.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-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;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on="tap:my-lightbox">Show LightBox</button>
<amp-lightbox id="my-lightbox"
layout="nodisplay">
<div class="lightbox"
on="tap:my-lightbox.close"
tabindex="0">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
결과
라이트 박스를 닫으려면 화면의 아무 곳이나 클릭하세요.
오버레이 유형 광고가 표시될 때 주로 사용되는 라이트 박스에 닫기 버튼을 추가할 수 있습니다. 다음 예를 참조하십시오.
예제
<!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-layout.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-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;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on="tap:my-lightbox">Show LightBox</button>
<amp-lightbox id="my-lightbox"
layout="nodisplay"
close-button>
<div class="lightbox"
on="tap:my-lightbox.close">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
결과
Amp-Sidebar
Amp-sidebar는 버튼을 탭할 때 창 측면에서 슬라이드하는 콘텐츠를 표시하는데 사용되는 amp 구성 요소입니다.
Amp-sidebar로 작업하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Amp-Sidebar 태그
<amp-sidebar id="sidebar"
layout="nodisplay"
side="right">
<span on="tap:sidebar.close">X</span>
Html content here..
</amp-sidebar>
Amp-sidebar에서 사용할 수 있는 속성 목록은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| side |
이 속성은 지정된 방향으로 사이드바를 엽니다. 예: left / right |
| layout | 사이드바 레이아웃에 nodisplay가 사용됩니다. |
| open | 이 속성은 사이드바가 열려있을 때 추가됩니다. |
| data-close-button-aria-label | 닫기 버튼의 라벨을 설정하는데 사용됩니다. |
위의 속성을 사용하여 사이드바로 작업합니다. 아래 표시된 예를 참조하십시오.
예제
<!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-layout.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-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;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Sidebar</h3>
<button on="tap:sidebar">Show Sidebar</button>
<amp-sidebar id="sidebar"
layout="nodisplay"
side="right">
<span on="tap:sidebar.close">X</span>
<ul>
<li><a href="/">About</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact US</a></li>
</ul>
</amp-sidebar>
</body>
</html>
결과
오른쪽 사이드바를 열기 위해 side 속성을 사용했습니다. 왼쪽 값을
side 속성으로 사용하여 왼쪽에서 열 수 있습니다.
layout 속성은 사이드바가 열릴 때
nodisplay.Openattribute가 있어야 합니다.
data-close-button-aria-label 속성은 닫기 버튼을 추가하는 데
사용되며 선택 사항이며 반드시 사용해야 하는 것은 아닙니다.
Amp Image Slider
Amp-image-slider는 이미지 위로 수직으로 움직일 때 슬라이더를 추가하여 두 이미지를 비교하는데 사용되는 amp 구성 요소입니다.
Amp-img-slider로 작업하려면 다음 스크립트를 추가하세요.
<script async custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"></script>
Amp-Img-Slider 태그
<amp-image-slider width="300"
height="200"
layout="responsive">
<amp-img src="images/christmas1.jpg" layout="fill"></amp-img>
<amp-img src="images/christmas2.jpg" layout="fill"></amp-img>
</amp-image-slider>
amp-img-slider의 예가 여기에 표시됩니다. 여기에서는 amp-img-slider 안에 2개의 이미지를 추가했습니다. 첫 번째 이미지는 슬라이더처럼 작동하고 두 번째 이미지의 상단에서 슬라이드할 수 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>Google AMP - Amp Image Slider</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"></script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Image Slider</h3>
<amp-image-slider width="300"
height="200"
layout="responsive">
<amp-img src="images/christmas1.jpg" layout="fill"></amp-img>
<amp-img src="images/christmas2.jpg" layout="fill"></amp-img>
</amp-image-slider>
</body>
</html>
결과
Amp-image-slider에는 아래 예제와 같이 이미지를 변경할 수 있는
seekTo라는 작업이 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>>Google AMP - Amp Image Slider</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-layout.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-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-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;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Image Slider</h3>
<amp-image-slider width="300"
id="slider1"
height="200"
layout="responsive">
<amp-img src="images/christmas1.jpg"layout="fill"></amp-img>
<amp-img src="images/christmas2.jpg"layout="fill"></amp-img>
</amp-image-slider>
<button on="tap:slider1.seekTo(percent=1)">Image 1</button>
<button on="tap:slider1.seekTo(percent=0)">Image 2</button>
</body>
</html>
결과
버튼을 탭하여 이미지를 변경할 수 있습니다.
이미지 변경은 다음과 같이 seekTo 작업을 사용하여 수행됩니다.
<button on="tap:slider1.seekTo(percent=1)">Image 1</button> <button on="tap:slider1.seekTo(percent=0)">Image 2</button>