details와 summary element는 무엇을 제공하나요?

Question

Accepted Answer

`

`와 `

`는 **JavaScript 없이** 펼치고 접을 수 있는 섹션, 즉 **네이티브 디스클로저 위젯**을 만듭니다. 브라우저가 토글, 키보드 지원, accessibility를 알아서 처리합니다. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`**는 클릭 가능한 라벨입니다(첫 번째 자식). - 그 뒤의 모든 것이 접히는 콘텐츠입니다. - summary를 클릭하면 열림/닫힘이 토글됩니다. 네이티브로 키보드 접근이 가능하고(Enter/Space) 스크린 리더가 올바르게 안내합니다. ## 기본으로 열기 & 상태 감지 ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: 열려 있는가? d.addEventListener("toggle", () => console.log(d.open)); // 열림/닫힘 시 발생 ``` ## 마커 스타일링 ```css summary { cursor: pointer; } summary::marker { color: blue; } /* 삼각형/화살표 */ details[open] summary { font-weight: bold; } /* 열려 있을 때 스타일 */ ``` ## 실제 사용 사례 FAQ 아코디언, "더 보기" 섹션, 접히는 사이드바, 스포일러 텍스트, 펼쳐지는 table 행. 이 element 이전에는 모든 아코디언이 accessibility를 위해 JavaScript와 ARIA 연결이 필요했습니다. 이제는 두 개의 semantic tag면 됩니다. ## 왜 중요한가 `

`/`

`는 JS도 수동 ARIA도 없이 접근성 있고 키보드 친화적인 접히는 콘텐츠를 제공합니다. 플랫폼을 활용하는 완벽한 예시입니다. 커스텀 아코디언을 만들기 전에 FAQ와 "더 보기" 패턴에는 이것을 먼저 고려하십시오.