확장된 상태 표시로 AMP 아코디언 메뉴 개선

아코디언 메뉴가 확장되면, AMP가 해당 섹션에 expanded 속성을 적용합니다. 이 expanded 속성을 사용하여 아코디언 메뉴 개선할 수 있습니다.

다음과 같이 확장된 상태의 아코디언 섹션을 CSS로 타겟팅 할 수 있습니다.

• expanded: amp-accordion section[expanded] {...}
• collapsed: amp-accordion section:not([expanded]) {...} (또는 간단히 amp-accordion section {...})

따라서 다음과 같이 CSS 가상 요소를 사용하여 섹션을 확장하거나 축소할 수 있습니다.

amp-accordion section [expanded] h3::before {
  content: +';
}

amp-accordion section: not ([expanded]) h3::before {
  content: -';
}

이번에는 열기 / 닫기 버튼을 헤더 섹션의 오른쪽으로 이동시켜 보겠습니다. 그리고 chevron 문자를 버튼으로 사용합니다. (CSS로 90도 회전시킴.)

amp-accordion section[expanded] h3::after {
  content: '⟨';
  position: absolute;
  right: 0.5rem;
  color: #005689;
  transform: rotate (90deg);
}

amp-accordion section:not([expanded]) h3::after {
  content: '⟩'; /* Unicode: U+276F */
  position: absolute;
  right: 0.5rem;
  color: #005689;
  transform: rotate(90deg);
}

이제 아코디언 메뉴는 실제 웹 사이트에서 사용하는 것처럼 꽤 좋아 보입니다.