네이티브 모달

네이티브 모달 팝업 (<dialog>)

과거에는 브라우저 화면 한가운데에 팝업 창(모달)을 띄우고 뒤 배경을 어둡게 만드려면 복잡한 HTML, CSS 떡칠과 JavaScript 라이브러리가 필요했습니다.
하지만 이제 HTML5 표준 <dialog> 태그 하나로 이 모든 기능이 순정(Native)으로 가볍고 완벽하게 해결됩니다!

1. 알아서 배경을 막아주는 든든한 방패

🛡️ ::backdrop 과 .showModal()

JavaScript에서 .showModal() 함수로 창을 열면, 브라우저가 알아서 뒷 배경의 클릭을 막아버리고 오직 팝업에만 집중하도록 만들어줍니다.
모달 뒤에 깔리는 반투명한 검은색 배경은 CSS의 ::backdrop 이라는 가상 요소로 색상이나 블러(blur) 효과를 자유롭게 꾸밀 수 있습니다.
게다가 ESC 키를 누르면 자동으로 창이 닫히는 웹 접근성까지 기본 장착되어 있습니다!

2. 다이얼로그 핵심 문법 정리

요소 및 속성	설명
`<dialog>`	모달 팝업을 정의하는 부모 컨테이너입니다. 코드를 작성해두어도 자바스크립트로 열기 전까지는 기본적으로 화면에 보이지 않습니다.
`.showModal()` (JS)	팝업을 화면 최상단 정중앙에 띄우고, 뒷 배경 요소들의 마우스 클릭과 포커스를 완벽히 차단합니다.
`form method="dialog"`	모달 내부의 `<form>`에서 이 속성을 쓰면, 그 안의 Submit 버튼을 클릭할 때 페이지가 새로고침되는 대신 팝업 창이 예쁘게 닫힙니다.
`::backdrop` (CSS)	모달이 떴을 때 브라우저 전체 화면에 깔리는 배경 영역을 지칭하는 가상 요소입니다. 보통 반투명한 검은색 배경을 줍니다.

<div class="modal-demo-container"> <h2>계정 설정</h2> <p>모든 데이터를 초기화하시겠습니까?</p>  <button class="open-btn" onclick="document.getElementById('myModal').showModal()"> 계정 삭제 (팝업 열기) </button>  <dialog id="myModal" class="native-modal"> <div class="modal-header"> <span class="warning-icon">⚠️</span> <h3>정말 삭제하시겠습니까?</h3> </div> <p class="modal-body"> 삭제된 데이터는 복구할 수 없습니다. 계속 진행하시겠습니까? </p>  <form method="dialog" class="modal-actions"> <button value="cancel" class="btn btn-secondary">취소</button> <button value="confirm" id="confirmBtn" class="btn btn-danger">삭제</button> </form> </dialog> </div>

요소 및 속성

설명

<dialog>

모달 팝업을 정의하는 부모 컨테이너입니다. 코드를 작성해두어도 자바스크립트로 열기 전까지는 기본적으로 화면에 보이지 않습니다.

.showModal() (JS)

팝업을 화면 최상단 정중앙에 띄우고, 뒷 배경 요소들의 마우스 클릭과 포커스를 완벽히 차단합니다.

form method="dialog"

모달 내부의 <form>에서 이 속성을 쓰면, 그 안의 Submit 버튼을 클릭할 때 페이지가 새로고침되는 대신 팝업 창이 예쁘게 닫힙니다.

::backdrop (CSS)

모달이 떴을 때 브라우저 전체 화면에 깔리는 배경 영역을 지칭하는 가상 요소입니다. 보통 반투명한 검은색 배경을 줍니다.