▲

<dialog>: Dialog 요소

 (developer.mozilla.org)
3P by GN⁺ 11달전 | ★ favorite | 댓글과 토론

<dialog>: 대화 상자 요소

  • 기본 제공: <dialog> 요소는 모달 또는 비모달 대화 상자, 경고, 검사기, 서브윈도우 등의 상호작용 요소를 나타냄. 2022년 3월부터 대부분의 브라우저에서 사용 가능함.

속성

  • open: 대화 상자가 활성화되어 상호작용 가능함을 나타냄. open 속성이 설정되지 않으면 사용자에게 보이지 않음. .show() 또는 .showModal() 메서드를 사용하는 것이 권장됨.

사용 노트

  • HTML <form> 요소는 method="dialog" 속성을 사용하여 대화 상자를 닫을 수 있음.
  • CSS ::backdrop 의사 요소를 사용하여 모달 대화 상자의 배경을 스타일링할 수 있음.
  • autofocus 속성은 대화 상자가 열릴 때 즉시 상호작용할 요소에 추가해야 함.
  • <dialog> 요소에 tabindex 속성을 추가하지 않도록 주의해야 함.

접근성

  • 대화 상자를 구현할 때 사용자 포커스를 적절히 설정하는 것이 중요함.
  • showModal() 메서드를 사용하여 대화 상자를 열 때, 포커스는 첫 번째 포커스 가능한 요소에 설정됨.
  • 모든 사용자가 대화 상자를 닫을 수 있도록 명시적인 버튼을 포함하는 것이 가장 확실한 방법임.

예제

HTML 전용 대화 상자

  • HTML만으로 비모달 대화 상자를 생성하는 예제. open 속성으로 인해 페이지 로드 시 대화 상자가 열려 있음.

모달 대화 상자 생성

  • .showModal() 메서드를 사용하여 모달 대화 상자를 여는 예제. Esc 키 또는 대화 상자 내의 "Close" 버튼으로 닫을 수 있음.

대화 상자의 반환 값 처리

  • <dialog> 요소의 returnValue를 사용하는 예제. 폼을 사용하여 모달 대화 상자를 닫을 수 있음.

필수 폼 입력이 있는 대화 상자 닫기

  • 대화 상자 내부의 폼에 필수 입력이 있을 때, formnovalidate 속성을 사용하여 닫을 수 있음.

대화 상자 애니메이션

  • <dialog> 요소의 display 속성을 애니메이션화하여 대화 상자를 애니메이션할 수 있음.

기술 요약

  • 콘텐츠 카테고리: 흐름 콘텐츠, 섹션 루트
  • 허용 콘텐츠: 흐름 콘텐츠
  • 암시적 ARIA 역할: dialog
  • DOM 인터페이스: HTMLDialogElement

사양

  • HTML 표준 # the-dialog-element

브라우저 호환성

  • 대부분의 주요 브라우저에서 <dialog> 요소와 open 속성을 완전히 지원함.

참고

  • HTMLDialogElement 인터페이스
  • HTMLDialogElement의 close 및 cancel 이벤트
  • HTMLDialogElement의 open 속성
  • HTML 요소의 inert 글로벌 속성
  • CSS ::backdrop 의사 요소