나디아 성장 일기

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..

Framer MotionReact (선언형) 애니메이션 라이브러리  https://euid.notion.site/Framer-Motion-15d75899a1bc47e7978fa63926069afa  Framer Motion | NotionReact (선언형) 애니메이션 라이브러리euid.notion.site

Next.js 초기 셋팅하기 1. Node.js 프로젝트 초기화 npm init -y   2. 프로젝트의 오픈 소스 라이선스를 MIT 라이선스로 설정 // package.json{ "name": "nextjs-bestseller", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "MIT"}  3. Next.js & React & React-dom 설치❗Next.js는 TypeScript 지원을 내장하고 있어서 .tsx 파일을 만들..

prefecth />: 사용자의 뷰포트에 Link 컴포넌트가 들어가면, 해당 링크에 설정된 페이지와 데이터를 미리 백그라운드에서 로드한다.Next.js는 Link 된 라우트(href에 지정된 라우트)와 해당 데이터를 백그라운드에서 미리 prefetch하고 load한다. 프로덕션 환경에서만 활성화된다. (개발 중에는 ❌) 정적 경로 vs 동적 경로정적 경로(pages 폴더에 있는 일반 파일) ➡ 자동 prefetch동적 경로([id].js 같은 파일) ➡ 설정에 따라 달라짐export default function Movie({ title, id, poster_path }: IMovieProps) { const router = useRouter(); const onClick = () => { ro..