# 인터랙티브 요소

인터랙티브 요소는 사용자와 상호작용 가능한 대화형 요소이다. 

## \<details>  <a href="#details-el" id="details-el"></a>

![details 요소 상세 정보를 제공할 수 있다.  ](/files/-MQ7UImRZg8-GLYXRMJs)

* [디스클로저 위젯](https://en.wikipedia.org/wiki/Disclosure_widget)(disclosure widget)으로 정보를 감추거나, 펼쳐서 보여 준다. (보다 자세한 정보를 알려줄 때 사용)
  * 이전에는 JavaScript로 제어해야 했지만 이제는 `<deltails>` 요소로 구현이 가능하다.&#x20;
* 모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있다. (화면의 복잡함을 줄임)
* 아코디언(Accordion) 컴포넌트(Component)와 비슷하게 작동한다.
* 참고로 각주(footnote)에는 적합하지 않다.&#x20;
  * 각주에 [앵커 속성의 id 값을 이용해서 해당 각주로 이동할 수 있는 방법](https://app.gitbook.com/@shhn0509/s/html/~/drafts/-MQ7SxXLxusnDKF_5PJE/anchor-hyperlink#using-footnote)을 앞서 배웠다.&#x20;

### 속성 <a href="#attributes" id="attributes"></a>

* open - 페이지 로딩 시, 위젯을 펼쳐 표시하도록 설정 &#x20;

  (open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)

### 예제 <a href="#example" id="example"></a>

```markup
<details open>...</details>
```

```markup
<details open>
  <summary>사용자와 상호작용하는 요소</summary>
  <p>
    위하여서 풀밭에 청춘의 품고 가치를 그들사막이다. 가치를 넣는 열매를
    커다란 방지하는 청춘얼음 부패뿐이다.
  </p>
</details>
```

## \<summary>

* `<details>` 요소의 레이블/캡션(제목), 서머리(요약) 등을 표시한다.
* 폼 `<fieldset>` 요소의 제목을 `<legend>`가 표시하듯 비슷하다.

## \<dialog>

![](/files/-MRJGjLOGBV3lsoXrg7W)

* [다이얼로그](https://ko.wikipedia.org/wiki/%EB%8C%80%ED%99%94_%EC%83%81%EC%9E%90)(Dialog)는 사용자의 결정 또는 정보 입력을 요구하는 컴포넌트를 말함.
* '모달 윈도우'(레이어 팝업) 또는 '대화상자'라고도 불린다.
* 모든 브라우저가 HTML5.2를 지원하는 것은 아니다. 사용하기 전 확인하기!

### 속성

* open - 페이지 로딩 시, 위젯을 표시하도록 설정 &#x20;

  &#x20;(open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)

```markup
<dialog open>...</dialog>
```

```markup
<dialog open>
  <button type="submit">confirm</button>
</dialog>
```

## 더미텍스트 (로렘입숨 Lorem-Ipsum)

* 콘텐츠와 텍스트가 보이는 상황을 가정해, 임의의 텍스트를 넣어서 폰트나 전체적인 레이아웃을 맞춰볼때 쓰는 용도
  * 영어 <https://www.lipsum.com/>
  * 한글 <http://hangul.thefron.me/>

## 예제&#x20;

위에서 배운 내용을 복습하여 UI를 구현한다.&#x20;

![](/files/-MRJJHs3GCP6Dp-rmVaU)

```markup
<div class="container">
  <dialog class="dialog" open>
    <section>
      <h1 class="dialog-headline">"html5.2-video-recture.mp4" 파일 복사</h1>
      <details>
        <summary >복사중...<progress value="25" max="100"></progress> 25%</summary>
        <dl>
          <dt>초당 전송 속도: </dt>
          <dd>723KB/s</dd>
          <dt>로컬 파일이름: </dt>
          <dd>/Desktop/html5.2-video-recture.mp4</dd>
          <dt>원격 파일이름: </dt>
          <dd>/Backup/html5.2-video-recture.mp4</dd>
          <dt>재생시간: </dt>
          <dd>00:14:38</dd>
          <dt>컬러 프로파일: </dt>
          <dd>HD (1-1-1)</dd>
          <dt>해상도(너비×높이): </dt>
          <dd>1680×1050</dd>
        </dl>
      </details>
    </section>
  </dialog>
</div>
```

{% file src="/files/-MRJNFyjSqexruoheQSA" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/interactive-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.