details와 summary

개념 이해하기

details는 추가 정보를 접어 두는 공개 위젯이며 첫 번째 summary가 사용자가 누르는 제목이 됩니다. open 속성이 있으면 처음부터 펼쳐집니다. FAQ나 보충 설명에 적합하지만 핵심 정보를 무조건 접어 숨기지는 마세요.

첫 번째 details에는 open 속성이 있어 처음부터 답이 보이고, 두 번째는 summary 줄만 보입니다. summary 앞의 삼각형은 브라우저가 기본으로 붙이는 목록 표지이고, CSS의 cursor: pointer는 이 줄이 누를 수 있는 곳임을 포인터 모양으로 알려 줍니다. summary를 누르면 스크립트 없이도 open 속성이 붙었다 떨어지며 내용이 펼쳐지고 접힙니다.

여러 details에 같은 name 속성을 주면 그 묶음 안에서 하나를 열 때 나머지가 자동으로 닫혀 아코디언처럼 동작합니다. 열리고 닫힐 때마다 details에서 toggle 이벤트가 발생하므로 스크립트는 open 값을 읽어 상태를 저장할 수 있고, 삼각형 표지는 summary의 list-style이나 ::marker로 바꿀 수 있습니다.