B_log

🔽 React + Tailwind로 드롭다운 만들기 (Dropdown 컴포넌트)이번 글에서는 React와 Tailwind CSS를 사용해간단하면서도 커스터마이징 가능한 드롭다운(Dropdown) 컴포넌트를 만드는 방법을 소개합니다.✅ 완성 기능 요약버튼 클릭 시 목록이 아래로 펼쳐짐항목 클릭 시 해당 항목 선택 및 드롭다운 닫힘선택된 값 표시외부 클릭 시 자동 닫힘Tailwind CSS로 쉽게 커스터마이징 가능📁 파일 구조components/ └── Dropdown.jsxApp.jsx🧩 1. Dropdown 컴포넌트 (Dropdown.jsx)import React, { useState, useRef, useEffect } from 'react'function Dropdown({ options = ..

🧩 아이콘과 텍스트가 함께 들어간 커스터마이징 가능한 버튼 만들기 (Tailwind + React)이번 글에서는 Tailwind CSS를 기반으로,아이콘과 텍스트가 함께 표시되고, 색상/폰트/모서리 등을 자유롭게 조절할 수 있는 버튼 컴포넌트를 만들어보겠습니다.📌 목표 디자인아이콘 + 텍스트 수평 정렬배경색, 텍스트색, border-radius 등 커스터마이징 가능클릭 이벤트 핸들링 가능반복 사용이 쉬운 재사용형 구조🧱 ButtonPresets.js (스타일 프리셋)// src/styles/buttonPresets.jsexport const buttonPresets = { default: { background: 'bg-gray-100', textColor: 'text-black', ..

💡 TextField 컴포넌트 사용 예시 (React + Tailwind)앞서 만든 텍스트 필드를 실제 프로젝트에서 어떻게 사용하는지 보여드리겠습니다.아래는 App.jsx 또는 특정 페이지 컴포넌트에서 사용할 수 있는 예시입니다.🧱 1. TextField 컴포넌트 만들기 (TextField.jsx)import React from 'react'function TextField({ placeholder = '텍스트를 입력하세요', value, onChange, fontClass = 'text-base font-medium', borderClass = 'border border-gray-200 rounded-xl', paddingClass = 'px-4 py-3',}) { return ( ..

✏️ Tailwind CSS로 커스터마이징 가능한 텍스트 필드 만들기입력 필드(UI Text Field)는 모든 사용자 인터페이스에서 가장 많이 쓰이는 컴포넌트입니다.이번 글에서는 Tailwind CSS를 이용해 placeholder, 폰트, 여백, 테두리 등을 자유롭게 조정할 수 있는 커스터마이징 가능한 텍스트 입력 필드를 만드는 방법을 소개합니다.✅ 기본적인 입력 필드 구성Tailwind로 텍스트 필드를 구성할 때 고려해야 할 주요 요소는 다음과 같습니다.항목설명Tailwind 예시크기너비 및 높이w-full, h-12여백내부 패딩px-4, py-3테두리굵기, 둥근 정도border, rounded-lg폰트크기, 굵기text-base, font-medium상태포커스 시 효과focus:outline-no..

🎨 Tailwind로 만드는 이미지 버튼 컴포넌트 (선택 테두리 + 커스텀 X버튼 위치)이번 글에서는 다음 기능을 가진 UI 컴포넌트를 구현하는 기초 지식을 소개합니다.이미지를 표시하는 사각형 버튼클릭 시 선택됨 상태로 전환되며 border 표시X 버튼은 오른쪽 상단에 위치하며, 위치는 자유롭게 조정 가능이미지 교체가 가능하도록 props 기반 설계✅ 컴포넌트 구조React 기준으로 아래와 같은 구조로 구성할 수 있습니다:💡 핵심 기능기능구현 요소선택 여부selected prop으로 제어이미지 경로imageSrc propX 버튼 위치closeButtonPosition prop (absolute + Tailwind 조합)클릭 핸들러onClick, onClose 분리✅ 예제 코드import React f..

✨ Tailwind CSS로 UI를 만들기 전에 꼭 알아야 할 기초 컴포넌트 개념프론트엔드 화면을 디자인하다 보면, 자주 반복되는 UI 요소들이 있습니다.Tailwind CSS를 사용할 때 이 요소들을 빠르게 그리고 일관되게 만들기 위해서는 몇 가지 기초 개념을 이해하고 있는 것이 중요합니다.이번 글에서는 특히 버튼, 입력 필드, 텍스트, 간격 및 정렬 등 실제 UI를 구성할 때 꼭 알아야 할 Tailwind CSS의 핵심 요소들을 소개합니다.🔘 버튼(Button) 컴포넌트버튼은 거의 모든 웹 UI에서 사용되는 핵심 요소입니다.Tailwind에서는 유틸리티 클래스 조합을 통해 다양한 버튼 스타일을 직접 만들 수 있습니다.✅ 버튼 구성의 기본 요소요소예시 클래스설명배경색bg-blue-500버튼 색상텍스트..

🎨 React + Vite에 Tailwind CSS 적용하는 방법안녕하세요! 지난 글에서 Tailwind CSS가 왜 좋은지에 대해 알아봤죠?이번 글에서는 실제로 React + Vite 프로젝트에 Tailwind CSS를 설치하고 적용하는 방법을 단계별로 정리해드릴게요.✅ 1단계: 프로젝트 준비먼저 Vite + React 프로젝트가 준비되어 있어야 합니다.아직 생성하지 않으셨다면 아래 명령어로 먼저 프로젝트를 만들고 시작하세요.npm create vite@latest my-app -- --template reactcd my-appnpm install✅ 2단계: Tailwind CSS 설치Tailwind CSS 관련 패키지를 설치합니다.npm install -D tailwindcss postcss aut..

🎨 왜 Tailwind CSS를 사용할까? - 개발자와 디자이너 모두를 위한 선택안녕하세요! 이번 글에서는 최근 프론트엔드 개발에서 뜨거운 주목을 받고 있는 Tailwind CSS에 대해 알아보겠습니다."이미 CSS도 있고, styled-components도 있고, Sass도 있는데... 왜 굳이 Tailwind를 쓸까?"이런 궁금증을 가진 분들을 위해 Tailwind CSS의 특징과 장점을 쉽게 정리해드릴게요.🧠 Tailwind CSS란?Tailwind CSS는 유틸리티 퍼스트(Utility-first) CSS 프레임워크입니다.기존의 CSS 방식이 .button, .header 같은 클래스를 만들고 여기에 스타일을 부여하는 방식이었다면,Tailwind는 HTML 태그 안에서 클래스만으로 디자인을 완..