아코디언 토글

아코디언 토글 UI (<details> 와 <summary>)

웹사이트의 '자주 묻는 질문(FAQ)' 메뉴에서 제목을 클릭하면 내용이 촤르륵 펼쳐지고 다시 누르면 접히는 아코디언(접기/펼치기) UI를 보신 적 있으실 겁니다.
과거에는 이를 구현하기 위해 복잡한 자바스크립트를 작성해야 했지만, 이제는 단 한 줄의 JS 코드 없이 순수 HTML만으로 완벽하게 동작하는 아코디언 메뉴를 만들 수 있습니다.

1. 자물쇠가 달린 비밀 보관함 비유

🗂️ 부모 태그와 자식 태그의 완벽한 콤비

<summary>는 누구나 볼 수 있는 파일 보관함의 겉면 이름표(손잡이)입니다.
이름표를 클릭해 <details> 보관함을 열어야만 그 안에 숨겨진 진짜 내용(본문 문단 등)을 읽을 수 있습니다.
보너스 꿀팁: 브라우저에 기본 내장된 기능이므로, 마우스 없이 키보드 방향키와 스페이스바로도 완벽하게 작동(웹 접근성 지원)합니다!

2. 아코디언 핵심 태그 정리

태그 / 속성	설명
`<details>`	접고 펼칠 수 있는 숨겨진 콘텐츠들을 하나로 담는 큰 상자(부모 래퍼)입니다. 이 태그 안에 내용물을 작성합니다.
`<summary>`	상자를 여닫는 클릭 가능한 손잡이(버튼) 역할을 하며, 항상 화면에 노출됩니다. ⚠️ 주의사항: 무조건 `<details>` 태그의 바로 아래 첫 번째 자식으로 와야 합니다.
`open` (속성)	`<details open>` 이라고 적어두면, 페이지가 켜질 때부터 기본적으로 보관함이 펼쳐진 상태로 시작합니다.

<div class="faq-container"> <h2>자주 묻는 질문 (FAQ)</h2>  <details class="faq-item"> <summary>배송은 얼마나 걸리나요?</summary> <div class="faq-content"> <p>평균적으로 영업일 기준 2~3일이 소요됩니다. 제주/도서산간 지역은 1~2일 추가됩니다.</p> </div> </details>  <details class="faq-item" open> <summary>환불 규정이 어떻게 되나요?</summary> <div class="faq-content"> <p>상품 수령 후 7일 이내에 미개봉 상태일 경우 전액 환불 가능합니다. (왕복 배송비 차감)</p> </div> </details>  <details class="faq-item"> <summary>해외 배송도 가능한가요?</summary> <div class="faq-content"> <p>현재는 대한민국 국내 배송만 지원하고 있습니다. 추후 글로벌 서비스를 오픈할 예정입니다.</p> </div> </details> </div>

태그 / 속성

설명

<details>

접고 펼칠 수 있는 숨겨진 콘텐츠들을 하나로 담는 큰 상자(부모 래퍼)입니다. 이 태그 안에 내용물을 작성합니다.

<summary>

상자를 여닫는 클릭 가능한 손잡이(버튼) 역할을 하며, 항상 화면에 노출됩니다.
⚠️ 주의사항: 무조건 <details> 태그의 바로 아래 첫 번째 자식으로 와야 합니다.

open (속성)

<details open> 이라고 적어두면, 페이지가 켜질 때부터 기본적으로 보관함이 펼쳐진 상태로 시작합니다.