드롭다운이나 팝오버 UI를 구현할 때 자주 필요한 패턴 중 하나가 바깥 영역을 클릭하면 메뉴가 닫히는 동작이다. 처음에 구현했을 때는 hook으로 분리했으나별도의 이벤트 리스너를 직접 등록하지 않아도, 투명 오버레이(overlay)를 활용하면비교적 단순한 구조로 구현할 수 있다는 것을 알게 되었다.'use client';import { Button } from '@/components/ui/button';import { useState } from 'react';const MainPage = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); return ( setIsMenuOpen(!isMenuOpen)}>클릭 {i..

e.preventDefault()} // 드래그 이벤트 차단 className="object-cover" alt="작성자 프로필" src={profileImage} fill priority />

이전 포스팅에서 @theme와 @apply & @Layer 디렉티브의 역할을 살펴보았다.이번 글에서는 이 디렉티브들을 활용해Tailwind CSS v4 기반 디자인 시스템을 실제로 구성하는 과정을 정리한다.1. Figma를 통한 디자인 시스템 정의 먼저 Figma를 통해 색상, 타이포그래피, 여백 규칙 등 디자인 시스템을 정의해 두었다. 이 디자인 시스템을 코드로 옮기기 위해 Tailwind CSS v4에서 제공하는`@theme`, `@apply`, `@layer` 디렉티브를 활용해 CSS 변수 기반 디자인 토큰 시스템을 구성하였다. Tailwind CSS의 디렉티브를 사용하면 디자인 수정이 발생하더라도토큰 값만 변경하면 되기 때문에, 팀 전체가 동일한 기준으로 UI를 구성할 수 있다.그 결과 협업 과정..

1. @theme 디렉티브란?`@theme`는 색상·폰트·간격 등의 디자인 토큰을 CSS 변수로 정의하고,특정 네임스페이스(`--color-*` 등)에 한해Tailwind 유틸리티 클래스를 자동 생성하도록 하는 Tailwind v4 전용 디렉티브다.이 디렉티브를 사용하는 이유는 크게 두 가지다.1) Tailwind 기본 변수 OverrideTailwind가 내부적으로 사용하는 변수(`--font-sans`, `--color-white` 등)를 `@theme` 블록에서 재정의하면 프로젝트 전역에서 새로운 기본값처럼 동작한다.`--font-sans` 재정의 → 기본 sans-serif 폰트 변경`--color-white` 재정의 → Tailwind의 기본 white 색상 대체2) 프로젝트 전용 디자인 토큰..

1. 문제: 끝 없이 길어지는 클래스 명Tailwind CSS는 정말 편하지만, 디자인이 복잡해질수록 HTML 코드가 지저분해지는 단점이 있다. 버튼1 이런 코드가 반복되면 유지보수가 힘들어지는데, 이럴 때 사용하는 것이 `@apply` 디렉티브이다.2. 해결: @apply 디렉티브로 추상화`@apply`는 기존 유틸리티 클래스들을 묶어서,나만의 커스텀 CSS 클래스에 인라인으로 적용할 수 있게 해주는 기능이다.CSS 파일 생성 (예: `tailwind.css`)@import "tailwindcss";.btns { @apply inline-flex items-center px-8 py-3 bg-indigo-500 text-white rounded-full hover:bg-indigo-600 trans..

`w-full`과 `w-screen`을 사용하면 요소를 화면에 가득 채울 수 있다.하지만, 너비를 계산하는 기준점이 다르다.1. w-full: 부모 요소 기준 100%`w-full`은 현재 요소가 속한 부모 컨테이너의 너비를 기준으로 꽉 채우는 클래스부모 요소 기준 100%부모 컨테이너 크기에 맞춰 반응형으로 너비가 조정됨 (부모 내부에서만 최대 너비로 확장)일반적인 내부 레이아웃 구성에서 가장 많이 사용됨2. w-screen: 뷰포트 기준 100vw`w-screen`은 브라우저 뷰포트의 너비(100vw)를 기준으로 요소의 폭을 설정하는 클래스브라우저 뷰포트 기준 100vw부모 요소의 크기와 관계없이 화면 전체 너비를 사용함부모에 `padding`, `max-width`, `margin`이 있어도 이를 ..

화면 안에서 콘텐츠가 넘칠 때, 세로 스크롤은 가능하게 하되 스크롤바 UI는 숨기고 싶을 때가 있다.Tailwind 자체에는 스크롤바 숨기기 유틸리티가 기본 제공되지 않는다.따라서 전역 CSS에 아래를 추가하면 된다.App.css (또는 globals.css)@import "tailwindcss";body { background: #f5f5f5;}/* Chrome, Safari, Edge */.scrollbar-hide::-webkit-scrollbar { display: none;}/* Firefox */.scrollbar-hide { scrollbar-width: none;}컴포넌트 적용 Tailwind 기본 overflow 옵션옵션 동작overflow-auto필요한 경우에만 스크롤이 생긴다ov..

items-center vs mx-autoTailwind CSS에서 요소를 가운데 정렬할 때 가장 많이 쓰는 두 가지 방식은 `items-center`와 `mx-auto`다.두 속성의 차이를 알아보자속성적용 대상정렬 방식상황 예시items-center부모(flex container)모든 자식 요소를 교차축 기준 가운데 정렬버튼 4개를 전체적으로 가운데 모으기mx-auto특정 요소 하나요소 자체를 중앙 배치콘텐츠 박스, 카드 한 개 가운데 놓기Flex 정렬: items-center`items-center`는 부모가 `flex`일 때만 동작하며, 자식들의 세로축(교차축) 방향 정렬을 가운데로 맞추는 속성이다.부모가 `flex`여야 한다축을 기준으로 여러 요소 전체가 가운데로 정렬됨교차축(cross-axis)..

1. 문제 상황React에서 배경색을 전체 화면에 적용하려고 아래처럼 작성한 적이 있다. ...처음에는 `h-full`이 화면 전체를 채울 것이라고 생각했지만,막상 화면을 확인해 보니 배경색이 텍스트가 들어 있는 영역까지만 칠해지고, 전체 화면을 채우지 않는 문제가 발생했다.이 문제를 해결하기 위해서는 React 컴포넌트가 어떤 부모 요소 안에서 렌더링 되는지,그리고 Tailwind의 높이 관련 속성이 어떻게 동작하는지를 이해해야 한다.2. React App의 부모 구조React 프로젝트에서 `App` 컴포넌트는 다음 구조 안에 렌더링 된다. React는 `#root` 내부에 App을 삽입한다.즉, App 컴포넌트의 부모는 아래와 같다.App -> #root -> body -> html여..

1. Tailwind CSS란?Tailwind CSS는 빠르고 간결한 스타일링을 가능하게 하는 CSS 프레임워크다.자주 사용하는 CSS 규칙들을 약속된 이름의 클래스(유틸리티 클래스)로 제공한다.Taillwind CSS가 제공하는 클래스들을 이용하면, 별도의 CSS 파일을 추가로 생성할 필요도 없고CSS 규칙을 직접 작성할 필요도 없기 때문에 굉장히 빠르고 편리하게 스타일링을 진행할 수 있다.Taillwind가 제공하는 `text-white`, `font-bold`와 같은 클래스들을 유틸리티 클래스라고 표현한다.이 유틸리티 클래스들이 굉장히 많기 떄문에, 거의 모든 스타일링이 가능하다.소수의 핵심 클래스만 잘 알고 있어도 충분하다.2. 설치2.1 React1. [tailwindcss 문서] 접속→ Get..