---
title: "서랍"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "캔버스 외부 탐색 및 사이드바를 위한 JS 프리 Tailwind CSS Drawer입니다. 오버레이 지원을 통한 다양한 위치 - JavaScript 없이 액세스 가능하고 모바일 친화적입니다."
url: https://frutjam.com/ko/components/drawer
---

# 서랍 구성 요소

서랍 구성 요소가 뷰포트 측면에서 미끄러져 들어가 숨겨진 탐색, 필터 또는 추가 콘텐츠를 표시합니다. CSS 애니메이션이 포함된 기본 HTML 대화 상자 요소를 기반으로 구축된 서랍은 모바일 및 데스크톱 장치에서 레이아웃을 관리하는 반응형 방식을 제공합니다. Frutjam 서랍 시스템은 전문적인 사이드바 탐색을 위한 사용자 정의 가능한 너비, 부드러운 애니메이션 및 오버레이 배경을 지원합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

| 수업              | 유형  | 설명                        |
| --------------- | --- | ------------------------- |
| drawer          | 베이스 | 기본 대화 상자 요소에 구축된 슬라이드인 패널 |
| drawer-content  | 수정자 | 서랍의 내부 콘텐츠 영역             |
| drawer-backdrop | 수정자 | 서랍 뒤 오버레이                 |
| drawer-start    | 수정자 | 왼쪽에서 슬라이드됩니다.             |
| drawer-end      | 수정자 | 오른쪽에서 슬라이드됩니다.            |
| drawer-top      | 수정자 | 위에서부터 슬라이드됩니다.            |
| drawer-bottom   | 수정자 | 아래쪽에서 슬라이드됩니다.            |

## 기본 사용법

## JS 및 반응 도우미

트리거가 서랍 외부에 있거나 코드 어디에서나 프로그래밍 방식으로 제어해야 하는 경우 `frutjam/js`의 `createDrawer` 또는 `frutjam/react`의 `useDrawer`를 사용하세요.

## 서랍 맞춤화

`.drawer-backdrop`은 기본적으로 이 요소를 제거하여 서랍 외부를 클릭하면 서랍이 닫히지 않도록 방지하여 서랍 외부를 클릭하면 서랍을 닫는 클릭 가능한 배경을 제공합니다.

### 배경화면 클릭 시 닫기

```html
<button type="button" class="btn btn-sm" onclick="closeDrawerOnBackdropClick.show()">Open drawer</button>
<dialog class="drawer" id="closeDrawerOnBackdropClick">
  <div class="drawer-content w-full lg:w-56 p-4">
    <div class="flex justify-between mb-3">
      <strong>Drawer</strong>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="closeDrawerOnBackdropClick.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
      </button>
    </div>
    <ul class="menu">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
  
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="closeDrawerOnBackdropClick.close()">Close Drawer via Backdrop</button>
</dialog>
```

### 외부 클릭 시 닫기 방지

```html
<button type="button" class="btn btn-sm" onclick="preventCloseClickOutsideDrawer.show()">Open drawer</button>
<dialog class="drawer" id="preventCloseClickOutsideDrawer">
  <div class="drawer-content w-full lg:w-56 p-4">
    <div class="flex justify-between mb-3">
      <strong>Drawer</strong>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="preventCloseClickOutsideDrawer.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
      </button>
    </div>
    <ul class="menu">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
  
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </div>
</dialog>
```

## 서랍 배치

### 왼쪽 서랍(시작)

```html
<button type="button" class="btn btn-sm" onclick="leftDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-start" id="leftDrawer">
  <div class="drawer-content w-full lg:w-56 p-4">
    <ul class="menu">
      <li>
        <div class="menu-title">Dashboard</div>
        <ul>
          <li><a class="menu-item">Overview</a></li>
          <li><a class="menu-item">Analytics</a></li>
        </ul>
      </li>
      <li>
        <div class="menu-title">Management</div>
        <ul>
          <li><a class="menu-item">Users</a></li>
          <li><a class="menu-item">Inventory</a></li>
          <li><a class="menu-item">Settings</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="leftDrawer.close()">Close Drawer via Backdrop</button>
</dialog>
```

### 오른쪽 서랍(끝)

```html
<button type="button" class="btn btn-sm" onclick="rightDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-end" id="rightDrawer">
  <div class="drawer-content w-full lg:w-56 p-4">
    <ul class="menu w-full">
      <li>
        <div class="menu-title">Dashboard</div>
        <ul>
          <li><a class="menu-item">Overview</a></li>
          <li><a class="menu-item">Analytics</a></li>
        </ul>
      </li>
      <li>
        <div class="menu-title">Management</div>
        <ul>
          <li><a class="menu-item">Users</a></li>
          <li><a class="menu-item">Inventory</a></li>
          <li><a class="menu-item">Settings</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="rightDrawer.close()">Close Drawer via Backdrop</button>
</dialog>
```

### 상단 서랍

```html
<button type="button" class="btn btn-sm" onclick="topDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-top" id="topDrawer">
  <div class="drawer-content p-4">
    <div class="heading-3xl mb-3">Contact us</div>
    <form class="grid grid-cols-12 gap-3">
      <input type="text" placeholder="Enter your text here" class="input col-span-5">
      <input type="text" placeholder="Enter your text here" class="input col-span-5">
      <button class="btn col-span-2">Submit</button>
    </form>
  </div>
  <button type="button" class="drawer-backdrop" onclick="topDrawer.close()">Close Drawer via Backdrop</button>
</dialog>
```

### 하단 서랍

```html
<button type="button" class="btn btn-sm" onclick="bottomDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-bottom" id="bottomDrawer">
  <div class="drawer-content p-4">
    <ul class="menu menu-md w-full">
      <li>
        <div class="accordion accordion-flush">
          <details name="nav" open>
            <summary><span class="heading-md">Dashboard</span></summary>
            <div class="accordion-content">
              <ul>
                <li class="menu-item"><span>Overview</span></li>
                <li class="menu-item">
                  <span>Analytics</span>
                  <div class="badge badge-xs badge-accent ml-1 uppercase">Live</div>
                </li>
              </ul>
            </div>
          </details>

          <details name="nav">
            <summary><span class="heading-md">Settings</span></summary>
            <div class="accordion-content">
              <ul>
                <li class="menu-item"><span>Profile</span></li>
                <li class="menu-item"><span>Security</span></li>
              </ul>
            </div>
          </details>
        </div>
      </li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="bottomDrawer.close()">Close Drawer viaBackdrop</button>
</dialog>
```