이 글에서는 amp 구성 요소에서 사용하는 모든 공통 속성에 대해 설명합니다. 공통 속성 목록은 다음과 같습니다.
- fallback
- heights
- layout
- media
- noloading
- on
- placeholder
- sizes
- width and height
Fallback 속성
Fallback 속성은 브라우저가 사용된 요소를 지원하지 않거나 파일 로드에 문제가 있거나 사용된 파일에 오류가 있을 때 주로 사용됩니다.
예를 들어 amp-video를 사용 중이고 미디어 파일에 브라우저에 문제가 있으므로 이러한 경우 fallback 속성을 지정하고 미디어 파일을 표시하는 대신 브라우저에서 미디어 파일을 재생할 수 없거나 지원하지 않는다는 오류 메시지를 표시할 수 있습니다.
Amp-video에 사용된 fallback 속성
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="images/videoposter.png">
<source src="video/bunny.webm"type="video/webm" />
<source src="video/samplevideo.mp4"type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
예제를 사용하여 fallback을 이해하겠습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - fallback attribute</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-attributes.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-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<body>
<h3>Google AMP - fallback attribute</h3>
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="images/videoposter.png">
<source src="video/bunny.webm"type="video/webm" />
<source src="video/samplevideo.mp4"type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>
결과
heights 속성
이 속성은 기본적으로 responsive 레이아웃에 지원됩니다. heights 속성에 media 표현식을 사용할 수 있으며 요소의 높이에 적용됩니다. 또한 백분율 값을 사용하므로 지정된 백분율 너비에 따라 높이가 계산됩니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - heights attribute</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-attributes.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 - heights attribute</h1>
<amp-img src="images/christmas1.jpg"
width="320" height="256"
heights="(min-width:500px) 200px, 80%">
</amp-img>
</body>
</html>
결과
Layout 속성
Amp 레이아웃 속성은 구글 amp에서 사용할 수 있는 중요한 기능 중 하나입니다. Amp 레이아웃은 페이지가 로드될 때 깜박임이나 스크롤 문제없이 amp 구성 요소가 올바르게 렌더링되도록 합니다. 또한 이미지에 대한 http 요청, 데이터 호출과 같은 다른 원격 리소스가 수행되기 전에 페이지 렌더링을 확인합니다.
amp에서 지원하는 레이아웃 목록은 다음과 같습니다.
- Not Present
- Container
- fill
- fixed
- fixed-height
- flex-item
- intrinsic
- nodisplay
- Responsive
이 튜토리얼의 Google AMP – 레이아웃에서 이에 대해 자세히 알아볼 것입니다.
다음과 같은 예제를 통해 layout="responsive"의 작동을
이해하겠습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Layout=responsive Image Example</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-attributes.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=responsive Image Example</h1>
<div class="displayitem">
<amp-img alt="Beautiful Flower"
src="images/flower.jpg"
width="246"
height="205"
layout="responsive">
</amp-img>
</div>
</body>
</html>
결과
Media 속성
이 속성은 대부분의 amp 구성 요소에서 사용할 수 있습니다. 미디어 쿼리가 필요하며 값이 일치하지 않으면 구성 요소가 렌더링되지 않습니다.
예제와 함께 media 속성의 작동을 이해하겠습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Media Attribute</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-attributes.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 - Media Attribute</h1>
<div class="displayitem">
<amp-img media="(min-width: 600px)"
src="images/christmas1.jpg"
width="466"
height="355"
layout="responsive">
</amp-img>
</div>
</body>
</html>
다음과 같이 <amp-img> 태그에 미디어 속성을 사용했습니다.
<amp-img media="(min-width: 600px)"
src="images/christmas1.jpg"
width="466"
height="355"
layout="responsive">
</amp-img>
화면 너비가 600px 미만이면 이미지가 표시되지 않습니다. 구글 에뮬레이터 모바일 모드를 사용하여 예제를 테스트합니다.
스마트폰에서 출력
장치의 너비가 600px 미만이므로 이미지가 보이지 않는 장치를 확인했습니다. 600px 이상의 태블릿에서 확인하면 아래와 같이 출력됩니다.
아이패드에서 출력
Noloading 속성
<amp-img>, <amp-video>,
<amp-facebook>과 같은 amp 구성 요소는 실제 콘텐츠가
로드되어 사용자에게 표시되기 전에 로딩 표시기를 표시합니다.
로딩 표시기 표시를 중지하려면 다음과 같이 noloading 속성을 사용할 수 있습니다.
<amp-img src="images/christmas1.jpg"
noloading
height="300"
width="250"
layout="responsive">
</amp-img>
On 속성
on 속성은 이벤트 처리를 위한 요소와 amp 구성 요소의 action에 사용됩니다. 속성에 사용할 구문은 다음과 같습니다.
구문
on="eventName:elementId[.methodName[(arg1=value, arg2=value)]]"
on 속성에 전달되는 세부 사항은 다음과 같습니다.
- eventName: amp 구성 요소에 사용할 수 있는 이벤트의 이름을 사용합니다. 예를 들어, forforms는 submit-success, submit-error eventNames를 사용할 수 있습니다.
- elementId: 이벤트가 호출되어야하는 요소의 ID를 가져오며 성공 또는 오류에 대해 알고자하는 양식의 ID가 될 수 있습니다.
- methodName: 이벤트 발생시 호출할 메서드의 이름을 사용합니다.
- arg=value: 메서드에 전달된 key=value 형식의 인수를 사용합니다.
다음과 같이 on 속성에 여러 이벤트를 전달할 수도 있습니다.
on="submit-success:lightbox;submit-error:lightbox1"
참고:
이벤트가 여러 개인 경우 on 속성으로 전달되고 세미콜론 (;)을
사용하여 구분됩니다.
Actions 속성
액션은 기본적으로 on 속성과 함께 사용되며 구문은 다음과 같습니다.
on="tab:elementid.hide;"
다음과 같이 여러 작업을 전달할 수 있습니다.
on="tab:elementid.open;tab:elementid.hide;”
Elementid는 action이 수행될 요소의 ID입니다.
Amp에는 모든 amp 구성 요소에서 사용할 수 있는 전역적으로 정의된 이벤트 및 작업이 있습니다. 액션은 탭 이벤트와 hide, show, togglevisibility이 있습니다.
참고:
모든 html 또는 amp 구성 요소에서 togglevisibility를 숨기거나
표시하거나 사용하려면
on="tap:elementid.[ hide / show / togglevisibility ]"를 사용할 수
있습니다.
Placeholder 속성
Placeholder 속성은 input 요소와 같은 모든 html 요소에 사용할 수 있으며 amp 구성 요소에도 사용할 수 있습니다. Placeholder는 페이지에 가장 먼저 표시되며 콘텐츠가 로드되면 자리표시자가 제거되고 보이지 않습니다.
input 요소의 placeholder
<input type="text" id="date" name="date" placeholder="Start Date">
amp 구성 요소의 placeholder
<amp-anim src="images/loreal.gif" width="300" height="250" layout="responsive"> <amp-img placeholder src="images/flower.jpg" layout="fill"></amp-img> </amp-anim>
Sizes 속성
이 속성은 heights 속성과 비슷하게 사용됩니다. 값은 아래와 같은 표현식입니다.
<amp-img src="amp.png"
width="400" height="300"
layout="responsive"
sizes="(min-width: 250px) 250px, 100vw">
</amp-img>
width 및 height 속성
거의 모든 html 요소 및 amp 구성 요소에 사용됩니다. width와 height는 amp 요소가 페이지에서 차지하는 공간을 정하는데 사용됩니다.
<amp-img src="amp.png"
width="400" height="300"
layout="responsive">
</amp-img>