HTML details로 접었다 펴는 암기 카드 만들기

질문만 보이다가 누르면 답이 나오는 카드를 만들어볼게요. 아래 질문을 눌러보세요. 다시 누르면 답이 접힙니다. 이 글에서 만든 HTML 연습 예제예요.

질문을 읽고 머릿속에서 답한 다음 열어볼 수 있는 형태입니다. 기본적인 접기·펼치기는 브라우저가 제공하므로 이 예제에 별도 JavaScript를 작성하지 않았어요.¹ 이제 이 카드를 로컬 파일로 옮겨 자기 질문을 붙여봅시다.

질문과 답이 들어갈 자리를 만듭니다

카드의 가장 작은 구조는 다음과 같습니다. 위에서 누른 예제와 같은 내용이에요.

<details>
  <summary>접혀 있을 때도 보이는 제목 요소는?</summary>
  <p><code>summary</code>입니다. 이 제목을 눌러 나머지 내용을 열고 닫아요.</p>
</details>

details가 질문과 답을 감싸고, 첫 자식인 summary가 접혀 있어도 보이는 제목을 맡습니다. 그 뒤의 문단은 펼쳤을 때 나타나는 내용이에요.² 이 구조에서는 ‘정답 보기’라는 별도 버튼을 만들지 않아도 질문 자체가 여닫는 조작부가 됩니다.

제목에는 답을 적지 않았어요. ‘summary는 제목 요소’라고 써두면 접혀 있을 때 이미 답이 보이니까요. 질문은 summary에, 확인할 답과 짧은 설명은 그 아래 문단에 적으면 됩니다. 예제에서는 태그 이름을 떠올리게 하려고 질문에 답인 summary를 노출하지 않았습니다. 자기 단원의 질문으로 바꿀 때도 접힌 제목만 읽고 무엇을 답해야 하는지 알 수 있게 적어주세요.

이 코드를 recall.html로 저장하세요

아래 전체 코드를 서식 없는 텍스트 편집기에 붙여넣고 UTF-8의 recall.html 파일로 저장합니다. 확장자가 .html.txt로 남지 않았는지도 봐주세요. 저장한 파일을 브라우저로 열면 카드가 나타납니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>내 질문 카드</title>
  <style>
    body {
      max-width: 42rem;
      margin: 3rem auto;
      padding: 0 1rem;
      font: 18px/1.7 system-ui, sans-serif;
      color: #22362e;
      background: #f4f7f2;
    }
    details {
      margin: 1rem 0;
      padding: 1rem;
      border: 1px solid #8aab98;
      border-radius: 0.5rem;
      background: white;
    }
    summary { cursor: pointer; font-weight: 700; }
    summary:focus-visible { outline: 3px solid #315c49; }
    details[open] summary { border-bottom: 1px solid #c7d7ce; }
  </style>
</head>
<body>
  <h1>내 질문 카드</h1>
  <p>답을 떠올린 다음 질문을 눌러 펼쳐보세요.</p>
  <details>
    <summary>접혀 있을 때도 보이는 제목 요소는?</summary>
    <p><code>summary</code>입니다. 이 제목을 눌러 나머지 내용을 열고 닫아요.</p>
  </details>
  <details>
    <summary>카드를 처음부터 펼칠 때 붙이는 속성은?</summary>
    <p><code>open</code>입니다. details의 시작 태그에 붙여요.</p>
  </details>
</body>
</html>

저장한 파일에서 화면에 보이는 제목·안내·카드는 body 안에 모여 있습니다. 카드를 늘릴 때는 details의 시작부터 끝까지 한 덩어리를 복사해, 마지막 카드 뒤이면서 </body> 앞인 자리에 붙여넣으세요. 복사한 덩어리의 summary와 p 문장을 자기 질문·답으로 바꾸면 됩니다. 내용이 길다면 답 뒤에 문단을 더 넣을 수도 있어요.

스타일의 수치는 이 예제 화면을 위한 값입니다. max-width는 글줄이 너무 길어지지 않게 하고, 좌우 padding은 작은 화면에서도 내용이 가장자리에 붙지 않게 둔 여백이에요. 질문의 굵기와 카드의 테두리를 바꾸어도 질문·답의 HTML 구조는 그대로 사용할 수 있습니다.

첫 카드의 열림 상태를 정해봅니다

기본으로 접힌 카드를 만들 때는 위 코드처럼 open을 쓰지 않습니다. 처음부터 펼친 카드가 필요하면 시작 태그를 <details open>으로 바꾸면 돼요.³ 전체 문서를 다시 붙일 필요 없이 원하는 카드의 시작 태그만 고칩니다.

open은 속성의 존재로 상태를 나타내는 불리언 속성입니다. 문자열 값을 false로 적는 방식으로 닫는 것이 아니라, 접힌 기본 상태로 두려면 속성을 빼야 해요.³ CSS의 details[open] summary는 열린 카드의 제목에만 선을 넣어, 펼친 상태가 화면에서도 드러나게 했습니다.

파일을 연 뒤 Tab으로 질문에 초점을 옮기고 Space로도 열어보세요. MDN은 초점이 있는 details 조작부에서 Space로 펼치는 기본 동작을 설명합니다.³ 이 예제의 focus-visible 테두리는 키보드로 이동할 때 어느 질문에 와 있는지 보여주려는 표시입니다. Tab을 누른 뒤 질문 둘레에 테두리가 보이고, Space를 누르면 그 질문의 답이 나타나면 됩니다.

완성한 파일에는 자기 질문과 답이 나란히 들어 있습니다. 공부하는 단원의 문장을 질문으로 고쳐 넣고, 답에는 단어 하나와 그 단어를 고른 이유를 함께 적을 수 있어요. 예제처럼 HTML을 공부하는 카드라면 질문을 눌러 태그 이름을 확인하고, 편집기로 돌아와 그 태그가 실제로 쓰인 자리를 바로 찾아볼 수 있습니다.