# : Dialog 요소 > Clean Markdown view of GeekNews topic #18144. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=18144](https://news.hada.io/topic?id=18144) - GeekNews Markdown: [https://news.hada.io/topic/18144.md](https://news.hada.io/topic/18144.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2024-12-08T08:37:51+09:00 - Updated: 2024-12-08T08:37:51+09:00 - Original source: [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) - Points: 3 - Comments: 0 ## Topic Body ### `<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` 의사 요소 ## Comments _No public comments on this page._