페이지 추가하기

이전 페이지에서는 AMP 스토리에 페이지를 추가하는 방법을 익혔습니다. '애완동물이 주는 기쁨' 스토리에 다음 페이지를 추가하는 것도 지금까지 배운 방법과 아주 비슷합니다. 아래에 제공된 정보에 따라 학습한 내용을 활용하여 남은 페이지를 만들어 보세요. 잘 모르는 내용이 있으면 완성된(pets-completed.html) 코드를 살펴보세요.

각 페이지에는 고유 'id' 속성(예: id="page1")이 필요합니다.

1페이지: 고양이

단일 레이어에 이미지와 텍스트를 추가하는 방법을 보여줍니다.

레이어 1개 포함:
- vertical 템플릿을 구현합니다.
- 요소 3개 포함:
  - 제목이 고양이
  - 반응형 amp-img(cat.jpg, 720 x 1280px)
  - 다음 인용문의 <q> 요소: 개는 사람이 부르면 옵니다. 고양이는 뭔가 할 말이 있으면 사람에게 옵니다. --Mary Bly

2페이지: 개

텍스트를 정렬하고 레이어 두 개로 화면을 채우는 이미지를 표시하는 방법을 보여줍니다.

레이어 2개 포함:
- 레이어 1: fill 템플릿을 구현하고 반응형 amp-img(dog.jpg, 720 x 1280px)
- 레이어 2: thirds 템플릿을 구현하고 요소 2개를 포함합니다.
  - 제목이 개
  - lower-third를 차지하는 grid-area를 지정하고 다음 텍스트를 포함하는
    요소: 개는 처음으로 길들여진 동물이라고 합니다. 약 10,000년 동안 사람들과 함께 지내왔습니다. 몇몇 과학자들은 애완동물이든 야생동물이든 모든 개가 작은 남아시아 늑대라는 공통 조상을 공유한다고 주장합니다.

3페이지: 새

텍스트를 정렬하고 화면을 채우는 이미지를 표시하며 페이지에 백그라운드 오디오를 넣는 방법을 보여줍니다.

레이어 3개 포함:
- 레이어 1: fill 템플릿을 구현하고 반응형 amp-img(bird.jpg, 720 x 1280px)
- 레이어 2: vertical 템플릿을 구현하고 요소 한 개를 포함합니다.
  - 제목이 새
- 레이어 3: vertical 템플릿을 구현하고 요소 한 개를 포함합니다.
  - 다음 인용문의 <q> 요소: 새는 깃털이 있고 날 수 있고 노래할 수 있습니다. 그중에 가장 중요하지 않은 것은 깃털입니다. --Marjorie Allen Seiffert
  - 세 번째 레이어가 class="bottom"을 지정하여 하위 요소를 화면 하단에 정렬합니다.
페이지가 표시되는 동안 백그라운드에서 오디오 파일을 재생합니다. 전체 스토리나 페이지 한 개의 백그라운드에서 오디오를 재생할 수 있습니다. 페이지의 오디오를 재생하려면 background-audio="assets/bird-singing.mp3" 속성을 <amp-story-page> 요소에 추가합니다.

4페이지 - 토끼

텍스트를 정렬하고 페이지에 화면을 채우는 동영상을 표시하는 방법을 보여줍니다.

레이어 3개 포함:
- 레이어 1: fill 템플릿을 구현하고 반응형 amp-video(rabbit.mp4)를 포함합니다.
  - 동영상이 표시되도록 섹션에 amp-video 구성요소의 필수 스크립트를 추가합니다.
  - poster 이미지(rabbit.jpg)를 지정합니다. 이 속성은 유효한 AMP 스토리를 위해 필요합니다.
  - autoplay 속성으로 동영상이 자동 재생되도록 설정합니다. 이 속성은 유효한 AMP 스토리를 위해 필요합니다.
  - loop 속성으로 동영상이 자동 루프백되도록 설정합니다.
  - 크기를 width="720" height="1280", layout="responsive"로 설정합니다.
- 레이어 2: vertical 템플릿을 구현하고 요소 한 개를 포함합니다.
  - 제목이 토끼
- 레이어 3: vertical 템플릿을 구현하고 요소 한 개를 포함합니다.
  - 다음 텍스트를 포함하는 <p> 요소: 토끼는 간단한 음성 명령을 배울 수 있어 이름을 부르면 다가오고 호기심이 많으며 장난기가 많습니다.
  - 레이어에 bottom CSS 클래스를 적용하여 하위 요소를 화면 하단에 정렬합니다.

'애완동물이 주는 기쁨' 스토리가 거의 완성되었습니다. 마지막 페이지에서는 애니메이션을 사용하여 모든 애완동물을 한곳에 모을 것입니다.

Previous chapter Next chapter

Written by @bpaduch