접을 수 있는 메뉴는 화면 공간이 제한된 모바일 장치에서 사용자 경험을 개선하는 데 도움이 될 수 있습니다. 아코디언 구성 요소는 확장 또는 축소할 수 있는 콘텐츠 목록입니다. 예를 들어, 댓글 섹션을 접거나 내비게이션 메뉴에서 카테고리를 접었다 펴는 것과 같이 다양한 방법으로 웹에서 널리 사용됩니다.
AMP는 아코디언을 만들기 위한 확장 구성 요소로 amp-accordion를 사용합니다.
<script async custom-element="amp-accordion" src="https://cdn. ampproject.org/v0/amp-accordion-0.1.js"></script>
다음으로 몇 가지 콘텐츠 섹션을 추가해 봅시다. AMP에서 section 태그를 사용하려면 다음과 같은 조건이 있습니다.
- 각 섹션은 amp-accordion의 직계 하위 요소이어야 합니다.
- 각 섹션에는 정확히 두 개의 하위 항목이 있어야 합니다.
- 첫 번째 하위 항목은 헤더 태그여야 합니다. (h1, h2, ..., h6 또는 header 중 하나)
- 두 번째 하위 항목은 유효한 AMP-HTML 태그 및 HTML 태그, 또는 다른 amp-accordion 이어야 합니다.
이 조건을 만족하는 코드가 아래에 있습니다. 어떻게 작동하는지 봅시다.
<amp-accordion>
<section>
<h3>Item 1</h3>
<div>The section content</div>
</section>
<section>
<h3>Item 2</h3>
<amp-img src="img/penguin.jpg"
layout="fixed"
width="125"
height="75">
</amp-img>
</section>
...
</amp-accordion>
그러면 다음 이미지에 표시된 것과 같은 아코디언이 생성됩니다.
여기에 섹션 및 콘텐츠를 더 추가하면 확장 가능한 카테고리 메뉴를 만들 수 있을 것입니다.
확장 가능한 카테고리 메뉴 만들기
먼저 AMP-HTML을 작성해 보겠습니다. 카테고리에 대한 각각의 section을 추가합니다. 카테고리 제목은 각 섹션의 헤더에 정하고, 내용은 <li>으로 추가합니다.
<amp-accordion>
<section>
<h3>news</h3>
<ul>
<li>News story 1 content</li>
<li>News story 2 content</li>
</ul>
</section>
<section>
<h3>sports</h3>
<ul>
<li>Sports story 1 content</li>
<li>Sports story 2 content</li>
</ul>
</section>
</amp-accordion>
amp-accordion의 각 section은 다음과 같습니다.
<section>
<h3 class="category-title">news</h3>
<ul>
<li>
<figure class="related-thumb">
<amp-img media="(min-width: 35.01rem)"
src="img/penguin.jpg"
...
</amp-img>
<figcaption>News story 1 content</figcaption>
</figure>
</li>
...
마크 업이 너무 길어서 여기에 표시할 수 없지만 전체 코드는 이 페이지 하단에서 볼 수 있습니다.
amp-accordion 스타일 꾸미기
CSS로 아코디언의 헤더 및 섹션의 스타일을 지정할 수 있습니다. 각각의 섹션을 구분하기 위해 배경색이 없는 회색 상단 테두리를 만들어 보겠습니다.
.category-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.5rem;
color: #005689;
background: none;
border: 0;
border-top: 1px solid #ddd;
padding: 0.25rem;
}
이렇게 스타일까지 꾸미면 카테고리별로 확장할 수 있는 목록이 완성됩니다.