Tailwind CSS @theme 사용법: 변수와 디자인 토큰 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Theme Variables와 Design Token을 구분해 정리합니다. 는 단순히 CSS 변수를 모아두는 문법이 아니라, 프로젝트에서 사용할 유틸리티 클래스의 기준이 됩니다. 버튼 색상, 카드 모서리, …
더 읽기개발
프로그래밍 카테고리에서는 HTML, CSS, JavaScript, React, Next.js를 비롯한 다양한 개발 지식과 실무 구현 방법을 정리합니다. 기초 문법부터 UI 구현, API 연동, 상태 관리, 성능 최적화, 트러블슈팅까지 실제 작업에 바로 적용할 수 있는 내용을 쉽고 체계적으로 다룹니다.
Tailwind CSS transition, animation, motion-reduce 사용 기준 정리
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로를 정리합니다. 버튼 hover처럼 상태가 바뀌는 움직임로딩 스피너처럼 시간 흐름을 가진 움직임, 사용자의 모션 감소 설정을 고려해야 하는 움직임을 구분해 봅니다. 움직임 효과를 넣을 때 먼저 나눌 기준 …
더 읽기
TanStack Query staleTime gcTime 차이: 캐시 시간 기준
이 글에서 정리하는 내용 TanStack Query v5 기준으로 staleTime과 gcTime의 차이를 정리합니다. 캐시가 남아 있는데도 요청이 다시 나가는 이유, v4의 cacheTime이 v5에서 gcTime으로 바뀐 이유, 실제 React 화면에서 두 옵션을 …
더 읽기
TanStack Query queryFn 사용법: 데이터 요청 로직 분리하기
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기
Tailwind CSS dark 사용법: 다크 모드 구현 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 dark: variant를 사용할 때 먼저 정해야 하는 기준을 정리합니다. 다크 모드는 어두운 색을 몇 개 추가하는 작업이 아니라, 라이트 모드와 같은 정보 구조를 다른 조도 환경에서도 읽히게 다시 맞추는 …
더 읽기
Tailwind CSS group peer has 차이: 상태 기준으로 고르는 방법
Tailwind CSS group, peer, has-*를 고르는 기준 Tailwind CSS에서 상태 스타일링이 헷갈리는 순간은 대부분 클래스 이름 때문이 아니라, 상태가 발생하는 요소와 실제로 바꾸고 싶은 요소가 다르기 때문에 생깁니다.는 각각 부모, 형제, 자식 …
더 읽기
Tailwind CSS 상태 variant 사용법: hover focus aria data 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로, variant를 정리합니다. 버튼, 입력창, 탭, 아코디언처럼 상태가 자주 바뀌는 UI에서 어떤 variant를 먼저 써야 하는지 판단 기준을 잡는 데 초점을 둡니다. 상태 variant는 클래스 암기…
더 읽기
Tailwind CSS 반응형 클래스 사용법: sm md lg 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS의 반응형 클래스를 화면 이름이 아니라 스타일이 바뀌기 시작하는 너비 기준으로 정리합니다. 접두사 없는 기본 클래스에서 출발해, 카드 리스트·검색 필터·섹션 여백처럼 실제 화면에서 달라지는 부분만 breakpoint로 조정…
더 읽기
Tailwind CSS Grid 실무 레이아웃 정리: 카드 목록부터 대시보드까지
이 글에서 정리하는 내용 Tailwind CSS Grid를 카드 목록, 대시보드, 사이드바 레이아웃처럼 실제 화면에서 어떻게 선택하고 조합할지 정리합니다. 기준은 Tailwind CSS v4 문법에 두고, 클래스 암기보다 레이아웃을 판단하는 순서에 초점을 맞춥니다. …
더 읽기
Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기
이 글에서 정리하는 내용 Tailwind CSS 기본 클래스는 전부 외워야 하는 목록이 아니라 CSS 속성을 짧게 부르는 규칙에 가깝습니다. Tailwind CSS v4 기준으로 text, font, bg, w, h, p, m 접두사가 타이포그래피, 색상…
더 읽기