눈이 즐거운 앰프 스토리(AMP Story)를 만들어보자. (2)
페이지를 더 만들어보자 이제 앰프 스토리에 페이지를 추가하는 것은 누워서 떡 먹기 수준이 되었을 것이다. “The Joy of Pets”라는 이야기에 몇 페이지를 더 추가할텐데 특별히 어렵지는 않을것이다. 아래의 설명을 바탕으로 남은 페이지를 만들어보자. 하다가 막혀도 걱정할 필요 없다. 최종 완성본(pets-completed.html)을 보고 베끼면 되니까. TIP - 페이지마다 고유한 “id”속성을 추가하는 것을 까먹지 말자. 예) id=”page1” 페이지 1: Cats 하나의 레이어에 이미지와 텍스트를 어떻게 배치하는지 보여준다. 레이어는 하나다: Vertical 템플릿으로 만든다. 엘리먼트가 3개다. Cats라는 제목의 <h1> 엘리먼트 반응형 amp-img (cat.jpg, 720 x 1280px) 다음의 명언을 보여줄 <q> 엘리먼트: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly 페이지 2: Dogs 두개의 레이어를 두고 화면을 꽉 채우는 이미지와 그 위에 텍스트를 어떻게 배치하는지 보여준다. 레이어는 두개다: 레이어 1: fill 템플릿으로 만들고 반응형 전체 이미지 amp-img (dog.jpg, 720 x 1280px) 포함. 레이어 2: thirds 템플릿을 사용하고 두개의 엘리먼트가 들어있다. Dogs라는 제목이 들어간 <h1> 엘리먼트. grid-area는 lower-third로 지정하고 다음의 문구를 넣자: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor...
