자리표시자 및 대체 콘텐츠

성능 인지와 점진적 개선이라는 관점에서 AMP에 가능한 한 자리표시자와 대체 콘텐츠를 제공하는 것이 좋습니다.

일부 요소는 제한을 완화하여 효과를 얻을 수 있습니다. 예를 들어 <amp-iframe>을 제공하는 경우 페이지 상단 근처에서 사용할 수 있습니다(없으면 작동하지 않음)

자리표시자

placeholder 속성으로 표시된 요소는 상위 AMP 요소의 자리표시자 역할을 합니다. 지정된 경우 placeholder 요소는 AMP 요소의 직접 하위 요소여야 합니다. placeholder로 표시된 요소는 항상 상위 AMP 요소를 fill합니다.

<amp-anim src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300">
  <amp-img placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill">
  </amp-img>
</amp-anim>

이 코드 조각을 Playground에서 열기

기본적으로 AMP 요소의 리소스가 다운로드되거나 초기화되지 않아도 자리표시자는 AMP 요소에 즉시 표시됩니다. 준비가 완료되면 AMP 요소는 일반적으로 자리표시자를 숨기고 콘텐츠를 표시합니다.

자리표시자가 꼭 AMP 요소일 필요는 없습니다. 모든 HTML 요소는 자리표시자 역할을 할 수 있습니다.

대체 콘텐츠

다음과 같은 경우 요소에 fallback 속성을 지정하여 대체 동작을 나타낼 수 있습니다.

요소를 브라우저에서 지원하지 않는 경우
콘텐츠를 로드하지 못한 경우(예: 트윗이 삭제됨)
이미지 유형이 지원되지 않는 경우(예: WebP는 모든 브라우저에서 지원되지 않음)

fallback 속성은 AMP 요소뿐 아니라 모든 HTML 요소에도 설정할 수 있습니다. 지정된 경우 fallback 요소는 AMP 요소의 직접 하위 요소여야 합니다.

예: 지원되지 않는 기능

다음 예에서 fallback 속성을 사용하여 사용자에게 브라우저가 특정 기능을 지원하지 않음을 알립니다.

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

이 코드 조각을 Playground에서 열기

예: 다른 이미지 형식 게재

다음 예에서 fallback 속성을 사용하여 WebP 형식이 지원되지 않으면 JPEG 파일을 사용하라고 브라우저에 알립니다.

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

이 코드 조각을 Playground에서 열기