HTML 요소의 showModal() 메서드를 호출하면 어떤 동작이 일어나나요?

Q: HTML 요소의 showModal() 메서드를 호출하면 어떤 동작이 일어나나요?

모달 대화 상자가 열리고, 배경이 비활성화되며 ESC 키로 닫을 수 있다 요소의 showModal() 메서드는 모달 대화 상자를 열며, ::backdrop 의사 요소로 배경이 어둡게 표시됩니다. 기본적으로 ESC 키로 닫을 수 있고, 포커스가 대화 상자 안에 갇히는(focus trapping) 접근성 기능이 내장되어 있습니다.

HTML <dialog> 요소의 showModal() 메서드를 호출하면 어떤 동작이 일어나나요?

쉬움 MDN Web Docs

보기 및 정답

A 모달 대화 상자가 열리고, 배경이 비활성화되며 ESC 키로 닫을 수 있다

B 새 브라우저 탭에서 별도의 페이지가 열리며 현재 탭은 유지된다

C alert() 함수와 동일한 팝업 창이 표시되며 확인 버튼만 나타난다

D 페이지가 전체 화면(fullscreen) 모드로 전환되어 브라우저 UI가 숨겨진다

해설

<dialog> 요소의 showModal() 메서드는 모달 대화 상자를 열며, ::backdrop 의사 요소로 배경이 어둡게 표시됩니다. 기본적으로 ESC 키로 닫을 수 있고, 포커스가 대화 상자 안에 갇히는(focus trapping) 접근성 기능이 내장되어 있습니다.

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

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

정규반 살펴보기

HTML <dialog> 요소의 showModal() 메서드를 호출하면 어떤 동작이 일어나나요?

해설

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

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.