FAQ 아코디언 만들기, details와 summary 태그로 스크립트 없이 접고 펴는 법
자주 묻는 질문(FAQ)처럼 질문을 누르면 답이 펼쳐지는 아코디언 메뉴는 jQuery나 별도 스크립트 없이 HTML의 details와 summary 태그만으로 만들 수 있습니다.
키보드 조작과 화면낭독기 지원이 기본으로 들어 있고, 스크립트 오류로 메뉴가 안 열리는 일도 없습니다.
💡 왜 직접 만든 아코디언보다 나을까요?
리뉴얼 의뢰로 들어오는 사이트를 열어 보면 FAQ가 div와 클릭 스크립트로 만들어져 있는 경우가 많습니다. 이런 구조는 탭 키로 질문에 이동이 안 되거나, 다른 플러그인과 충돌해서 아예 안 열리는 문제가 자주 생깁니다. details는 브라우저가 열림·닫힘을 직접 처리하니 이런 걱정이 줄어듭니다.
1. 기본 구조는 이것으로 끝입니다
<summary>에 질문을, 그 아래에 답변을 넣으면 됩니다. 처음부터 펼쳐 두고 싶은 항목에는 open 속성을 붙입니다.
<!-- FAQ 한 항목 -->
<details class="faq">
<summary>제작 기간은 얼마나 걸리나요?</summary>
<p>페이지 수와 기능에 따라 다릅니다.</p>
</details>
<!-- 처음부터 펼쳐 둘 항목 -->
<details class="faq" open> ... </details>2. 기본 삼각형 지우고 디자인 입히기
기본으로 보이는 ▶ 표시는 list-style: none으로 지우는데, 사파리는 별도 선택자를 하나 더 써야 사라집니다. 대신 오른쪽에 +, − 표시를 붙이고 [open] 상태에 맞춰 바꿔 주면 됩니다.
.faq summary {
list-style: none;
cursor: pointer;
padding: 16px 40px 16px 0;
position: relative;
font-weight: 700;
}
/* 사파리 기본 삼각형 제거 */
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
position: absolute;
right: 8px;
}
.faq[open] summary::after {
content: "\2212"; /* 빼기 기호 */
}3. 하나를 열면 나머지는 닫히게
예전에는 이 동작 때문에 스크립트를 썼지만, 지금은 같은 그룹의 details에 같은 name 값을 주면 하나만 열리게 됩니다. 크롬 120, 사파리 17.2, 파이어폭스 130 이후 버전에서 지원하고, 지원하지 않는 구형 브라우저에서는 여러 개가 동시에 열릴 뿐 기능은 그대로 동작합니다.
<details class="faq" name="faq-price"> ... </details>
<details class="faq" name="faq-price"> ... </details>4. 작업 전에 알아 둘 주의할 점
summary 안에는 링크나 버튼을 넣지 않는 것이 좋습니다. 누르는 영역이 겹쳐서 모바일에서 오작동하기 쉽습니다. 또 접혀 있는 답변도 HTML에 그대로 들어 있어 검색엔진이 내용을 읽을 수 있으니, 답변은 이미지보다 텍스트로 쓰는 편이 검색 노출에 유리합니다. 다만 구글의 FAQ 리치 결과(검색 결과에 질문이 펼쳐져 보이는 형태)는 2023년부터 정부·건강 분야의 공신력 있는 사이트 위주로 제한되어, 일반 업체 사이트는 구조화 데이터를 넣어도 표시되지 않는 경우가 대부분입니다.
"브라우저가 이미 잘하는 일은 브라우저에 맡기는 편이 오래갑니다."
나눔웹은 리뉴얼할 때 불필요한 스크립트를 걷어내고, 관리하기 쉬운 기본 태그 위주로 화면을 다시 짭니다.