2025-03-07T20:29:01

doc/html5/61_대화형 요소, 웹컴포넌트, 스크립트.md

@@ -0,0 +1,113 @@
+# 대화형 요소, 웹컴포넌트, 스크립트
+
+## 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>
+```
+- 설명: 스크립트 비활성화 시 대체 콘텐츠 표시.