The amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the layout.

설명 AMP의 강력한 레이아웃을 모든 요소에 적용하는 일반적인 다목적 컨테이너 요소입니다.
지원되는 레이아웃 container, fill, fixed, fixed-height, flex-item, intrinsic, responsive


amp-layout 구성요소를 사용하면 가로세로 비율 기반 반응형 레이아웃을 모든 요소에 적용할 수 있습니다. amp-layout 구성요소는 기존 AMP 구성요소의 layout 속성과 비슷하게 작동하지만 HTML 마크업을 하위 요소로 지원합니다. 기타 지원되는 모든 레이아웃은 모두 amp-layout과 함께 작동합니다(예: fixed-height, fixed 등).

이 예에서는 amp-layout을 사용하여 인라인 SVG로 그린 원 주변에 반응형 컨테이너를 만듭니다.

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
      Sorry, your browser does not support inline SVG.


이 요소에는 AMP 구성요소로 확장된 공통 속성이 포함됩니다.

유효성 검사

AMP 유효성 검사기 사양의 amp-layout 규칙을 참조하세요.

도움이 더 필요한가요?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub