HTML 강좌 / details와 summary로 펼침 콘텐츠 만들기

details와 summary를 사용하면 사용자가 눌러 펼치고 접을 수 있는 콘텐츠를 HTML만으로 만들 수 있습니다. 질문의 답, 보충 설명, 긴 설정 안내처럼 처음에는 일부만 보여 주고 싶을 때 적합합니다.

가장 작은 펼침 콘텐츠

<details>
  <summary>운영 시간 보기</summary>
  <p>월요일부터 금요일까지 오전 9시부터 오후 6시까지 운영합니다.</p>
</details>

코드를 HTML 파일의 body에 넣고 브라우저에서 열면 처음에는 ‘운영 시간 보기’만 보입니다. 그 문구를 누르거나 키보드로 활성화하면 문단이 나타납니다. summary는 details의 첫 번째 자식으로 작성하세요.

브라우저가 펼침 상태와 키보드 조작을 기본으로 제공하므로 단순한 열기·닫기를 위해 별도 스크립트를 만들 필요가 없습니다. 표시되는 화살표나 테두리는 브라우저와 CSS에 따라 달라질 수 있습니다. 모양이 달라도 문구를 눌러 내용이 열리고 다시 접히는지 확인하세요.

처음부터 열린 상태로 보여 주기

open 속성을 넣으면 콘텐츠가 처음부터 펼쳐집니다. 사용자는 이후에도 접거나 다시 펼칠 수 있습니다.

<details open>
  <summary>배송 안내</summary>
  <p>지역에 따라 도착 일정이 달라질 수 있습니다.</p>
</details>

중요한 안내를 읽지 않아도 되는 보충 정보처럼 취급해 기본적으로 숨기지 않도록 주의하세요. 사용자가 반드시 확인해야 할 조건은 펼침 여부와 관계없이 잘 보이는 위치에 두는 편이 낫습니다.

open은 참·거짓을 나타내는 불리언 속성입니다. open="false"라고 적어도 속성이 존재하므로 처음부터 열린 상태가 됩니다. 닫힌 상태로 시작하려면 open 자체를 제거하세요.

여러 항목을 작성할 때

여러 details를 연속으로 둘 수 있습니다. 각 summary에는 펼쳤을 때 무엇이 나오는지 구체적으로 적어 주세요. ‘자세히 보기’만 반복하면 항목을 구별하기 어렵습니다. 기본 표시 모양은 브라우저마다 다를 수 있으므로 키보드와 모바일 화면에서도 확인하세요.

자주 묻는 질문에 사용할 수도 있지만 모든 질문을 굳이 접어야 하는 것은 아닙니다. 짧은 답을 바로 보여 주는 편이 독자에게 더 빠르다면 일반 문단이 적합합니다. 요소의 구조와 속성은 MDN details 요소 문서를 참고하세요.

작동하지 않을 때 확인하기

summary가 details 바깥에 있는지, 종료 태그가 빠졌는지 살펴보세요. 스타일을 적용한 뒤 클릭 영역이나 키보드 초점 표시가 사라지지 않았는지도 확인해야 합니다.

접힌 상태에서 내용을 보려면 사용자 동작이 한 번 더 필요합니다. 답이 짧고 바로 읽는 편이 빠르다면 일반 문단을 쓰고, 길거나 선택적인 보충 설명일 때만 펼침 요소를 선택하세요. 선택 기준은 효과가 화려한지가 아니라 독자가 정보를 찾기 쉬운지입니다.