<details> – HTML 사전

숨겨진 이야기를 품은 위젯. 첫 자식인 <summary>로 항상 보이는 제목을, 나머지 자식으로 숨겨진 상세 정보를 담아 사용자가 직접 열고 닫는 상호 작용을 만든다.

<!-- 기본 사용법 -->
<details>
  <summary>저를 클릭해보세요</summary>
  <p>숨겨진 내용이 나타납니다.</p>
</details>

<!-- open 속성을 사용하면 기본적으로 내용이 펼쳐져 있습니다 -->
<details open>
  <summary>저는 처음부터 열려 있습니다</summary>
  <p>이 내용은 웹 페이지를 로딩할 때 보입니다.</p>
</details>

<!-- FAQ 형태 -->
<details>
  <summary>HTML이란 무엇인가요?</summary>
  <p>HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
</details>

<!-- 계층 구조 -->
<details>
  <summary>프로젝트 구조</summary>
  <ul>
    <li>index.html</li>
    <li>styles/
      <ul>
        <li>main.css</li>
        <li>responsive.css</li>
      </ul>
    </li>
    <li>scripts/
      <ul>
        <li>app.js</li>
      </ul>
    </li>
  </ul>
</details>