HTML5 <details> 태그로 클릭 시 열리는 아코디언 만들기 – JavaScript 없이 구현하는 팁

 

 

안녕하세요 😊
웹사이트에서 자주 볼 수 있는 UI 중 하나가 바로
클릭하면 열리고 닫히는 FAQ 형태의 아코디언 메뉴입니다.

이런 기능을 대부분 JavaScript로 구현하는 경우가 많지만,
사실 HTML5의 <details> 태그만으로도 아주 간단하게 구현이 가능합니다!

오늘은 초보자 분들도 쉽게 이해할 수 있도록
<details>와 <summary> 태그의 사용법과 함께
실전 예제까지 꼼꼼히 알려드리겠습니다.

---

📍 1. <details> 태그란?

• HTML5에서 새로 추가된 태그
• 숨겨진 내용을 클릭 시 펼쳐서 보여주는 기능
• JavaScript 없이도 동작하는 접이식 인터페이스

함께 사용되는 <summary> 태그는
보여지는 제목 부분, 즉 클릭하는 영역입니다.

---

📍 2. 기본 예제 코드

<details>
  <summary>자주 묻는 질문</summary>
  <p>답변 내용이 이곳에 표시됩니다.</p>
</details>

 

📌 작동 방식:

• 사용자가 summary를 클릭하면
  내부의 <p> 내용이 열리고 닫히는 토글 기능이 작동합니다!

---

📍 3. 여러 개 연결하면 FAQ 완성!

<details>
  <summary>Q1. 배송은 얼마나 걸리나요?</summary>
  <p>A. 보통 2~3일 이내에 도착합니다.</p>
</details>

<details>
  <summary>Q2. 교환/환불은 어떻게 하나요?</summary>
  <p>A. 고객센터에 문의주시면 빠르게 처리해드립니다.</p>
</details>

 

이처럼 <details>를 반복해서 사용하면
간단한 FAQ 섹션도 코드 몇 줄로 구현할 수 있습니다.

---

📍 4. 스타일 커스터마이징하기

details summary {
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
}

details[open] summary {
  color: #1abc9c;
}

 

📌 details[open]은 열린 상태일 때만 적용되는 CSS 선택자입니다.
→ 열린 요약글의 색을 다르게 표시하거나, 화살표 아이콘을 회전시키는 등의 UI 커스터마이징이 가능합니다.

---

📍 5. 브라우저 호환성과 한계

✅ 대부분의 최신 브라우저에서 지원
❗ 단, 커스터마이징이 제한적이며
❗ 열리는 애니메이션 효과는 직접 추가해줘야 합니다.

---

✅ 마무리하며

HTML5의 <details> 태그는
간단한 토글 기능이 필요한 경우 JavaScript 없이도 충분히 구현할 수 있는
아주 유용한 태그입니다.

 

FAQ, 아코디언, 약관 열기/닫기, 메뉴 구조 등에 다양하게 활용할 수 있으니
한 번 직접 사용해보시길 추천드립니다 😊