HTML details의 name 그룹: 떨어진 FAQ도 함께 닫히는 이유
서로 떨어진 details도 같은 name 값을 가지면 하나의 그룹이 됩니다. 첫 FAQ를 열고 아래쪽 FAQ를 열었을 때 앞의 답이 닫힌다면 두 항목의 그룹 이름부터 확인해 보세요.
한 번에 하나씩 읽게 하는 동작이 필요한 곳과, 여러 답을 펼쳐 비교할 곳은 다릅니다. 작은 안내 페이지를 합치는 작업에서는 각 항목의 내용뿐 아니라 그룹 이름을 함께 설계하는 편이 좋습니다.
1. 같은 이름이면 거리와 관계없이 묶입니다
MDN details 문서는 같은 name 값을 가진 요소를 묶어 한 번에 하나만 열리게 할 수 있다고 설명합니다. 한 항목을 열면 같은 그룹의 다른 열린 항목이 닫힙니다. 서로 이웃한 요소일 필요는 없습니다.
이 규칙은 간단한 아코디언 안내를 만들 때 유용합니다. 다만 서로 다른 사람이 만든 안내 블록을 한 페이지로 합칠 때는 우연히 같은 이름을 썼을 수 있습니다. 화면에서 멀리 떨어져 있다고 독립적인 그룹이라고 판단하지 마세요.
2. 배송과 환불 FAQ를 합친 가상 사례
다음은 직접 구성한 설계 비교입니다. 두 영역이 같은 그룹에 속할지, 서로 독립적으로 움직일지를 먼저 정합니다.
| 그룹 이름 배치 | 의도한 동작 |
|---|---|
| 배송·환불 모두 name="help" | 두 영역을 통틀어 한 항목만 열기 |
| 배송 name="shipping", 환불 name="returns" | 각 영역 안에서 한 항목씩 열기 |
| 이름 그룹으로 묶지 않은 항목 | 각 답을 독립적으로 펼쳐 비교할 때 검토 |
같은 그룹에 처음부터 open 속성을 여러 개 붙이면 문서 순서에서 첫 해당 항목만 열린 상태로 표시됩니다. 열린 답의 수가 예상과 다르다면, 내용 누락으로 판단하기 전에 그룹과 기본 상태를 함께 살펴보세요.
3. 페이지를 합친 뒤 두 영역을 오가며 확인하기
배송 영역의 첫 질문을 열고 환불 영역의 첫 질문을 여는 순서로 확인합니다. 그때 배송 답이 닫히는 것이 의도인지 메모하세요. 다음으로 각 영역 안에서 다른 질문을 열어, 그룹 내부 동작도 확인합니다.
그룹 이름을 바꾼 뒤에는 제목을 키보드로 찾아 조작할 수 있는지, 닫힌 답 안에만 중요한 안내가 숨어 있지 않은지도 점검하세요. 이는 문서의 기능 설명을 바탕으로 제안하는 작성 점검 순서이며, 모든 브라우저를 검사했다는 뜻은 아닙니다.
인계 메모에는 영역 이름, 사용한 name 값, 기본으로 펼칠 항목, 동시에 열어 비교해야 하는 질문을 남기면 됩니다. 대상 브라우저의 name 지원 범위는 공식 문서의 호환성 표와 실제 사용 환경에서 확인하세요.
멀리 떨어진 FAQ가 닫히면 오류인가요?
같은 name 값으로 묶였다면 문서가 설명하는 그룹 동작일 수 있습니다. 두 안내 영역을 함께 묶으려던 의도인지 먼저 확인하세요.
기준일: 2026-10-21. MDN details 문서의 name 그룹 설명을 확인했습니다. 배송·환불 사례와 점검 메모는 직접 구성했습니다.
대표 삽화는 이해를 돕기 위해 AI로 제작했으며, 본문 설명 도표는 별도로 만들었습니다. 실제 서비스 화면이나 현장 사진이 아닙니다.
댓글
댓글 쓰기