AMP는 페이지의 요소를 표시하는 방법으로 layout 속성을 제공합니다. layout 속성이 없으면 개발자가 빌드하는 데 복잡한 CSS가 필요합니다. 특히 AMP의 75KB CSS 제한을 고려한다면 layout 속성은 매우 유용하며 편리합니다.
Layout 속성은 일반 HTML 요소를 제외한 AMP의 모든 요소에 적용할 수 있습니다. 속성 값은 다음과 같습니다.
| 속성 값 | 설명 |
|---|---|
| container | 요소 크기는 HTML div와 같은 하위 요소에 의해 정의됩니다. |
| fill | 요소가 사용 가능한 모든 공간을 차지합니다. |
| fixed | 요소의 너비와 높이가 고정되어 있으며 둘 다 지정해야 합니다. |
| fixed-height | 요소가 사용 가능한 공간을 차지하지만 높이는 변경되지 않습니다. |
| flex-item | display:flex;일 때 flex-item 요소들은 부모의 사용 가능한 공간을 차지합니다. 너비와 높이는 필요하지 않습니다. |
| instrinsic | 요소가 사용 가능한 공간을 차지하고 요소의 원래 크기에 도달하거나 CSS 제약 조건에 도달할 때까지 너비 및 높이 속성에 지정된 가로 세로 비율로 높이를 자동으로 조정합니다. |
| nodisplay | 요소가 표시되지 않고 공간을 차지하지 않습니다. 너비와 높이는 필요하지 않습니다. |
| responsive | 요소는 사용 가능한 모든 공간을 차지하고 필수 너비 및 높이 속성에 지정된 가로 세로 비율을 유지하기 위해 높이 크기를 조정합니다. |
구성 요소의 레이아웃 속성에 값이 제공되지 않으면, 해당 레이아웃은 다음과 같이 정해집니다.
| 만약 | 레이아웃 |
|---|---|
| height가 있고, width가 auto이거나 없다면 | fixed-height |
| width, height 또는 sizes, heights가 있다면 | responsive |
| width와 height가 있다면 | fixed |
| width와 height가 없다면 | container |
AMP 레이아웃 시스템에 대한 자세한 내용은 아래의 비디오에 잘 설명되어 있습니다.