details와 summary

개념 이해하기

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

예제에서는 <details><summary>제목</summary><p>내용</p></details> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

사용자 동작에 따라 상태가 바뀌는 화면에서 사용합니다. 보이는 모양뿐 아니라 키보드 조작, 현재 상태를 알리는 문구와 포커스 이동까지 한 흐름으로 확인하세요.

먼저 현재 결과를 확인한 뒤 두 번째 details를 처음부터 열고 summary 문구를 더 구체적으로 바꾸세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.