AMP

Important: this component does not support your currently selected format stories!

amp-accordion

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

필수 스크립트 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
지원되는 레이아웃 container
amp-accordion의 주석이 포함된 코드 예

동작

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를 설정하여 접힌 상태와 펼친 상태를 유지하지 않도록 설정할 수 있습니다.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<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>
Open this snippet in playground

amp-accordion 데모를 더 보려면 AMP By Example을 방문하세요.

이벤트

다음 이벤트는 accordionsection에서 트리거됩니다.

expand 이 이벤트는 접힌 상태에서 펼친 상태로 변경되는 대상 섹션에서 트리거됩니다. 이미 펼쳐진 섹션에서 expand를 호출하면 이 이벤트가 트리거되지 않습니다.
collapse 이 이벤트는 펼친 상태에서 접힌 상태로 변경되는 대상 섹션에서 트리거됩니다. 이미 접힌 섹션에서 collapse를 호출하면 이 이벤트가 트리거되지 않습니다

작업

expand 이 이벤트는 접힌 상태에서 펼친 상태로 변경되는 타겟 section에서 트리거됩니다. 이미 펼쳐진 section에서 expand를 호출하면 이 이벤트가 트리거되지 않습니다.
toggle amp-accordion펼친 상태와 접힌 상태 간에 전환하는 작업입니다. 인수 없이 호출되면 아코디언의 모든 섹션이 전환됩니다. section 인수와 해당 id를 값으로 단일 섹션을 지정할 수 있습니다.
expand 이 작업은 amp-accordion을 펼칩니다. 이미 펼쳐진 경우 그 상태로 유지됩니다. 인수 없이 호출되면 아코디언의 모든 섹션을 펼칩니다. section 인수와 해당 id를 값으로 단일 섹션을 지정할 수 있습니다.
collapse 이 작업은 amp-accordion을 접습니다. 이미 접힌 경우 그 상태로 유지됩니다. 인수 없이 호출되면 아코디언의 모든 섹션을 접습니다. section 인수와 해당 id를 값으로 단일 섹션을 지정할 수 있습니다.

속성

animate 이 속성을 <amp-accordion>에 설정하면 모든 아코디언 섹션의 펼치기/접기를 애니메이션으로 표시합니다.
disable-session-states 이 속성을 <amp-accordion>에 설정하면 아코디언이 접힌 상태와 펼친 상태를 유지하지 않습니다.
expanded 이 속성을 <section>에 설정하면 페이지 로드 시 섹션을 펼친 상태로 표시합니다.
expand-single-section 이 속성을 <amp-accordion>에 설정하면 한 번에 하나의 <section>만 펼칠 수 있습니다. 사용자가 하나의 <section>에 초점을 맞추면 이전에 펼친 다른 모든 <section>이 접힙니다.

스타일 지정

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

유효성 검사

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

도움이 더 필요한가요?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub