Google AMP-속성

이 장에서는 amp-components에서 사용하는 모든 공통 속성에 대해 설명합니다.

공통 속성 목록은 다음과 같습니다.

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • 너비와 높이

대체 속성

fallback 속성은 브라우저가 사용 된 요소를 지원하지 않거나 파일로드에 문제가 있거나 사용 된 파일에 오류가있을 때 주로 사용됩니다.

예를 들어 amp-video를 사용 중이고 미디어 파일에 브라우저에 문제가 있으므로 이러한 경우 fallback 속성을 지정하고 미디어 파일을 표시하는 대신 브라우저에서 미디어 파일을 재생할 수 없거나 지원하지 않는다는 메시지를 표시 할 수 있습니다. 페이지의 오류 메시지.

amp-video에 사용 된 대체

<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>

예제를 사용하여 작동 OS 폴백을 이해합시다.

예

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-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 - Amp Video</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 속성에 미디어 표현식을 사용할 수 있으며 요소의 높이에 적용됩니다. 또한 백분율 값을 사용하므로 주어진 백분율 너비에 따라 높이가 계산됩니다.

예

<!doctype html>
<html amp lang = "en">
   <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 = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-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>

산출

레이아웃 속성

AMP-Layout은 google-amp에서 사용할 수있는 중요한 기능 중 하나입니다. Amp Layout은 페이지가로드 될 때 깜박임이나 스크롤 문제없이 앰프 구성 요소가 올바르게 렌더링되도록합니다. 또한 이미지에 대한 http 요청, 데이터 호출과 같은 다른 원격 리소스가 수행되기 전에 페이지 렌더링을 확인합니다.

amp에서 지원하는 레이아웃 목록은 다음과 같습니다.

  • 존재하지 않음
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

당신은 장에서 같은 것에 대해 자세히 배울 것입니다 Google AMP − Layout 이 튜토리얼의.

다음과 같은 예제의 도움으로 layout =”responsive”의 작동을 이해해 보겠습니다.

예

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-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>

산출

미디어 속성

이 속성은 대부분의 앰프 구성 요소에서 사용할 수 있습니다. 미디어 쿼리가 필요하며 값이 일치하지 않으면 구성 요소가 렌더링되지 않습니다.

예를 들어 미디어 속성의 작동을 이해합시다.

예

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-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 미만이면 이미지가 표시되지 않습니다. Google 에뮬레이터 모바일 모드를 사용하여 예제를 테스트합니다.

스마트 폰으로 출력

장치의 너비가 600px 미만이므로 이미지가 보이지 않는 장치를 확인했습니다. 태블릿에서 확인하면 아래와 같이 출력됩니다.

IPAD의 출력

Noloading 속성

<amp-img>, <amp-video>, <amp-facebook>과 같은 앰프 구성 요소는 실제 콘텐츠가로드되어 사용자에게 표시되기 전에로드 표시기를 표시합니다.

로딩 표시기 표시를 중지하려면 다음과 같이 noloading 속성을 사용할 수 있습니다.

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

속성

on 속성은 이벤트 처리를위한 요소와 amp- 구성 요소의 작업에 사용됩니다. 속성에 사용할 구문은 다음과 같습니다.

구문-

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

전달 된 세부 정보 on 속성은 다음과 같습니다-

  • eventName− 이것은 amp- 구성 요소에 사용할 수있는 이벤트의 이름을 사용합니다. 예를 들어 양식의 경우 submit-success, submit-error eventNames를 사용할 수 있습니다.

  • elementId− 이벤트가 호출되어야하는 요소의 ID를받습니다. 성공 또는 오류에 대해 알고 자하는 양식의 ID 일 수 있습니다.

  • methodName − 이벤트 발생시 호출 할 메서드의 이름을받습니다.

  • arg=value − 이것은 메소드에 전달 된 key = value 형식의 인수를받습니다.

다음과 같이 On 속성에 여러 이벤트를 전달할 수도 있습니다.

on = "submit-success:lightbox;submit-error:lightbox1"

Note − 이벤트가 여러 개인 경우 on 속성으로 전달되고 세미콜론 (;)을 사용하여 구분됩니다.

작업 속성

액션은 기본적으로 on 속성과 함께 사용되며 구문은 다음과 같습니다.

on = "tab:elementid.hide;"

다음과 같이 여러 작업을 전달할 수 있습니다.

on = "tab:elementid.open;tab:elementid.hide;”

Elementid 조치가 수행 될 요소의 ID입니다.

Amp에는 모든 amp 구성 요소에서 사용할 수있는 전역 적으로 정의 된 이벤트 및 작업이 있습니다. tap events 그리고 행동은 hide, show 과 togglevisibility.

Note − html 또는 amp 구성 요소에서 togglevisibility를 숨기거나 표시하거나 사용하려면 다음을 사용할 수 있습니다. on=”tap:elementid.[hide/show/togglevisibility]”

자리 표시 자 속성

Placeholder 속성은 input 요소와 같은 모든 html 요소에서 사용할 수 있으며 amp-component에서도 사용할 수 있습니다. 보이지 않게 만들었습니다.

입력 요소의 자리 표시 자

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

amp-component의 자리 표시 자

<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>

크기 속성

이것은 heights 속성처럼 사용됩니다. 값은 아래와 같은 식입니다.

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

너비 및 높이 속성

거의 모든 html 요소 및 amp 구성 요소에 사용됩니다. 너비와 높이는 amp 요소가 페이지에서 차지하는 공간을 언급하는 데 사용됩니다.

예

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved