느려도 한걸음씩

https://quiple.dev/galmuri Galmuri – quiple작은 크기에서도 가독성 좋고 균형 있는 한글 비트맵 폰트.quiple.dev사용폰트(Galmuri9)   woff2 파일 다운후 index.css에 font-face 작성  tailwind.config.js파일에 extends 객체에 fontFamily 객치의 sans 값으로 font-face에서 적용한 글꼴이름을 써주고 적용이 안될경우 적용할 글꼴을 뒤에 써준다   적용된 모습

npx create-react-app my-app --template typescriptCRA + Typescipt로 리액트 프로젝트 생성 git 레포지토리 생성후 프로젝트 연결 npm install -D tailwindcss Tailwind 설치 npx tailwindcss init tailwind init 명령어를 통해 tailwind.config.js 파일을 생성 module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [],}; tailwind.config.js에 템플릿 파일 경로 추가  @tailwind base;@tailwind components;@tailwind util..

테일윈드를 프로젝트에 적용시켜보자 이 글에서는 vite를 이용해 생성된 리액트 프로젝트에 적용하는법을 소개한다 참고 페이지 : https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com     우선 터미널을 열고 tailwind를 설치한다npm install -D tailwindcss postcss autoprefixer  tailwind를 설치하고 해당 명령어를 터미널에 입력한다npx tailwindcss init -p 해당 명령어를 실행하면 프로젝트내에 tailwilnd.config.js와 postcss...

Tailwind CSS는 유틸리티-퍼스트(Utility-First) CSS 프레임워크로, 미리 정의된 클래스를 사용해 빠르게 UI를 구성할 수 있도록 돕는 라이브러리이다. 전통적인 CSS 프레임워크와는 달리, Tailwind는 특정한 컴포넌트를 제공하지 않고, 작고 재사용 가능한 스타일 유틸리티 클래스를 제공한다.  Tailwind CSS의 장점CSS 파일 작성이 필요 없음별도의 CSS를 작성하지 않아 작업이 간편하다클래스 이름 고민 해소Tailwind의 미리 정의된 클래스 이름을 사용하면 네이밍에 대한 부담이 줄어든다디자인 시간 단축색상, 폰트 등 미리 제공된 스타일을 활용해 디자인에 드는 시간을 절약할 수 있다간편한 반응형 디자인반응형 유틸리티 클래스(sm:, md:, lg: 등)를 사용해 손쉽게 반..