드로어 Drawer

<p class="bg">뒤쪽 화면</p>
<div class="dim"></div>
<aside class="drawer">
  <header><b>필터</b><button>×</button></header>
  <div class="body"><label><input type="checkbox" checked> 무료</label><label><input type="checkbox"> 오픈소스</label></div>
  <footer><button class="pri">적용</button></footer>
</aside>
<style>
.bg{color:var(--muted)}
.dim{position:fixed;inset:0;background:rgb(0 0 0 / .4)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(260px,80%);background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow)}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
header button{border:0;background:none;color:var(--fg);font-size:20px}
.body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px}
footer{padding:12px 16px;border-top:1px solid var(--border)}
.pri{width:100%;font:inherit;border:0;background:var(--accent);color:var(--accent-fg);padding:10px;border-radius:8px}
</style>

언제 쓰나

필터, 장바구니, 상세 설정, 모바일 메뉴처럼 현재 화면을 유지한 채 추가 내용을 보여줄 때.

비슷한 것과 차이

• 사이드바: 항상 자리 잡고 있는 고정 메뉴. 드로어는 열고 닫는 임시 패널
• 모달: 가운데 뜨는 창, 짧은 확인·입력용
• 모바일에서 아래에서 올라오는 드로어는 바텀 시트(Bottom sheet)