AMP 레이아웃 살펴보기

이 페이지는 서로 다른 AMP 안의 레이아웃과 스크린이 리사이즈될 때 어떻게 동작하는 지 보여줍니다.

fill

fill 레이아웃을 사용하면 요소는 width와 height 모두 사용할 수 있는 공간을 사용합니다. 즉 fill 요소의 레이아웃과 크기는 해당 부모와 일치합니다.

fixed 레이아웃을 사용하면 요소는 요소의 width 및 height 속성을 기반으로 고정된 크기를 유지합니다. (반응형 없음)

fixed-height 레이아웃을 사용하면 요소는 사용 가능한 공간을 사용하지만 높이는 변경되지 않습니다. 이 레이아웃은 콘텐츠를 수평으로 배치해야하는 요소에 적합합니다. (예: amp-carousel)

flex-item 레이아웃을 사용하면 부모 요소 내의 요소 및 다른 요소가 플렉스박스 모델 기반으로 사용 가능한 공간을 차지합니다.

responsive 레이아웃을 사용하면 요소가 사용할 수 있는 공간을 사용하고 요소의 width 및 height 속성으로 지정된 종횡비로 높이를 자동으로 조정합니다.

intrinsic 레이아웃을 사용하면 요소의 width 및 height 속성으로 정의된 종횡비에 따라 요소의 원래 크기에 도달하거나 CSS 제약 조건에 도달할 때까지 요소의 사용 가능한 공간을 가져와서 크기를 자동으로 조정합니다.

container 레이아웃을 사용하면 일반 HTML div 태그처럼 그 자식요소로 크기를 정합니다. 요소가 특정한 레이아웃을 가지고 있다고 가정했을 때 container처럼 동작합니다.

nodisplay 레이아웃을 사용하면 요소가 보이지 않습니다. 요소는 공간을 가지지 않으며 display 스타일이 none인 것 처럼 동작합니다.