---
title: <details>
slug: Web/HTML/Element/details
tags:
  - Element
  - HTML
  - HTML interactive elements
  - Reference
  - Web
translation_of: Web/HTML/Element/details
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;details&gt;</code> 요소</strong>는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.</span> 요약이나 레이블은 {{htmlelement("summary")}} 요소를 통해 제공할 수 있습니다.</p>

<p>정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <code>&lt;details&gt;</code> 요소의 첫 번째 자식이 <code>&lt;summary&gt;</code> 요소라면, <code>&lt;summary&gt;</code>의 콘텐츠를 위젯의 레이블로 사용합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<div class="hidden">
<div class="note">
<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p>
</div>

<p>A <code>&lt;details&gt;</code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code>&lt;summary&gt;</code> (or a {{Glossary("user agent")}}-defined default string if no <code>&lt;summary&gt;</code>). This might look like the following:</p>

<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed &lt;details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure>

<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents:</p>

<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open &lt;details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure>

<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p>

<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p>

<div class="note">
<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p>
</div>

<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td>플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>하나의 {{htmlelement("summary")}}와, 그 뒤의 플로우 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">암시적 ARIA 역할</th>
   <td>{{ARIARole("group")}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>없음</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>상세 정보, 즉 <code>&lt;details&gt;</code> 요소의 콘텐츠가 현재 보이는 상태인지 나타냅니다. 기본값 <code>false</code>는 정보가 보이지 않는다는 뜻입니다.</dd>
</dl>

<h2 id="이벤트">이벤트</h2>

<p><code>&lt;details&gt;</code> 요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <code>&lt;details&gt;</code> 요소의 상태가 열기와 닫기로 바뀔 때 발생하는 {{event("toggle")}} 이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.</p>

<p><code>toggle</code> 이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.</p>

<pre class="brush: js">details.addEventListener("toggle", event =&gt; {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});</pre>

<h2 id="예제">예제</h2>

<h3 id="간단한_예제">간단한 예제</h3>

<p>이번 예제는 요약 없는 <code>&lt;details&gt;</code> 요소를 보입니다.</p>

<pre class="brush: html">&lt;details&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>이렇게 사용하는 경우, 브라우저는 기본 요약 문자열("상세", "세부정보" 등)을 사용합니다. 아래에서 직접 확인해보세요.</p>

<p>{{EmbedLiveSample("간단한_예제", 650, 150)}}</p>

<h3 id="요약_제공하기">요약 제공하기</h3>

<p>이번 예제는 이전 코드에 {{htmlelement("summary")}} 요소를 추가합니다.</p>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>결과는 다음과 같습니다.</p>

<p>{{EmbedLiveSample("요약_제공하기", 650, 150)}}</p>

<h3 id="열려있는_상태로_만들기">열려있는 상태로 만들기</h3>

<p><code>&lt;details&gt;</code>가 처음부터 열려있는 상태로 나타나게 하려면 <code>open</code> 특성을 지정하세요.</p>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>결과는 다음과 같습니다.</p>

<p>{{EmbedLiveSample("열려있는_상태로_만들기", 650, 150)}}</p>

<h3 id="외형_바꾸기">외형 바꾸기</h3>

<p>이제 CSS를 추가해서 외형을 바꿔보겠습니다.</p>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details &gt; summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details &gt; p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
</pre>

<p>위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample("외형_바꾸기", 650, 150)}}</p>

<h3 id="위젯_바꾸기">위젯 바꾸기</h3>

<p>넓게 지원되지는 않지만, 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있습니다. 요소의 표준화 과정 중 추가된 실험적 구현이기 때문에 브라우저의 지원에 차이가 있으므로, 당분간 여러 방식을 함께 사용해야 합니다.</p>

<p>{{HTMLElement("summary")}} 요소는 {{cssxref("list-style")}} 단축 속성과, 그 본디 속성인 {{cssxref("list-style-type")}} 등을 지원하므로, {{cssxref("list-style-image")}} 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 <code>list-style: none</code>을 지정하면 됩니다.</p>

<p>그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 <code>::-webkit-details-marker</code> <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용해야 합니다.</p>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css; highlight:[12, 15-17]">details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details &gt; summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details &gt; summary::-webkit-details-marker {
  display: none;
}

details &gt; p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
</pre>

<p>위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="결과_2">결과</h4>

<p>{{EmbedLiveSample("위젯_바꾸기", 650, 150)}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.details")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{HTMLElement("summary")}}</li>
</ul>