이 장의 내용 · 6
웹 화면은 크게 두 가지로 만들어집니다. 무엇을 보여 줄지 정하는 뼈대(HTML)와, 어떻게 보일지 정하는 옷(CSS)입니다. 예전에는 옷을 입히려면 CSS 파일을 따로 만들고, 이름을 짓고, 두 파일을 오가며 작업해야 했습니다.
Tailwind CSS는 이 과정을 확 줄여 줍니다. 미리 만들어 둔 스타일 이름표를 요소에 바로 붙이면 끝입니다.
<button className="bg-orange-500 text-white px-6 py-3 rounded-full font-bold hover:bg-orange-600">
신청하기
</button>13.1이름표를 읽는 법
- bg-orange-500: 배경(background)을 주황색으로. 숫자가 클수록 진한 색입니다.
- text-white: 글자색을 흰색으로.
- px-6 py-3: 안쪽 여백. x는 좌우, y는 위아래입니다.
- rounded-full: 모서리를 완전히 둥글게.
- font-bold: 글자를 굵게.
- hover:bg-orange-600: 마우스를 올리면 조금 더 진한 주황색으로.
이름만 봐도 뜻이 대충 짐작되죠? 이게 Tailwind의 가장 큰 장점입니다. 코드를 몰라도 읽을 수 있고, AI가 만든 화면을 살짝 고치고 싶을 때 이름표 하나만 바꾸면 됩니다.
13.2자주 쓰는 이름표
- p-4, m-4: 안쪽 여백(padding), 바깥 여백(margin)
- text-lg, text-2xl: 글자 크기
- bg-white, text-gray-700: 배경색, 글자색
- rounded-xl: 둥근 모서리
- flex, grid: 요소를 나란히, 또는 격자로 배치
- gap-4: 나란히 놓인 요소 사이의 간격
숫자는 대부분 "클수록 크게"입니다. p-2보다 p-8이 여백이 넓습니다.
13.3화면 크기별로 다르게
Tailwind는 작은 화면을 먼저 생각합니다. 앞에 아무것도 붙지 않은 이름표는 모든 화면에 적용되고, md:나 lg:를 붙이면 그 크기 이상의 화면에서만 적용됩니다.
<h1 className="text-2xl lg:text-5xl">바이브공장장</h1>휴대폰에서는 text-2xl, 넓은 데스크톱 화면에서는 text-5xl이 됩니다.
13.4우리 브랜드 색 쓰기
이 홈페이지는 Tailwind v4를 씁니다. v4에서는 CSS 파일 안의 @theme에 브랜드 색을 등록합니다.
@theme {
--color-orange: #e4583a;
}이렇게 등록하면 bg-orange, text-orange 같은 이름표가 생깁니다. 브랜드 색을 바꾸고 싶으면 이 한 줄만 고치면 사이트 전체가 바뀝니다. CLAUDE.md4장에 "색은 @theme에 등록한 이름만 쓴다"처럼 적어 두면 AI도 이 규칙을 지킵니다.
13.5자주 하는 실수 세 가지
- 이름표를 조합해서 만들기: bg-${color}-500처럼 코드로 이름을 이어 붙이면 적용되지 않습니다. Tailwind는 코드 안에 완성된 이름표 글자가 있어야 그 스타일을 만들어 줍니다. bg-red-500, bg-blue-500처럼 통째로 써 두세요.
- 같은 속성을 두 번: p-4 p-8처럼 겹쳐 쓰면 뒤에 쓴 것이 이기는 게 아닙니다. 결과가 헷갈리니 하나만 남기세요.
- sm:을 모바일로 착각: sm:은 "작은 화면 이상"이라는 뜻입니다. 모바일 스타일은 아무것도 붙이지 않은 기본 이름표에 쓰세요.
13.6AI에게 이렇게 말해 보세요
- “신청 버튼을 더 눈에 띄게 바꿔 줘”
- “모바일에서 제목이 너무 커. 줄여 줘”
- “이 화면에 쓰인 Tailwind 클래스를 하나씩 설명해 줘”
특히 마지막 요청은 공부에 좋습니다. AI가 만든 화면의 이름표를 설명받다 보면, 어느새 직접 고칠 수 있게 됩니다.
14장에서는 화면 뒤에서 데이터를 저장하고 로그인을 처리하는 Supabase를 알아보겠습니다.
— 13장 끝 —