이 문서는 순수 HTML과 Tailwind CSS v4로 만든 사이트를, 브라우저에서 실시간으로 CSS를 만들어 주던 방식에서 미리 컴파일된 하나의 정적 CSS 파일로 굳혀 다시 배포하는 절차를 다룹니다. AGY(구글 안티그라비티)로 사이트를 만들어 GitHub Pages에 이미 올린 상태를 전제로 씁니다. 다 따라 하면 브라우저가 페이지를 열 때마다 CSS를 계산하는 부담이 사라지고, 배포 파일 하나만 보고도 어떤 스타일이 들어갔는지 … 더 읽기
Tailwind를 처음 배울 때 가장 헷갈리는 두 가지가 “클래스 이름이 어떤 규칙으로 만들어지는가”와 “숫자·이름(sm, md…)이 실제로 몇 px인가”다. 이 문서는 그 두 체계를 공식 문서 기준으로 정리한다. 모든 수치는 2026-07-27에 Tailwind CSS 공식 문서로 확인한 값이다. 1 – 유틸리티 클래스 체계 유틸리티 클래스는 한 가지 스타일만 담당하는 클래스다. text-center는 글자 가운데 정렬 하나, p-4는 안쪽 … 더 읽기
이 문서는 Tailwind CSS로 상자 배치(레이아웃)와 화면 크기별 디자인(반응형)을 실습하는 문서다. HTML 기본 태그(div, h1, a)를 써 본 사람이 대상이고, CSS 파일을 따로 만들지 않고 클래스 이름만으로 화면을 만든다. 끝까지 따라 하면 화면 너비에 따라 카드가 1열에서 3열로 바뀌는 웹 페이지 한 장이 결과물로 남는다. 1 – Tailwind CSS와 실습 준비 Tailwind CSS는 미리 만들어 … 더 읽기
Tailwind CSS 보통 웹사이트를 꾸밀 때는 별도의 CSS 파일에 코드를 길게 작성해야 한다. 하지만 Tailwind는 “이미 만들어진 태그(Class)”를 HTML에 바로 붙여서 디자인하는 방식이다. 테일윈드 공식 테일윈드 치트시트 공식테일윈드 피그마 스타일파일 테일윈드 디자인토큰 생성기 피그마 플러그인 1. Basics — 설치 NPM 설치 (Vite 기준) 터미널에 아래 명령어 입력 npm install tailwindcss @tailwindcss/vite vite.config.js 파일에 아래 코드 … 더 읽기
