# 대화형 요소, 웹컴포넌트, 스크립트

## details
| **속성** | **설명** |
|---|----|
| `open` | 기본적으로 펼쳐진 상태로 표시합니다. (Boolean 속성) |

## summary
```html
<details>
  <summary>자세히 보기</summary>
  <p>이곳에 추가 정보가 표시됩니다.</p>
</details>

<details open>
  <summary>기본적으로 펼쳐짐</summary>
  <p>이 내용은 처음부터 보입니다.</p>
</details>
```
- 설명: 클릭하면 내용을 펼치거나 접을 수 있는 위젯. `open` 속성으로 기본 상태 설정.

## dialog
| **속성** | **설명** |
|---|----|
| `open` | 대화 상자가 열려 있는 상태를 표시합니다. (Boolean 속성) |

```html
<dialog id="myDialog">
  <p>이것은 대화 상자입니다.</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>
```
- 설명: JavaScript로 열고 닫을 수 있는 모달 대화 상자. `showModal()`로 모달 표시.

## slot
| **속성** | **설명** |
|---|----|
| `name` | 슬롯의 이름을 지정하여 특정 콘텐츠를 매핑합니다. |

```html
<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <div>
          <slot name="title">기본 제목</slot>
          <slot>기본 콘텐츠</slot>
        </div>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

<my-element>
  <h1 slot="title">커스텀 제목</h1>
  <p>커스텀 콘텐츠</p>
</my-element>
```
- 설명: `slot`으로 사용자 정의 콘텐츠를 삽입할 위치 지정.

## template
```html
<template id="myTemplate">
  <div>
    <h2>템플릿 제목</h2>
    <p>이것은 템플릿 콘텐츠입니다.</p>
  </div>
</template>

<button onclick="useTemplate()">템플릿 사용</button>
<div id="target"></div>

<script>
  function useTemplate() {
    const template = document.getElementById('myTemplate');
    const clone = template.content.cloneNode(true);
    document.getElementById('target').appendChild(clone);
  }
</script>
```
- 설명: `template`에 저장된 콘텐츠를 JavaScript로 동적으로 삽입.


## script
| **속성** | **설명** |
|---|----|
| `src` | 외부 스크립트 파일의 URL을 지정합니다. |
| `type` | 스크립트의 MIME 타입을 지정합니다. (예: `text/javascript`) |
| `async` | 스크립트를 비동기적으로 로드합니다. (Boolean 속성) |
| `defer` | 문서 파싱 후 스크립트를 실행합니다. (Boolean 속성) |

```html
<script src="script.js" defer></script>
<script>
  console.log("인라인 스크립트");
</script>
```
- 설명: 외부 스크립트 연결 및 인라인 스크립트 작성.

## noscript
```html
<script>
  document.write("스크립트가 실행됨");
</script>
<noscript>
  <p>스크립트가 비활성화되어 있습니다.</p>
</noscript>
```
- 설명: 스크립트 비활성화 시 대체 콘텐츠 표시.