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

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

details

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

summary

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

<details open>
  <summary>기본적으로 펼쳐짐</summary>
  <p>이 내용은 처음부터 보입니다.</p>
</details>

• 설명: 클릭하면 내용을 펼치거나 접을 수 있는 위젯. open 속성으로 기본 상태 설정.

dialog

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

<dialog id="myDialog">
  <p>이것은 대화 상자입니다.</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>

• 설명: JavaScript로 열고 닫을 수 있는 모달 대화 상자. showModal()로 모달 표시.

slot

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

<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

<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 속성)

<script src="script.js" defer></script>
<script>
  console.log("인라인 스크립트");
</script>

• 설명: 외부 스크립트 연결 및 인라인 스크립트 작성.

noscript

<script>
  document.write("스크립트가 실행됨");
</script>
<noscript>
  <p>스크립트가 비활성화되어 있습니다.</p>
</noscript>

• 설명: 스크립트 비활성화 시 대체 콘텐츠 표시.