나디아 성장 일기

Heroicons: Tailwind Labs에서 만든 SVG 기반 아이콘 세트 라이브러리깔끔하고 미니멀한 디자인이 특징이며, 주로 React와 Tailwind CSS를 사용하는 프로젝트에서 많이 사용된다.Heroicons는 React 컴포넌트 형태로 아이콘을 제공하여, JavaScript/TypeScript 기반 프레임워크와 쉽게 통합할 수 있다. Heroicons React-icons Tailwind CSS를 사용하는 경우다양한 아이콘 세트와 스타일이 필요한 경우모던하고 심플한 아이콘이 필요할 때기존의 FontAwesome 또는 Material Icons를 사용하던 프로젝트가벼운 패키지가 필요한 경우Tailwind와 무관하게 다양한 아이콘 라이브러리가 필요한 경우   설치 React 프로젝트npm i..

Tailwind CSS 지시어(Directives): CSS 안에서 Tailwind 스타일을 설정하거나 커스터마이징할 수 있는 명령어 기본 스타일 추가(@tailwind), 클래스 재활용(@apply), 스타일 확장(@layer)을 쉽게 구현할 수 있게 도와준다.   @tailwind: Tailwind의 기본 스타일(base), 컴포넌트(components), 유틸리티(utilities) 등을 CSS에 추가한다. /* globals.css */@tailwind base; /* tailwind의 기본적인 리셋 및 기본 스타일 */@tailwind components; /* 클래스 이름을 컴포넌트로 묶음 */@tailwind utilities; /* 모든 유틸리티 클래스 가져옴 */   @apply: Tai..

tailwind.config.ts 파일 항목 content: Tailwind 스타일을 적용할 파일들의 경로를 지정한다. 지정된 파일들에서 사용된 클래스만 찾아서 최적화된 CSS를 생성한다. theme: Tailwind의 기본 스타일을 설정하거나 확장할 수 있다. extend를 사용하면 새로운 스타일을 추가할 수 있다. plugins: Tailwind CSS의 기능을 확장하는 플러그인을 추가할 수 있다. 폼 스타일링 등을 위한 플러그인 등을 추가할 수 있다.import type { Config } from "tailwindcss";const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{..

group-{modifier:class}: 부모 요소의 상태(state)에 따라 자식 요소의 스타일을 동적으로 변경한다.부모 요소가 hover, focus와 같은 상태일 때, 그 상태를 기반으로 자식 요소의 스타일을 변경한다.사용: 인터랙티브 UI(버튼, 카드, 메뉴) 등에서 자식 요소에 동적 스타일링이 필요할 때 사용 group-hover부모 요소에 마우스를 올릴 때 적용group-hover:bg-blue-500group-focus부모 요소가 포커스될 때 적용group-focus:text-green-500group-active부모 요소가 활성화(클릭 등)될 때 적용group-active:scale-105group-disabled부모 요소가 비활성화될 때 적용group-disabled:opacity-50..

리스트 선택자는 map() 함수로 반복 렌더링하는 컴포넌트에 유용하다.짝수/홀수 행 요소, 첫/마지막 요소, 빈 상태의 요소의 스타일을 쉽게 설정할 수 있다.  odd:: 홀수 요소 선택CSS의 nth-child(odd)과 동일하다. 사용: 목록의 홀수 요소에 개별 스타일 적용 첫 번째 두 번째 세 번째  even:: 짝수 요소 선택CSS의 nth-child(even)과 동일하다.사용: 목록의 짝수 요소에 개별 스타일 적용 첫 번째 두 번째 세 번째  first:: 첫 번째 요소 선택사용: 첫 번째 요소에만 다른 스타일 적용 첫 번째 두 번째 세 번째  last:: 마지막 요소 선택사용: 테이블이나 리스트에서 마지막 요소에 특정 스타일 제거 또는 적용 첫 번째 두 번째 마지막 요소 ..

1. animate-bounce: 요소가 위아래로 튀는 애니메이션버튼이나 아이콘에 주목을 끌고 싶을 때 사용Bounce Animation  2. animate-spin: 요소를 회전시키는 애니메이션로딩 스피너 구현 시 사용Spin Animation  3. animate-pulse: 요소가 점차적으로 어두워졌다가 밝아지는 애니메이션 로딩 상태를 표현하거나 데이터가 업데이트되고 있음을 나타낼 때 사용Pulse Animation  4. animate-ping: 중앙에서 원이 확산되는 애니메이션 사용중앙의 고정된 원과 가장자리가 터지는 원 두 개로 구성가장자리가 터지는 원에 해당 클래스를 적용 알림(Notification) 효과처럼 시각적으로 주의를 끌 때 유용      Animation - Tai..

bg-gradient-to-방향 from-색상 (via-중간 색상) to-색상 : 그라데이션 배경 설정 3색 그라데이션   bg-gradient-to-방향: 그라데이션의 방향 설정to-r  →  오른쪽으로 그라데이션to-l  →  왼쪽으로 그라데이션to-t  →  위쪽으로 그라데이션to-b  →  아래쪽으로 그라데이션to-tr  →  오른쪽 위 대각선으로 그라데이션to-bl  →  왼쪽 아래 대각선으로 그라데이션 from-색상: 그라데이션의 시작 색상 설정  via-색상 (선택 사항): 그라데이션의 중간 색상 설정  to-색상: 그라데이션의 끝 색상 설정 2색 그라데이션    Gradient Color Stops - Tailwind CSSUtilities for controlling the col..

invalid: : 유효하지 않는 입력값에 작동하는 스타일을 설정    *: : 해당 태그의 모든 자식 요소에 스타일 적용 (자식 선택자) 자식 선택자는 부모 요소의 자식들을 대상으로 스타일을 지정한다. 텍스트1 텍스트2   peer-modifier:: 형제 상태에 따라 스타일 지정 특정 요소의 상태가 변경되었을 때, 그 상태를 기준으로 다른 형제 요소의 스타일을 지정할 수 있다.1) 상태를 감지할 형제 요소에 peer 클래스를 지정하고, 2) 다른 형제 요소에는 peer 클래스를 적용한다.🚨 peer 클래스를 사용할 때, 이전 형제 요소만 감지할 수 있다.peer가 적용된 요소는 > 스타일을 적용하려는 요소보다 앞에 있어야 한다.   Email Submit    has-[modif..

Tailwind CSS의 반응형 유틸리티 클래스Tailwind CSS는 sm, md, lg, xl, 2xl 등의 반응형 프리픽스를 제공하며, 각각 특정 화면 크기 이상에서 적용된다.  sm: : 화면 크기 640px 이상에서 적용 @media (min-width: 640px) { ...}   md:   : 화면 크기 768px 이상에서 적용 @media (min-width: 768px) { ...}   lg: : 화면 크기 1024px 이상에서 적용 @media (min-width: 1024px) { ...}  xl: : 화면 크기 1280px 이상에서 적용 @media (min-width: 1280px) { .....

1. hover:마우스 오버 시 스타일을 변경하는 상태 클래스Hover Me   2. focus:요소가 포커스되었을 때 스타일을 변경하는 클래스주로 입력 필드나 버튼에 사용된다.   3. dark: 다크 모드일 때 적용할 스타일을 지정하는 클래스테일윈드 설정 파일에서 darkMode 옵션을 활성화하여 사용할 수 있다.ex) dark:bg-gray-800 ➡ 다크 모드에서 배경색을 어두운 회색으로 변경윈도우 유저의 경우 윈도우10 기준 '설정' > '개인 설정' > '색' > '색 선택'을 '다크'로 적용하면 NextJS app에 반영된다.(크롬 앱 자체에서 다크 모드로 설정하는 건 적용 ❌) 다크 모드에서 색상이 변경된다.   4. ring:요소의 outline을 커스텀할 수 있는 클래스(박스 그림자를..