모달 Modal

<p class="bg">뒤쪽 화면</p>
<div class="dim">
  <div class="modal" role="dialog">
    <h3>정말 삭제할까요?</h3>
    <p>삭제한 파일은 복구할 수 없습니다.</p>
    <div class="act"><button>취소</button><button class="danger">삭제</button></div>
  </div>
</div>
<style>
.bg{color:var(--muted)}
.dim{position:fixed;inset:0;background:rgb(0 0 0 / .45);display:grid;place-items:center}
.modal{width:min(320px,90%);background:var(--bg);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 6px}
.modal p{margin:0 0 16px;color:var(--muted)}
.act{display:flex;justify-content:flex-end;gap:8px}
button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.danger{background:var(--danger);border-color:var(--danger);color:#fff}
</style>

언제 쓰나

삭제 확인, 로그인, 짧은 입력 폼처럼 지금 바로 결정해야 하는 상황.

비슷한 것과 차이

• 드로어: 화면 옆에서 밀려 나오는 패널, 더 긴 내용·설정에 적합
• 토스트: 응답이 필요 없는 가벼운 알림
• 모달을 남발하면 흐름이 끊기니 꼭 필요한 곳에만