114 lines
3.0 KiB
Markdown
114 lines
3.0 KiB
Markdown
# 대화형 요소, 웹컴포넌트, 스크립트
|
|
|
|
## 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>
|
|
```
|
|
- 설명: 스크립트 비활성화 시 대체 콘텐츠 표시.
|