2025-01-24T01:44:03

doc/html5/Interaction.md

@@ -0,0 +1,80 @@
+# 대화형 요소
+
+### details
+
+"open" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.
+
+- open
+
+```html
+<details>
+    <summary>Details</summary>
+    Something small enough to escape casual notice.
+</details>
+```
+
+### summary
+
+`detail` 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다.
+
+### dialog
+
+닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.
+
+- open
+
+  대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. open 속성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.
+
+
+```html
+<dialog open>
+  <p>여러분 안녕하세요!</p>
+</dialog>
+```
+
+### memu
+
+사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
+
+- label
+
+- type
+
+  context | list
+
+
+```html
+<button type="menu" menu="dropdown-menu">
+  Dropdown
+</button>
+
+<menu type="context" id="dropdown-menu">
+  <menuitem label="Action">
+  <menuitem label="Another action">
+  <hr>
+  <menuitem label="Separated action">
+</menu>
+```
+
+```html
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>좋아하는 동물:
+      <select>
+        <option></option>
+        <option>아르테미아</option>
+        <option>레서판다</option>
+        <option>거미원숭이</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">취소</button>
+      <button id="confirmBtn" value="default">확인</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">상세정보 업데이트</button>
+</menu>
+```