<summary> — 인터랙티브 태그 도감

올바른 사용

details의 첫 자식 (필수)

details당 한 개

버튼 같은 인터랙티브가 자동

내부에 인라인 요소 가능 (블록은 제한)

기본 summary

<details>
  <summary>주문 후 며칠 안에 배송되나요?</summary>
  <p>평일 기준 1-2일 안에 출고됩니다.</p>
</details>

details의 첫 자식. 토글 트리거.

마커 커스텀

<style>
  summary { list-style: none; cursor: pointer; }
  summary::before { content: "+ "; }
  details[open] summary::before { content: "- "; }
</style>
<details>
  <summary>토글</summary>
  <p>...</p>
</details>

기본 ▶ 마커 제거 후 + / - 로 커스텀.

풍부한 summary

<details>
  <summary>
    <h3>섹션 제목</h3>
    <span>설명 부제</span>
  </summary>
  ...
</details>

summary 안에 헤딩 가능. 시맨틱 + 인터랙티브 결합.

자주 보는 안티패턴

details 밖 summary

summary 안에 추가 button (중첩 인터랙티브)

summary 누락 — details 시맨틱 무의미

list-style 제거 시 추가 마커 누락

details 밖 summary

<div>
  <summary>토글</summary>
  <p>...</p>
</div>

부모가 details 아니면 시맨틱 무효.

summary 안 button

<details>
  <summary>
    <button onClick={...}>중첩 버튼</button>
  </summary>
</details>

summary가 이미 버튼 역할. 중첩 인터랙티브는 키보드 혼란.

해설

details의 토글 트리거. details와 짝을 이루며 — details의 첫 자식이어야 시맨틱 작동. 클릭·키보드·스크린리더 모두에서 버튼처럼 동작.

SEO 관점에서 summary는 details의 질문 부분. FAQPage Schema의 Question 필드와 매핑되어 검색의 FAQ 카드 노출에 직접 작용. 질문 텍스트가 검색 키워드와 매칭되면 인용 가능성 ↑.

GEO 관점에서 AI는 summary를 질문, details 본문을 답변으로 자동 인식. "환불 정책은?" 질문에 summary "환불은 어떻게 하나요?"가 매칭되어 답변 인용. 시맨틱 명확.

AEO 관점에서 가장 critical. Featured Snippet의 질문 카드가 summary 텍스트 그대로. "X는 무엇인가요?" 검색에 summary가 매칭되면 답변 카드 노출.

A11y 관점에서 자동으로 버튼 role 부여. Tab으로 포커스, Enter/Space로 토글. 스크린리더가 "X, 확장 가능, 접힘" 또는 "펼쳐짐" 발화. JS 아코디언으로 같은 동작 흉내내려면 <button aria-expanded> 직접 처리.

자주 보는 안티패턴: details 밖 summary(부모가 details 아니면 시맨틱 무효), summary 안에 button(summary가 이미 버튼 — 중첩 인터랙티브는 키보드 혼란), summary 누락(details 시맨틱 무의미), list-style: none만 적용하고 추가 마커 누락(사용자가 클릭 가능임을 시각으로 모름 — ::before로 + / - 같은 마커 추가).

내부 콘텐츠 허용 — flow content이지만 interactive content와 heading content는 제한적. 헤딩은 OK이지만 — summary 안에 또 다른 button·a·details는 안 됨. 인터랙티브 중첩이 키보드·스크린리더 혼란.

마커 스타일링 — 기본 ▶ 삼각형은 브라우저별로 다름(Chrome ▶, Safari ▶, Firefox ▶). list-style: none으로 제거 후 ::before로 커스텀 권장. 반드시 시각적 토글 표시를 두기 — 사용자가 클릭 가능임을 인지해야 한다.

CSS display 변경 시 시맨틱 손실 — summary { display: flex }는 OK이지만 display: contents는 일부 브라우저에서 시맨틱 손실. flex/grid 적용이 필요하면 flex 권장.

UI 라이브러리 — Radix Accordion이 details/summary와 별개 컴포넌트. native details와 시맨틱은 같지만 애니메이션과 키보드 단축키에서 차이. 일반 FAQ는 native, 복잡한 UI는 Radix.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설