HTML <dialog> 요소는 웹 페이지 내에서 대화상자, 팝업, 경고 메시지 등을 표시하는 표준화된 방법을 제공합니다. 이 요소는 크게 두 가지 유형의 대화상자를 구현하는 데 사용될 수 있습니다.
1. 모달(Modal) 대화상자모달 대화상자는 사용자의 모든 인터랙션을 대화상자 내부로 제한하는 특징을 가집니다. 즉, 대화상자가 열려 있는 동안에는 배경 콘텐츠와 상호작용할 수 없으며, 대화상자를 닫아야만 다른 작업을 진행할 수 있습니다.
- 구현 방법:
<dialog>요소에id를 부여합니다. 예:<dialog id="modal-dialog">- 대화상자를 여는 버튼에는
commandfor="modal-dialog"와command="show-modal"속성을 부여합니다. - 대화상자를 닫는 버튼에는
commandfor="modal-dialog"와command="close"속성을 부여합니다.
- 특징:
- 기본적으로 배경(backdrop)이 표시되어 배경 콘텐츠를 흐리게 하거나 가립니다.
- 포커스 트랩(focus trap) 기능이 내장되어 있어 키보드 탐색 시 대화상자 내부에서만 포커스가 이동합니다.
2. 비모달(Modeless) 대화상자비모달 대화상자는 모달 대화상자와 달리 사용자의 인터랙션을 제한하지 않습니다. 대화상자가 열려 있는 상태에서도 배경 콘텐츠와 자유롭게 상호작용할 수 있습니다.
- 구현 방법:
<dialog>요소에id를 부여합니다. 예:<dialog id="modeless-dialog">- 대화상자를 여는 버튼에는
commandfor="modeless-dialog"와command="show"속성을 부여합니다. - 대화상자를 닫는 버튼에는
commandfor="modeless-dialog"와command="close"속성을 부여합니다.
- 특징:
- 배경(backdrop)이 표시되지 않아 배경 콘텐츠와의 상호작용이 자유롭습니다.
- 포커스 트랩 기능이 없어 대화상자 외부로도 포커스가 이동할 수 있습니다.이러한
commandfor및command속성은 JavaScript 없이도 선언적으로 대화상자의 상태를 제어할 수 있게 하여 코드의 복잡성을 줄이고 가독성을 높입니다.