나디아 성장 일기

Styled-components: JS 파일 내에서 CSS를 작성하고, React 또는 JavaScript 프레임워크와 통합할 수 있도록 해주는 CSS-in-JS 라이브러리컴포넌트 기반 개발에 적합하며, 스타일을 컴포넌트 단위로 캡슐화하여 관리할 수 있다. 장점CSS와 JavaScript의 통합: CSS를 JavaScript 파일 내에 작성하여 스타일과 로직을 한 곳에서 관리할 수 있다.Scoped 스타일: 스타일이 해당 컴포넌트에만 적용되도록 자동으로 범위가 설정되어 클래스 이름 충돌이 발생하지 않는다.동적 스타일링: props나 상태(state)에 따라 동적으로 스타일을 변경할 수 있다.재사용성: 스타일이 적용된 컴포넌트를 다른 곳에서 재사용할 수 있으며, 상속(Extending Styles)을 통해..

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