✅ IntelliSense 자동완성을 첫 문자열부터 활성화 하는 방법settings.json"editor.quickSuggestions": { "strings": true,}

✅ Layer란?CSS의 layer 개념은 CSS Cascade(스타일이 적용되는 우선순위) 안에서 스타일 시트 간의 우선순위를 명시적으로 제어하기 위해 추가된 새로운 규칙 쉽게 말해, CSS에서 여러 스타일이 겹칠 때 누가 이길지 명확하게 순서를 정해주는 방법 TailwindCSS에서의 layerTailwind는 CSS를 크게 세 가지 레이어로 나눠서 관리 Base브라우저 기본 스타일 리셋과 타이포그래피 초기화 같은 기본 스타일이 여기에 속함.예: html, body, a 태그 기본 설정Components재사용 가능한 컴포넌트 수준의 스타일이 여기에 들어감.예: 버튼, 카드, 모달 같은 UI 컴포넌트Utilitiesbg-red-500, p-4, flex 같은 원자 단위 유틸리티 클래스 Tailwind는..

✅ 반응형 디자인sm -> @media(min-width: 640px)md -> @media(min-width: 768px)lg -> @media(min-width: 1024px) dark -> @media(prefers-color-scheme: dark) lg: grid-cols-2라지 사이즈 화면에서는 2개의 column을 가진다. ✅ ringring-22px의 ring border가 생김 ring-offset-2ring에 2px의 간격이 생김 ring-yellow-500ring 색상 설정 focus:ring-2focus시 ring 생성 ring-opacity-20ring의 불투명도를 20%로 설정 ✅ TransitionclassName에 transition을 추가하기만 하면 자동으로 예쁜 trans..

✅ Setup설치npm i -D tailwindcss postcss autoprefixer 설정npx tailwindcss init -p-p는 --postcss의 줄임말로,postcss.config.js 파일을 함께 생성해주는 옵션(TailwindCSS는 PostCSS 기반이기 때문에 필수다.) ✅ tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, darkMode: "media", // class ..