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() 메서드를 호출하면 어떤 동작이 일어나나요?

해설

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

관련 문제

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