NightWatch/Citadel/Application/Frontend/42.20_UI_Components/Details-Summary.md

details와 summary

<details>와 <summary>는 HTML에서 접기/펼치기 UI를 만들 때 사용하는 기본 요소입니다. 별도의 JavaScript 없이 브라우저가 열림/닫힘 상태, 키보드 조작, 기본 접근성 동작을 처리해줍니다.

1. 핵심 개념

  • <details>: 접거나 펼칠 수 있는 내용을 감싸는 컨테이너입니다.
  • <summary>: 사용자가 클릭하는 제목입니다. <details>의 첫 번째 자식으로 둡니다.
  • open 속성: 처음부터 펼쳐진 상태로 보여주고 싶을 때 사용합니다.
<details>
  <summary>배송 정보 보기</summary>
  <p>평일 오후 2시 이전 주문은 당일 출고됩니다.</p>
</details>

<details open>
  <summary>기본으로 열린 항목</summary>
  <p>처음부터 보이는 내용입니다.</p>
</details>

2. 언제 쓰면 좋은가

details와 summary는 사용자가 필요할 때만 확인하면 되는 보조 정보를 숨겨둘 때 좋습니다.

  • FAQ
  • 상세 설명
  • 설정의 고급 옵션
  • 로그나 디버그 정보
  • 약간 긴 부가 설명

반대로 사용자가 반드시 읽어야 하는 핵심 정보나 주요 버튼은 접어두지 않는 편이 좋습니다.

3. 여러 항목 중 하나만 열기

여러 <details>에 같은 name 값을 주면 하나만 열리는 아코디언처럼 동작합니다.

<details name="faq">
  <summary>환불은 어떻게 하나요?</summary>
  <p>주문 상세 화면에서 환불을 요청할 수 있습니다.</p>
</details>

<details name="faq">
  <summary>배송지는 어디서 바꾸나요?</summary>
  <p>결제 전 배송지 영역에서 변경할 수 있습니다.</p>
</details>

브라우저 지원 범위가 필요한 기능이므로, 꼭 필요한 UI라면 지원 여부를 확인하고 사용합니다.

4. 스타일링할 때 주의할 점

기본 화살표 모양은 브라우저가 제공합니다. 디자인을 맞추고 싶다면 summary::marker나 summary::-webkit-details-marker를 조정합니다.

summary {
  cursor: pointer;
}

details[open] summary {
  font-weight: 600;
}

부드러운 펼침 애니메이션은 생각보다 까다롭습니다. 기본 동작만으로 충분하다면 애니메이션을 억지로 넣지 않는 편이 단순하고 안정적입니다.

5. 접근성 메모

summary는 기본적으로 키보드 포커스를 받을 수 있고, Enter나 Space로 열고 닫을 수 있습니다. 그래서 단순한 접기/펼치기 UI라면 직접 div와 JavaScript로 만드는 것보다 네이티브 요소를 쓰는 편이 안전합니다.

주의할 점은 포커스 링을 없애지 않는 것입니다. 포커스 링은 키보드의 Tab 키로 화면을 이동할 때 "지금 선택된 요소가 여기다"라고 보여주는 테두리입니다. 마우스를 쓰지 않는 사용자에게는 현재 위치를 알려주는 중요한 단서이므로, 디자인 때문에 outline: none으로 지웠다면 대신 눈에 보이는 포커스 스타일을 제공해야 합니다.

6. Further Reading

Written by GPT-5.5 Codex

🔒 Admin 로그인