아코디언 토글 UI (<details>와 <summary>)
웹사이트의 '자주 묻는 질문(FAQ)' 메뉴에서 제목을 클릭하면 내용이 촤르륵 펼쳐지고 다시 누르면 접히는 아코디언(접기/펼치기) UI를 보신 적 있으실 겁니다. 이제 자바스크립트를 단 한 줄도 짜지 않고 순수 HTML만으로 만들 수 있습니다.
🗂️ 자물쇠가 달린 비밀 파일 보관함
<summary>는 누구나 볼 수 있는 파일 보관함의 겉면 이름표입니다. 이름표를 클릭해 <details> 보관함을 열어야만 그 안에 숨겨진 진짜 내용(p 태그 등)을 읽을 수 있습니다. 접근성과 스크린 리더 지원이 자동으로 됩니다!
| 태그/속성 | 설명 |
|---|---|
<details> | 접고 펼칠 수 있는 숨겨진 콘텐츠를 담는 큰 상자(부모 래퍼)입니다. |
<summary> | 상자를 여닫는 손잡이(버튼) 역할을 하며, 항상 화면에 보입니다. 무조건 details 태그의 첫 번째 자식으로 와야 합니다. |
open 속성 | <details open> 이라고 적어두면, 페이지가 켜질 때부터 기본적으로 보관함이 펼쳐진 상태로 시작합니다. |
<!-- 1. 가장 기본적인 아코디언 메뉴 -->
<details>
<summary>배송은 얼마나 걸리나요?</summary>
<p>평균적으로 영업일 기준 2~3일이 소요됩니다. 제주/도서산간 지역은 1~2일 추가됩니다.</p>
</details>
<!-- 2. 기본적으로 펼쳐져 있게 하려면 open 속성 추가 -->
<details open>
<summary>환불 규정이 어떻게 되나요?</summary>
<p>상품 수령 후 7일 이내에 미개봉 상태일 경우 전액 환불 가능합니다.</p>
</details>