HTML만 쓴 페이지는 1990년대 디자인처럼 보인다.
CSS가 있어야 색상·여백·레이아웃이 살아난다.
그리고 Tailwind CSS는 CSS를 더 빠르고 직관적으로 쓸 수 있게 해준다 — AI가 가장 잘 다루는 스타일링 방식이기도 하다.
HTML의 모든 요소는 네 겹의 박스로 둘러싸여 있다. 이 구조를 알면 여백 문제의 90%가 풀린다.
안쪽부터 바깥쪽으로 — 각 겹이 담당하는 역할이 다르다.
현대 CSS 레이아웃의 양대 축. 차원의 수가 결정적인 차이다.
전통적 CSS는 별도 파일에 스타일을 정의했다. Tailwind는 미리 만들어둔 클래스를 HTML에 직접 붙인다.
같은 결과를 만드는 두 가지 방식 — 길이와 흐름이 완전히 다르다.
💡 Tailwind는 한 줄 — HTML만 봐도 이 버튼이 어떻게 생겼는지 즉시 알 수 있다.
이 정도만 익히면 AI가 만든 코드의 80%는 읽힌다.
💡 패턴은 단순 — 속성-값이 하이픈으로 연결된다 (text-lg, bg-blue-500).
이름의 구조를 알면 외울 필요 없이 조립해서 쓸 수 있다.
스타일을 직접 깎는 대신, 미리 만들어진 부품을 골라 조립한다.
Cursor·Claude·Copilot이 만드는 웹 코드의 대부분이 Tailwind인 데는 이유가 있다.
💡 Tailwind를 읽을 줄만 알면 AI 결과물을 검증하고 수정 요청할 수 있다.
HTML로 구조를, CSS·Tailwind로 디자인을 입혔다.
이제는 화면을 동적으로 움직이게 하는 언어 — JavaScript의 기초를 배운다.
💡 기억할 것: 모든 요소는 박스다. Tailwind는 그 박스들을 빠르게 조립하는 부품 카탈로그다.