> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/interactive-element.md).

# 인터랙티브 요소

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

## \<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" %}