HTML 태그와 showModal() 메서드의 역할은?

Q: HTML 태그와 showModal() 메서드의 역할은?

는 네이티브 모달 대화상자를 정의하고, showModal()로 열면 배경이 비활성화된 상태로 표시된다 HTML 태그는 네이티브 대화상자(모달)를 구현합니다. showModal() 메서드로 열면 ::backdrop 의사 요소로 배경이 어두워지고, ESC 키로 닫을 수 있으며, 포커스 트래핑이 자동 적용됩니다. 별도 라이브러리 없이 접근성 좋은 모달을 만들 수 있습니다.

HTML <dialog> 태그와 showModal() 메서드의 역할은?

어려움 MDN Web Docs

보기 및 정답

A <dialog>는 네이티브 모달 대화상자를 정의하고, showModal()로 열면 배경이 비활성화된 상태로 표시된다

B <dialog>는 경고 메시지를 자동으로 발생시키며, alert() 함수와 동일한 기능을 수행한다

C showModal()은 새 브라우저 창을 여는 메서드이며, window.open()과 동일하게 동작하는 것으로 알려져 있다

D <dialog>는 CSS 전용 태그로 JavaScript와 무관하며 스타일을 정의하는 용도로만 사용한다

해설

HTML <dialog> 태그는 네이티브 대화상자(모달)를 구현합니다. showModal() 메서드로 열면 ::backdrop 의사 요소로 배경이 어두워지고, ESC 키로 닫을 수 있으며, 포커스 트래핑이 자동 적용됩니다. 별도 라이브러리 없이 접근성 좋은 모달을 만들 수 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

HTML <dialog> 태그와 showModal() 메서드의 역할은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩