atomicdev 님의 블로그

React 프로젝트 생성 및 Tailwind CSS 설정강의 목표React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.1. Create React App으로 프론트엔드 프로젝트 생성React 프로젝트 생성guestbook-app이라는 이름으로 프로젝트를 생성합니다.npx create-react-app guestbook-app cd guestbook-app프로젝트 파일을 확인합니다.기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.App.js, index.js 파일이 주요 시작점입니다. 2. Tailwind CSS 설치 및 기..

Tailwind CSS 강좌 목차Tailwind CSS를 사용하여 React 개발 프로젝트를 진행할 때 프론트엔드 개발자가 알아야 할 강좌 입니다. 실습 중심으로 Tailwind CSS의 기본 개념부터 고급 활용법까지 다루며, 각 단계마다 React 프로젝트에 직접 적용해볼 수 있도록 진행했습니다. 1. Tailwind CSS 개요 및 설치내용:Tailwind CSS 소개: Utility-First CSS 프레임워크의 개념Tailwind CSS와 전통적인 CSS 방식의 차이점프로젝트에서 Tailwind CSS 설치 및 설정실습:Create React App으로 React 프로젝트 생성Tailwind CSS 설치 및 PostCSS 설정Tailwind CSS 초기 설정 파일 생성 및 구성기본적인 스타일 적용..

Tailwind CSS: 재사용 가능한 UI 컴포넌트를 위한 디자인 토큰 커스터마이징Tailwind CSS는 유틸리티 우선 CSS 프레임워크로, 개발자가 미리 정의된 클래스를 사용하여 빠르게 스타일을 적용할 수 있도록 돕습니다. Tailwind의 주요 장점 중 하나는 유틸리티 클래스를 커스터마이징하고 확장하여, 개발자가 일관된 디자인 토큰을 만들어 여러 컴포넌트에서 재사용할 수 있다는 점입니다.이번 글에서는 Tailwind CSS에서 디자인 토큰을 커스터마이징하는 방법을 다루며, 특히 색상 스킴을 중심으로 설명하고, 이를 통해 프로젝트의 개발 과정과 시각적 일관성을 어떻게 향상시킬 수 있는지 알아보겠습니다.1. 디자인 토큰이란?디자인 토큰은 색상, 간격, 타이포그래피와 같은 재사용 가능한 디자인 요소입니..