버튼은 AMP의 또 다른 기능입니다. AMP의 버튼에는 변경 사항이 없으며 표준 HTML 버튼 태그처럼 사용됩니다. AMP 페이지의 버튼과 유일한 차이점은 이벤트가 작동한다는 것입니다.
이 글에서는 버튼의 작동과 AMP 구성 요소와 함께 사용하는 방법을 보여주는 몇 가지 예를 살펴 보겠습니다.
라이트 박스 용 샘플 코드
다음 예제는 아래와 같이 버튼을 사용하여 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-button.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-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.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>
결과
이제 화면의 아무 곳이나 클릭하여 라이트 박스를 닫을 수 있습니다.
위의 예에서는 아래와 같이 코드를 사용하여 버튼을 사용했습니다.
<button on="tap:my-lightbox">Show LightBox</button>
다음으로 다음과 같이 on 속성을 사용하여 버튼에 작업을 추가했습니다.
on="tap:my-lightbox"
버튼을 탭하면 작업이 수행됩니다. 라이트 박스의 ID가 주어집니다. 사용자가 버튼을 탭하면 라이트 박스가 열립니다. 마찬가지로 모든 구성 요소와 상호 작용할 때 on action이 있는 버튼을 사용할 수 있습니다.