amp-accordion

1.0 0.1

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

조회 사용자가 콘텐츠의 개요를 한눈에 파악하고 원하는 섹션으로 자유롭게 이동할 수 있습니다. 섹션에 몇 문장밖에 없을 때도 스크롤해야 하는 휴대기기에 유용합니다.

동작

amp-accordion 구성요소를 사용하면 접거나 쳐지는 콘텐츠 섹션을 표시할 수 있습니다. 각 amp-accordion 구성요소의 바로 하위 구성요소는 아코디언의 섹션으로 간주됩니다. 각 노드는 <section> 태그여야 합니다.

• amp-accordion은 하나 이상의 <section> 요소를 직계 하위로 포함할 수 있습니다.
• 각 <section>에는 정확히 두 개의 직계 하위가 포함되어야 합니다.
• 섹션의 첫 번째 하위 항목은 섹션의 제목을 나타내며, 제목 요소(h1, h2, ..., h6, header 중 하나)여야 합니다.
• 섹션의 두 번째 하위 항목은 AMP HTML에서 허용되는 어떠한 태그든지 될 수 있으며, 섹션의 콘텐츠를 나타냅니다.
• 섹션의 제목을 클릭하거나 탭하면 섹션이 펼쳐지거나 접힙니다.
• amp-accordion 요소에서 각 섹션의 접힌 상태와 펼친 상태는 세션 수준 동안 유지됩니다. 이러한 상태를 유지하지 않으려면 disable-session-states 속성을 amp-accordion 요소에 추가하세요.

예: 아코디언 표시

이 예에서는 3개의 섹션을 표시하며, 세 번째 섹션이 페이지 로드 시 펼쳐집니다. disable-session-states를 설정하여 접힌 상태와 펼친 상태를 유지하지 않도록 설정할 수 있습니다.

<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>

이벤트

다음 이벤트는 accordion의 section에서 트리거됩니다.

작업

속성

스타일 지정

• amp-accordion 요소 선택기를 사용해 자유롭게 스타일을 지정할 수 있습니다.
• amp-accordion 요소는 항상 display: block입니다.
• <section>, 제목, 콘텐츠 요소는 플로팅되도록 설정할 수 없습니다.
• 섹션을 펼치면 <section> 요소에 expanded 속성이 포함됩니다.
• 콘텐츠 요소는 overflow: hidden으로 명확히 고정되므로 스크롤바를 포함할 수 없습니다.
• <amp-accordion>, <section>, 제목, 콘텐츠 요소의 여백은 0으로 설정되며 맞춤 스타일에서 재정의될 수 있습니다.
• 헤더와 콘텐츠 요소는 모두 position: relative입니다.

유효성 검사

AMP 유효성 검사기 사양의 amp-accordion 규칙을 참조하세요.