HTML 강좌 / details와 summary로 펼침 콘텐츠 만들기
details와 summary를 사용하면 사용자가 눌러 펼치고 접을 수 있는 콘텐츠를 HTML만으로 만들 수 있습니다. 질문의 답, 보충 설명, 긴 설정 안내처럼 처음에는 일부만 보여 주고 싶을 때 적합합니다.
가장 작은 펼침 콘텐츠
<details>
<summary>운영 시간 보기</summary>
<p>월요일부터 금요일까지 오전 9시부터 오후 6시까지 운영합니다.</p>
</details>코드를 HTML 파일의 body에 넣고 브라우저에서 열면 처음에는 ‘운영 시간 보기’만 보입니다. 그 문구를 누르거나 키보드로 활성화하면 문단이 나타납니다. summary는 details의 첫 번째 자식으로 작성하세요.
브라우저가 펼침 상태와 키보드 조작을 기본으로 제공하므로 단순한 열기·닫기를 위해 별도 스크립트를 만들 필요가 없습니다. 표시되는 화살표나 테두리는 브라우저와 CSS에 따라 달라질 수 있습니다. 모양이 달라도 문구를 눌러 내용이 열리고 다시 접히는지 확인하세요.
처음부터 열린 상태로 보여 주기
open 속성을 넣으면 콘텐츠가 처음부터 펼쳐집니다. 사용자는 이후에도 접거나 다시 펼칠 수 있습니다. 불리언 속성의 존재 여부를 판단하는 방법은 문법에서 checked와 함께 비교합니다.
<details open>
<summary>배송 안내</summary>
<p>지역에 따라 도착 일정이 달라질 수 있습니다.</p>
</details>중요한 안내를 읽지 않아도 되는 보충 정보처럼 취급해 기본적으로 숨기지 않도록 주의하세요. 사용자가 반드시 확인해야 할 조건은 펼침 여부와 관계없이 잘 보이는 위치에 두는 편이 낫습니다.
open은 참·거짓을 나타내는 불리언 속성입니다. open="false"라고 적어도 속성이 존재하므로 처음부터 열린 상태가 됩니다. 닫힌 상태로 시작하려면 open 자체를 제거하세요.
여러 항목을 작성할 때
여러 details를 연속으로 둘 수 있습니다. 각 summary에는 펼쳤을 때 무엇이 나오는지 구체적으로 적어 주세요. ‘자세히 보기’만 반복하면 항목을 구별하기 어렵습니다. 기본 표시 모양은 브라우저마다 다를 수 있으므로 키보드와 모바일 화면에서도 확인하세요.
자주 묻는 질문에 사용할 수도 있지만 모든 질문을 굳이 접어야 하는 것은 아닙니다. 짧은 답을 바로 보여 주는 편이 독자에게 더 빠르다면 일반 문단이 적합합니다. 요소의 구조와 속성은 MDN details 요소 문서를 참고하세요.
키보드와 초기 상태 확인하기
- 파일을 새로 열어 open이 없는 예제는 접혀 있고 open이 있는 예제는 열려 있는지 비교합니다.
- Tab으로 summary에 이동해 초점 표시를 확인합니다. 링크나 버튼을 summary 안에 추가해 조작이 겹치지 않도록 이 기본 실습은 텍스트만 둡니다.
- Enter와 Space를 각각 눌러 열고 닫습니다. CSS를 추가했다면 초점 표시가 남는지도 다시 시험합니다.
HTML은 기본 펼침 동작을 제공하지만, 다른 사용자 인터페이스를 덧붙였을 때의 초점 처리까지 모두 자동으로 해결하지는 않습니다. MDN summary 문서에서 사용 조건을 확인하세요.
작동하지 않을 때 확인하기
summary가 details 바깥에 있는지, 종료 태그가 빠졌는지 살펴보세요. 스타일을 적용한 뒤 클릭 영역이나 키보드 초점 표시가 사라지지 않았는지도 확인해야 합니다. 초점 표시와 조작 순서는 HTML 접근성 기본: 제목·링크·이미지·키보드의 작은 페이지로 확장해 확인할 수 있습니다.
펼침 요소를 추가한 뒤에도 기본 내용은 순서대로 읽히고, 조작 대상은 초점을 받아야 합니다. 키보드 실습에서 스타일을 적용하기 전후를 비교하세요.
