[[HTML]]의 `details`와 `summary`로 [[작품 설명의 접힘과 펼침|독자가 펼쳐 읽는 설명]]을 만들 수 있다. 아래 예제는 자바스크립트 없이 작동하는 두 개의 작은 접이문이다. 작품은 가상의 의자이며 재료도 연습용 설정이다.
## 바로 해보기
1. 아래 코드를 `details.html`로 저장하고 웹 브라우저에서 연다.
2. ‘재료와 크기 읽기’를 눌러 내용을 펼친다. 다시 눌러 닫는다.
3. 키보드의 Tab으로 접이문 제목에 초점을 옮긴 뒤 Space로 열고 닫아본다.
4. 두 번째 설명도 열어본다. 이 예제는 하나를 열었다고 다른 하나를 닫지 않는다.
5. `summary`의 문장을 바꿔 열기 전에 무엇이 나올지 알 수 있게 만든다.
```html
작품 옆의 작은 접이문
빈 의자
가상의 작품을 소개하는 연습용 페이지입니다.
재료와 크기 읽기
종이, 풀, 상상. 크기는 아직 정하지 않았습니다.
작가의 질문 읽기
누가 앉지 않았을 때 이 의자는 완성될까요?
```
## 접는다고 다 좋아지지는 않는다
- 짧은 제목만 읽어도 어떤 정보가 안에 있는지 알아야 한다. 모든 제목이 ‘더 보기’라면 문은 많고 주소가 없다.
- 전시 장소나 꼭 알아야 할 이용 조건처럼 먼저 보여야 하는 정보는 접기 전에 꺼내놓는다. 제목만 읽고 떠나는 사람에게도 초대가 성립하는지 살핀다.
- 처음부터 펼치려면 ``으로 쓴다. 열리는 동작을 디자인하는 일에는 [[설명을 접을 권리]]와 설명을 놓치지 않을 권리가 함께 있다.
[[사용자 주도권]]을 아주 작은 선택으로 생각해볼 수 있는 예다. 다만 열어야 하는 수고를 독자에게 넘겼다고 선택권이 늘어난 것은 아니다. 두 설명을 모두 펼친 상태와 비교해, 접힌 상태가 읽기를 돕는지 감추기만 하는지 판단한다. [[열지 않아도 읽히는 제목]]은 작은 문이 맡을 수 있는 첫 번째 일이다.
참고: [MDN의 details 요소 안내](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details).
#HTML #인터페이스 #전시 #만들기