나디아 성장 일기

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을 커스텀할 수 있는 클래스(박스 그림자를..

1. 크기 (Sizing)  h- → 높이(height)w- → 너비(width)h-[값] → 사이즈 임의 설정 size- → 높이 + 너비w-1/2 → 너비 50%  w-1/3 → 너비 33.33%  w-1/4 → 너비 25%  w-screen → 화면 전체 너비  h-screen → 화면 전체 높이  w-full → 너비 100%  h-full → 높이 100%max-w-md → 최대 너비 28rem  2. 여백 (Spacing) 패딩 (Padding)   p-0 → 패딩 없음   p-1 → 0.25rem 패딩   p-2 → 0.5rem 패딩   p-4 → 1rem 패딩  pt- → padding-toppb- → padding-bottompy-4 → 위아래(y축) 패딩(padding top & bot..

📌 Tailwind CSS: 유틸리티 기반의 CSS 프레임워크미리 정의된 클래스를 활용해 빠르고 쉽게 스타일링할 수 있다.tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다.컴포넌트마다 CSS 파일을 생성하지 않아도 된다. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com   ⏩ 설치크로스 브라우징을 대응 해주는 postcss a..