html-examples/Writerside/topics/Interaction.md

대화형 요소

details

"open" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.

• open

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

summary

detail 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다.

dialog

닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.

• open

  대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. open 속성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.

<dialog open>
  <p>여러분 안녕하세요!</p>
</dialog>

memu

사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.

• label

• type

  context | list

<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>

<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>