Tailwind CSS 드롭다운 메뉴 만들기

Source: Dev.to

이 튜토리얼에서는 Tailwind CSS를 사용해 간단한 드롭다운 메뉴를 만들겠습니다. 우리는 DaisyUI에서 영감을 받은 무‑JavaScript 접근 방식을 취하고 있어, 어떤 프로젝트 설정에서도 동작합니다.

사전 요구 사항

시작하기 전에 프로젝트에 Tailwind CSS가 설정되어 있는지 확인하세요. 도움이 필요하면 Tailwind CSS 설치 가이드를 확인하세요.

Step 1: 트리거 버튼 만들기

먼저 간단한 버튼을 만들겠습니다. 사용자가 이 버튼을 클릭하면 드롭다운 메뉴가 열립니다.

Dropdown

Optional: 우리가 만들고 있는 것을 더 쉽게 볼 수 있도록, 페이지의 모든 요소를 중앙에 배치하려면 CSS 파일에 다음 스타일을 추가하세요:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Step 2: 트리거 버튼 스타일링

이제 테두리, 패딩, 호버 효과가 있는 적절한 버튼처럼 보이게 만들어 보겠습니다.

  Dropdown

Step 3: 메뉴 만들기

다음으로, 실제 메뉴와 몇 개의 링크를 추가합니다. 또한 메뉴와 트리거를 상대적인 컨테이너에 감싸서 나중에 트리거에 상대적으로 메뉴를 배치할 수 있게 합니다.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

Step 4: 메뉴 스타일링 및 위치 지정

메뉴를 스타일링하고 버튼 아래에 배치해 보겠습니다.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

Step 5: 메뉴 항목 스타일링

이제 메뉴 항목에 일관된 모습을 부여합니다.

  Dropdown

  
    
      Item One
    
    Item Two
    Item Three
  

모든 메뉴 항목은 동일한 클래스를 사용합니다; 간결함을 위해 하나의 예시만 보여줍니다.

Source:

Step 6: Make it interactive

우리는 기본적으로 메뉴를 숨기고 버튼에 포커스(클릭)될 때 표시하도록 할 것입니다. 이는 Tailwind의 group 및 focus-within 유틸리티를 사용하여 구현합니다. group 안에 있는 어떤 요소라도 자식 요소가 포커스될 때 스타일을 변경할 수 있게 해줍니다.

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

(... 자리표시는 이전 단계에서 이미 정의한 클래스들을 의미합니다.)

Final Result

모든 것을 합치면 포커스가 있을 때 열리고 포커스가 사라지면 닫히는, Tailwind‑only 드롭다운 메뉴가 완성됩니다.

클래스를 실험해 보면서 색상, 간격, 전환 효과 등을 디자인 시스템에 맞게 커스터마이징해 보세요. 즐거운 코딩 되세요!

Cleaned‑up Markdown

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

What’s happening?

• group on the wrapper: 자식 요소에서 group-* 변형을 사용할 수 있게 합니다.
• opacity-0: 메뉴를 보이지 않게 합니다.
• pointer-events-none: 보이지 않는 항목을 클릭할 수 없게 합니다.
• transition-opacity: 부드러운 페이드 애니메이션을 추가합니다.
• group-focus-within:opacity-100: 버튼에 포커스(클릭)될 때 메뉴를 표시합니다.
• group-focus-within:pointer-events-auto: 메뉴가 보일 때 클릭할 수 있게 합니다.
• group-focus-within:pointer-events-none: 버튼을 다시 클릭하면 메뉴를 닫을 수 있게 합니다.

Demo GIF

Complete code (copy‑paste)

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

Starting Point UI 사용하기

시간을 절약하고 싶다면, **Starting Point UI**는 드롭다운과 같은 사전 구축된 컴포넌트를 많이 제공하며, 키보드 네비게이션, 향상된 접근성, 유연한 위치 지정과 같은 추가 기능을 제공합니다.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

더 많은 드롭다운 예시 여기서 확인하세요.