amp-layout
Description
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.
Supported Layouts
| 설명 | 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.
</svg>
</amp-layout>
속성
이 요소에는 AMP 구성요소로 확장된 공통 속성이 포함됩니다.
유효성 검사
AMP 유효성 검사기 사양의 amp-layout 규칙을 참조하세요.
도움이 더 필요하신가요?
이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.
Stack Overflow로 이동 버그나 누락된 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기