Tailwind CSS @apply 사용 기준: @utility와 custom variant 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 를 어디에 쓰고 어디에서 멈춰야 하는지 정리합니다. 반복 버튼을 줄이는 문제, third-party 라이브러리 스타일 덮어쓰기, @utility로 프로젝트 전용 유틸리티를 만드는 기준, @custom-var…
더 읽기Tailwind CSS
Tailwind CSS transition, animation, motion-reduce 사용 기준 정리
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로를 정리합니다. 버튼 hover처럼 상태가 바뀌는 움직임로딩 스피너처럼 시간 흐름을 가진 움직임, 사용자의 모션 감소 설정을 고려해야 하는 움직임을 구분해 봅니다. 움직임 효과를 넣을 때 먼저 나눌 기준 …
더 읽기
Tailwind CSS dark 사용법: 다크 모드 구현 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 dark: variant를 사용할 때 먼저 정해야 하는 기준을 정리합니다. 다크 모드는 어두운 색을 몇 개 추가하는 작업이 아니라, 라이트 모드와 같은 정보 구조를 다른 조도 환경에서도 읽히게 다시 맞추는 …
더 읽기
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 접두사가 타이포그래피, 색상…
더 읽기
Tailwind border flex 사용법: 레이아웃 기본 클래스 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 보더 두께, 방향, 색상, 라운딩, flex 배치와 정렬 클래스를 정리합니다. 클래스 이름을 따로 외우기보다 실제 CSS 속성과 연결해서 보는 데 초점을 둡니다. border는 선을 켜는 기본 스위치에…
더 읽기
Tailwind CSS 실무 로드맵: 기본 클래스부터 반응형·상태·동적 클래스까지
이 글에서 정리하는 내용 Tailwind CSS는 클래스 이름을 많이 외우는 도구처럼 보이지만, 실제로는 화면을 만드는 순서대로 익힐 때 훨씬 편해집니다. 기본 유틸리티, flex와 grid, 반응형, 상태 variant, 다크 모드, 동적 className 문…
더 읽기
Next.js SEO SSR 적용법: 검색 노출과 렌더링 구조 잡기
핵심 요약 Next.js는 React 기반 프레임워크로, 서버 사이드 렌더링()을 통해 SEO에 유리한 구조를 제공합니다. 이 글에서는 SEO 최적화 방법, Tailwind CSS를 활용한 UI 구축, API 연동 및 상태 관리 기법을 다루며 실전에 도움이 되는 내용을…
더 읽기