HTML details의 name 그룹: 떨어진 FAQ도 함께 닫히는 이유
서로 떨어진 details도 같은 name 값을 가지면 하나의 그룹이 됩니다. 첫 FAQ를 열고 아래쪽 FAQ를 열었을 때 앞의 답이 닫힌다면 두 항목의 그룹 이름부터 확인해 보세요. 한 번에 하나씩 읽게 하는 동작이 필요한 곳과, 여러 답을 펼쳐 비교할 곳은 다릅니다. 작은 안내 페이지를 합치는 작업에서는 각 항목의 내용뿐 아니라 그룹 이름을 함께 설계하는 편이 좋습니다. 차례 1. 같은 이름이면 거리와 관계없이 묶입니다 2. 배송과 환불 FAQ를 합친 가상 사례 3. 페이지를 합친 뒤 두 영역을 오가며 확인하기 1. 같은 이름이면 거리와 관계없이 묶입니다 MDN details 문서는 같은 name 값을 가진 요소를 묶어 한 번에 하나만 열리게 할 수 있다고 설명합니다. 한 항목을 열면 같은 그룹의 다른 열린 항목이 닫힙니다. 서로 이웃한 요소일 필요는 없습니다. 이 규칙은 간단한 아코디언 안내를 만들 때 유용합니다. 다만 서로 다른 사람이 만든 안내 블록을 한 페이지로 합칠 때는 우연히 같은 이름을 썼을 수 있습니다. 화면에서 멀리 떨어져 있다고 독립적인 그룹이라고 판단하지 마세요. 2. 배송과 환불 FAQ를 합친 가상 사례 다음은 직접 구성한 설계 비교입니다. 두 영역이 같은 그룹에 속할지, 서로 독립적으로 움직일지를 먼저 정합니다. 그룹 이름 배치 의도한 동작 배송·환불 모두 name="help" 두 영역을 통틀어 한 항목만 열기 배송 name="shipping", 환불 name="returns" 각 영역 안에서 한 항목씩 열기 이름 그룹으로 묶지 않은 항목 각 답을 독립적으로 펼쳐 비교할 때 검토 같은 그룹에 처음부터 open 속성을 여러 개 붙이면 문서 순서에서 첫 해당 항목만 열린 상태로 표시됩니다. 열린 답의 수가 예상과 다르다면, 내용 누락으로 판단하기 전에 그룹과 기본 상태를 함께 살펴보세요. 3. 페이지를 합친 뒤 두 영역을 오가며 확인하기 배송 영역의 첫 질문을 열고 환불 영역의 첫 ...