HTML의 details와 summary로 독자가 펼쳐 읽는 설명을 만들 수 있다. 아래 예제는 자바스크립트 없이 작동하는 두 개의 작은 접이문이다. 작품은 가상의 의자이며 재료도 연습용 설정이다.
바로 해보기
- 아래 코드를
details.html로 저장하고 웹 브라우저에서 연다. - ‘재료와 크기 읽기’를 눌러 내용을 펼친다. 다시 눌러 닫는다.
- 키보드의 Tab으로 접이문 제목에 초점을 옮긴 뒤 Space로 열고 닫아본다.
- 두 번째 설명도 열어본다. 이 예제는 하나를 열었다고 다른 하나를 닫지 않는다.
summary의 문장을 바꿔 열기 전에 무엇이 나올지 알 수 있게 만든다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>작품 옆의 작은 접이문</title>
<style>body { max-width: 34rem; margin: 2rem auto; padding: 0 1rem;
font-family: sans-serif; line-height: 1.7; } summary { cursor: pointer; }</style>
<main>
<h1>빈 의자</h1>
<p>가상의 작품을 소개하는 연습용 페이지입니다.</p>
<details>
<summary>재료와 크기 읽기</summary>
<p>종이, 풀, 상상. 크기는 아직 정하지 않았습니다.</p>
</details>
<details>
<summary>작가의 질문 읽기</summary>
<p>누가 앉지 않았을 때 이 의자는 완성될까요?</p>
</details>
</main>
</html>접는다고 다 좋아지지는 않는다
- 짧은 제목만 읽어도 어떤 정보가 안에 있는지 알아야 한다. 모든 제목이 ‘더 보기’라면 문은 많고 주소가 없다.
- 전시 장소나 꼭 알아야 할 이용 조건처럼 먼저 보여야 하는 정보는 접기 전에 꺼내놓는다. 제목만 읽고 떠나는 사람에게도 초대가 성립하는지 살핀다.
- 처음부터 펼치려면
<details open>으로 쓴다. 열리는 동작을 디자인하는 일에는 설명을 접을 권리와 설명을 놓치지 않을 권리가 함께 있다.
사용자 주도권을 아주 작은 선택으로 생각해볼 수 있는 예다. 다만 열어야 하는 수고를 독자에게 넘겼다고 선택권이 늘어난 것은 아니다. 두 설명을 모두 펼친 상태와 비교해, 접힌 상태가 읽기를 돕는지 감추기만 하는지 판단한다. 열지 않아도 읽히는 제목은 작은 문이 맡을 수 있는 첫 번째 일이다.
참고: MDN의 details 요소 안내.