아코디언 FAQ 메뉴 구현: details 태그 하나로 접고 펼치는 블록 만드는 방법 4가지

details 태그 하나로 접고 펼치는 블록 만드는 방법 4가지 참고 이미지 — 아코디언 FAQ 메뉴 구현

아코디언 FAQ 메뉴 구현: details 태그 하나로 접고 펼치는 블록 만드는 방법 4가지

태그 하나로 JavaScript 없이 완성할 수 있는 가장 실용적인 UI 요소 중 하나다. 티스토리 블로그 운영자나 프리랜서 웹 개발자라면 이 사실을 꼭 알아둬야 한다. 처음엔 나도 jQuery 플러그인이나 외부 스크립트를 써야 한다고 생각했는데, 알고 보니 HTML5에 이미 내장된 기능이었다.
마치 서랍장처럼, 필요한 서랍만 열어서 내용을 확인하고 닫는 구조. 그게 "아코디언 FAQ"의 핵심이다. 페이지를 길게 늘어뜨리지 않으면서도 많은 정보를 담을 수 있어서, 정보량이 많은 포스팅이나 상품 상세 페이지에 딱 맞다.

📋 목차

아코디언 FAQ란 무엇인가
details 태그를 써야 하는 이유
기본 구조: details와 summary
방법 1 – 기본 아코디언 구현
방법 2 – name 속성으로 하나만 열리게 하기
방법 3 – CSS로 스타일 완전 커스텀
방법 4 – 애니메이션 추가하기
SEO에 미치는 영향
자주 묻는 질문

📦 아코디언 FAQ란 무엇인가

"아코디언 FAQ"는 질문 항목을 클릭하면 답변이 펼쳐지고, 다시 클릭하면 접히는 UI다. 흔히 FAQ 섹션, 제품 상세 스펙 탭, 이용약관 요약 등에 쓰인다. 이름처럼 아코디언 악기처럼 접었다 펼쳤다 하는 구조다.

기존에는 이런 걸 만들려면 JavaScript로 click 이벤트를 걸고 클래스 토글을 하거나, jQuery slideDown(), slideUp() 같은 함수를 써야 했다. 근데 HTML5 태그를 쓰면 그런거 다 필요 없다

🤔 details 태그를 써야 하는 이유

크게 세 가지다.

첫째, 접근성(Accessibility). 스크린 리더가를 네이티브로 인식한다. ARIA 속성을 별도로 달지 않아도 된다는 뜻이다.

둘째, SEO. 구글이 안의 콘텐츠를 인덱싱한다. FAQ 스키마와 함께 쓰면 검색 결과에 리치 스니펫이 노출될 가능성이 높아진다. 블로그 유입에 직결되는 부분이다.

셋째, 코드 단순함. "아코디언 FAQ"를 vanilla JS로 만들면 최소 20~30줄은 되는데, 쓰면 HTML 3줄이다. 유지보수 측면에서 압도적으로 유리하다.

🏗️ 기본 구조: details와 summary

태그는 기본적으로 접혀 있는 컨테이너고 그 안의 제목 역할을 한다.를 클릭하면 나머지 내용이 펼쳐진다

<details>
  <summary>질문 제목이 여기 들어갑니다</summary>
  <p>답변 내용이 여기 들어갑니다. 길게 써도 됩니다.</p>
</details>

open 속성을 추가하면 처음부터 펼쳐진 상태로 렌더링된다. 특정 질문을 기본적으로 열어두고 싶을 때 쓴다.

<details open>
  <summary>자주 보는 질문</summary>
  <p>이건 처음부터 열려 있음</p>
</details>

🔧 방법 1 – 기본 아코디언 구현

가장 기본적인 "아코디언 FAQ" 구현이다. CSS 없이 HTML만으로도 동작한다.

<details>
  <summary>배송은 얼마나 걸리나요?</summary>
  <p>주문 후 영업일 기준 2~3일 이내에 배송됩니다.</p>
</details>

<details>
  <summary>환불은 어떻게 하나요?</summary>
  <p>수령 후 7일 이내에 고객센터로 연락주시면 처리해드립니다.</p>
</details>

<details>
  <summary>해외 배송도 되나요?</summary>
  <p>현재 국내 배송만 지원합니다.</p>
</details>

이것만으로 클릭해서 열고 닫는 기능이 완성된다. 진짜다. 스크립트 한 줄도 없다.

🔁 방법 2 – name 속성으로 하나만 열리게 하기

HTML 2023년 스펙에 성이 추가됐다. 같은 name 값을 가진들은 라디오 버튼처럼 동작해서 하나를 열면 다른 게 자동으로 닫힌다. 진정한 "아코디언 FAQ" 동작이다.

<details name="faq">
  <summary>첫 번째 질문</summary>
  <p>첫 번째 답변</p>
</details>

<details name="faq">
  <summary>두 번째 질문</summary>
  <p>두 번째 답변</p>
</details>

<details name="faq">
  <summary>세 번째 질문</summary>
  <p>세 번째 답변</p>
</details>

name 속성은 2024년 기준 주요 브라우저(Chrome 120+, Firefox 130+, Safari 17.2+)에서 지원된다. 구버전 브라우저 대응이 필요하다면 확인이 필요하다.

🎨 방법 3 – CSS로 스타일 완전 커스텀

기본 는 생긴 게 좀 투박하다. 삼각형 마커도 브라우저마다 다르게 생겼다. CSS로 완전히 덮어씌워서 예쁘게 만들어보자.

/* 기본 마커 제거 */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* 커스텀 스타일 */
details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  background: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.2s;
}

details[open] summary::after {
  content: '−';
}

details p {
  padding: 16px 20px;
  margin: 0;
  color: #555;
  line-height: 1.7;
}

details[open] 선택자를 이용하면 열린 상태일 때만 다른 스타일을 적용할 수 있다. 이걸 활용하면 아이콘을 + 에서 − 로 바꾸는 것도 CSS만으로 해결된다.

✨ 방법 4 – 애니메이션 추가하기

순수 CSS로펼치는 애니메이션을 만드는 건 조금 까다롭다.로는 transition이 안 먹히기 때문이다. 대신트릭이나 를 활용할 수 있다.

details[open] .faq-answer {
  animation: fadeSlideDown 0.25s ease;
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

완전한 슬라이드 애니메이션이 필요하다면 JS로 max-height를 제어하는 방식이 더 자연스럽긴 하다. 하지만 fade 효과 정도는 CSS만으로 충분히 구현 가능하다.

📈 SEO에 미치는 영향

구글은 안의 콘텐츠를 인덱싱한다고 공식적으로 밝히고 있다. 단, "아코디언 FAQ"를 SEO 목적으로 활용하려면 FAQ 페이지 스키마(Schema.org/FAQPage)를 JSON-LD 형태로 추가하는 게 좋다. 이렇게 하면 검색 결과 페이지(SERP)에서 질문과 답변이 바로 보이는 리치 스니펫이 생성될 수 있다. 클릭률(CTR) 향상에 직접적인 도움이 된다.

❓ 자주 묻는 질문

Q. details 태그가 모든 브라우저에서 되나요?

A. IE를 제외한 모든 현대 브라우저에서 지원된다. 2024년 기준 글로벌 지원율은 97% 이상이다.

Q. 하나 열면 다른 거 자동으로 닫히게 하려면 꼭 JS가 필요한가요?

A. name 속성을 지원하는 브라우저에서는 JS 없이 가능하다. 구버전 지원이 필요하다면 JS 몇 줄을 추가해야 한다.

Q. 티스토리에서도 쓸 수 있나요?

A. 가능하다. 티스토리 HTML 편집 모드에서 details, summary 태그를 그대로 사용하면 된다. CSS는 스킨 편집에서 추가하면 된다.

태그는 알면 알수록 쓸 곳이 많다. FAQ는 물론이고 용어 설명, 코드 예시 숨김, 부록 내용 접기 등 다양하게 활용할 수 있다. 무엇보다 시맨틱하고, 접근성 좋고, 가볍다. "아코디언 FAQ"를 구현할 일이 있다면 라이브러리 찾기 전에 이 태그부터 써봐라.

출처
MDN Web Docs – details: https://developer.mozilla.org/ko/docs/Web/HTML/Element/details
MDN Web Docs – summary: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
Google Search Central – FAQ 리치 결과: https://developers.google.com/search/docs/appearance/structured-data/faqpage
Can I Use – details: https://caniuse.com/?search=details

저작자표시 비영리 동일조건 (새창열림)

⚡ 정보 부스터 <IT, 맛집투어, 여행을가자, 이모저모> 🚀