02. Tailwind CSS v4 – 레이아웃부터 반응형까지

작성자:

이 문서는 Tailwind CSS로 상자 배치(레이아웃)와 화면 크기별 디자인(반응형)을 실습하는 문서다. HTML 기본 태그(div, h1, a)를 써 본 사람이 대상이고, CSS 파일을 따로 만들지 않고 클래스 이름만으로 화면을 만든다. 끝까지 따라 하면 화면 너비에 따라 카드가 1열에서 3열로 바뀌는 웹 페이지 한 장이 결과물로 남는다.

1 – Tailwind CSS와 실습 준비

Tailwind CSS는 미리 만들어 둔 클래스 이름을 HTML 태그에 붙여 화면을 꾸미는 CSS 도구다. CSS 파일에 규칙을 직접 적는 대신, class="text-center"처럼 준비된 이름을 골라 태그에 붙인다. 이렇게 한 가지 스타일만 담당하는 클래스를 유틸리티 클래스(utility class)라 부른다.

예를 들어 글자를 가운데 정렬하려면 CSS 파일에 text-align: center 규칙을 적는 대신, 태그에 text-center 클래스 하나만 붙이면 된다. 이름 하나가 스타일 한 가지와 짝을 이룬다.

이 문서의 실습은 Play CDN으로 진행한다. Play CDN은 설치 없이 script 태그 한 줄로 Tailwind를 불러오는 개발용 도구다.

Play CDN은 개발·연습 전용이다. 공식 문서는 "The Play CDN is designed for development purposes only, and is not intended for production."(Play CDN은 개발 용도로만 만들었고, 실제 서비스용이 아니다)이라고 안내한다. 실제 서비스를 만들 때는 Vite 같은 빌드 도구에 Tailwind를 설치해 쓴다.

1.1 – 작업 환경 준비

먼저 실습 파일을 담을 폴더와 HTML 파일 하나를 만든다. VS Code와 Chrome이 설치돼 있어야 하고, 인터넷이 연결돼 있어야 한다. 안내는 Windows 기준이다.

  1. 바탕화면의 빈 곳에서 마우스 오른쪽 버튼을 클릭한다.
  2. [새로 만들기] → [폴더]를 선택하고, 폴더 이름에 tailwind_practice를 입력한 뒤 Enter 키를 누른다.
  3. VS Code를 실행한다.
  4. 메뉴에서 [File] → [Open Folder…]를 클릭한다.
  5. 파일 선택 창이 뜨면 바탕화면으로 이동한다.
  6. “tailwind_practice” 폴더를 선택하고 [폴더 선택]을 누른다.
  7. 왼쪽 탐색기 패널의 [New File] 아이콘을 클릭하고, 파일 이름에 layout.html을 입력한 뒤 Enter 키를 누른다.
  8. 아래 코드 전체를 입력한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind 레이아웃 실습</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold text-blue-600">Tailwind 실습 시작</h1>
  </body>
</html>
  1. Ctrl+S 키로 저장한다.
  2. 파일 탐색기에서 “tailwind_practice” 폴더를 열고 “layout.html”을 더블클릭한다.

Chrome 창에 파란색 굵은 큰 글씨로 “Tailwind 실습 시작”이 나타난다. head 안의 script 한 줄이 Tailwind를 불러오고, 불러온 Tailwind가 태그의 클래스 이름을 읽어 CSS로 바꿔 적용한다. text-3xl은 글자 크기를 키우고, font-bold는 글자를 굵게 만들고, text-blue-600은 글자를 파란색으로 칠한다.

글씨가 커지지 않고 검은 기본 글씨로만 보이면 인터넷 연결을 확인한다. Play CDN은 인터넷에서 Tailwind를 내려받아 동작하므로, 연결이 없으면 클래스가 적용되지 않는다. 연결을 확인한 뒤 F5 키로 새로고침한다.

macOS에서는 Ctrl 대신 ⌘ 키를 쓴다. 저장은 ⌘+S, 새로고침은 ⌘+R이다.

1.2 – 카드 상자 만들기

앞에서 글자를 꾸몄으니, 이번에는 레이아웃 실습의 재료가 될 카드(내용을 담는 네모 상자)를 하나 만든다. 여기서 쓰는 여백·배경색 클래스는 문서 끝까지 계속 쓴다.

  1. VS Code로 돌아와 </h1> 닫는 태그 아래 줄에 다음 코드를 추가한다.
<div class="m-4 p-4 bg-blue-500 text-white rounded-lg">카드 1</div>
  1. Ctrl+S 키로 저장하고, Chrome에서 F5 키로 새로고침한다.

제목 아래에 파란 배경의 둥근 상자가 나타난다. p-4는 상자 안쪽 여백, m-4는 상자 바깥 여백이다. 숫자 1이 0.25rem(4px)이므로 p-4는 16px 여백이 된다. bg-blue-500은 배경색, text-white는 글자색, rounded-lg는 모서리를 둥글게 깎는 클래스다.

2 – Flex – 상자를 한 줄로 세우기

카드 한 장을 만들었으니, 이제 카드 여러 장을 나란히 놓는 방법을 배운다. Flex는 부모 상자에 붙여 자식 상자를 한 방향으로 줄 세우는 배치 방식이다. HTML의 div 상자는 원래 위에서 아래로 쌓이는데, 부모에 flex 클래스를 붙이면 자식이 가로 한 줄로 늘어선다.

2.1 – 카드 세 장을 가로로 배치

카드 세 장을 부모 상자로 감싸고, 부모에 flex를 붙여 가로로 세운다.

  1. 1.2에서 만든 카드 한 줄을 지우고, 그 자리에 다음 코드를 입력한다.
<div class="m-4 flex gap-4">
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 1</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 2</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 3</div>
</div>
  1. Ctrl+S 키로 저장하고 F5 키로 새로고침한다.

카드 세 장이 가로 한 줄로 늘어선다. flex는 부모에만 붙이고 자식 카드에는 아무것도 더하지 않았다는 점이 핵심이다. gap-4는 자식 사이 간격을 16px씩 벌린다. 카드마다 여백을 주는 대신 부모가 간격을 한 번에 관리하므로, 카드 수가 바뀌어도 간격이 일정하다.

2.2 – 내비게이션 바 만들기 (정렬)

가로로 세우는 것까지 했으니, 이제 줄 세운 항목을 원하는 위치에 정렬한다. 웹 사이트 상단에 흔한 내비게이션 바(메뉴 줄)를 만들며 정렬 클래스를 익힌다.

  1. <body> 여는 태그 바로 아래 줄에 다음 코드를 추가한다.
<nav class="flex items-center justify-between bg-gray-900 text-white p-4">
  <span class="text-xl font-bold">MySite</span>
  <div class="flex gap-6">
    <a href="#">홈</a>
    <a href="#">소개</a>
    <a href="#">연락처</a>
  </div>
</nav>
  1. Ctrl+S 키로 저장하고 F5 키로 새로고침한다.

화면 맨 위에 검은 막대가 생기고, 왼쪽 끝에 사이트 이름, 오른쪽 끝에 메뉴 세 개가 붙는다. justify-between이 가로 방향의 남는 공간을 항목 사이에 몰아넣어 양 끝으로 벌리고, items-center가 높이가 다른 항목을 세로 가운데에 맞춘다.

가로 정렬은 justify-로 시작하는 클래스가 맡는다. 자주 쓰는 값은 다음과 같다.

클래스하는 일
justify-start왼쪽으로 몰아 배치한다
justify-center가운데로 모아 배치한다
justify-end오른쪽으로 몰아 배치한다
justify-between양 끝으로 벌리고 남는 공간을 항목 사이에 배분한다

3 – Grid – 상자를 바둑판처럼 배치하기

Flex는 한 줄 배치에 알맞다. 카드가 여섯 장, 아홉 장으로 늘어 여러 줄이 필요하면 Grid가 알맞다. Grid는 부모 상자 안을 같은 폭의 열로 나눠 자식을 칸마다 차례로 채우는 배치 방식이다. 이 문서에서는 이렇게 행과 열로 나뉜 판을 바둑판이라 부른다.

grid-cols-3을 붙이면 부모가 폭이 같은 열 3개로 나뉜다. 실제로 만들어지는 CSS는 grid-template-columns: repeat(3, minmax(0, 1fr))로, 열 3개가 남는 폭을 똑같이 나눠 가진다는 뜻이다.

3.1 – 카드 여섯 장을 격자로 배치

2.1에서 만든 flex 카드 묶음을 grid로 바꾸고, 카드를 여섯 장으로 늘린다.

  1. 카드 묶음의 부모 클래스에서 flex를 지우고 grid grid-cols-3으로 바꾼다.
  2. 카드 세 장 아래에 같은 모양의 카드를 세 장 더 추가해 여섯 장으로 만든다. 바꾼 코드는 다음과 같다.
<div class="m-4 grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 1</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 2</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 3</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 4</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 5</div>
  <div class="p-4 bg-blue-500 text-white rounded-lg">카드 6</div>
</div>
  1. Ctrl+S 키로 저장하고 F5 키로 새로고침한다.

카드가 3열 2행의 바둑판 모양으로 놓인다. Flex와 달리 카드 폭이 내용과 상관없이 똑같아지고, 넷째 카드부터는 다음 줄로 자동으로 내려간다. 줄바꿈 위치를 계산할 필요 없이 열 개수만 정하면 되므로, 카드 목록 화면은 대부분 Grid로 만든다.

3.2 – 칸 넓히기 (col-span)

바둑판의 칸은 넓힐 수도 있다. col-span-2는 자식 하나가 열 2칸을 차지하게 만드는 클래스다. 첫 카드를 넓혀 강조해 본다.

  1. 카드 1의 클래스 맨 뒤에 col-span-2를 추가한다.
<div class="p-4 bg-blue-500 text-white rounded-lg col-span-2">카드 1</div>
  1. Ctrl+S 키로 저장하고 F5 키로 새로고침한다.

카드 1이 2칸 폭으로 넓어지고, 나머지 카드가 한 칸씩 뒤로 밀려 3행이 된다. 전체 열 수는 부모의 grid-cols-3이 정하고, 각 자식이 몇 칸을 차지할지는 자식의 col-span-*이 정한다.

  1. 다음 실습을 위해 방금 넣은 col-span-2를 다시 지우고 저장한다.

4 – 반응형 – 화면 크기마다 다른 디자인

3열 바둑판은 컴퓨터 화면에서는 보기 좋지만, 좁은 스마트폰 화면에서는 카드가 지나치게 좁아진다. 반응형은 화면 너비에 따라 다른 스타일을 적용해 어떤 기기에서도 알맞게 보이게 만드는 방법이다.

Tailwind에서 반응형의 기준이 되는 것이 브레이크포인트(breakpoint)다. 브레이크포인트는 스타일이 바뀌는 화면 너비의 기준점이다. 기본값 다섯 개는 다음과 같다.

접두사기준 너비뜻
sm:40rem (640px)640px 이상에서 적용
md:48rem (768px)768px 이상에서 적용
lg:64rem (1024px)1024px 이상에서 적용
xl:80rem (1280px)1280px 이상에서 적용
2xl:96rem (1536px)1536px 이상에서 적용

쓰는 방법은 클래스 앞에 접두사를 붙이는 것이 전부다. grid-cols-3이 모든 화면에서 3열이라면, md:grid-cols-3은 768px 이상에서만 3열이다.

Tailwind는 모바일 퍼스트 방식을 쓴다. 모바일 퍼스트는 접두사 없는 클래스로 작은 화면을 먼저 만들고, 접두사 붙은 클래스로 큰 화면 스타일을 덧입히는 방식이다. 옷을 입을 때 속옷부터 입고 겉옷을 덧입는 순서와 같다. 기본(작은 화면)을 먼저 입히고, 화면이 커질 때만 그 위에 겹친다.

sm:은 "작은 화면 전용"이라는 뜻이 아니라 "640px 이상"이라는 뜻이다. 공식 문서도 sm:으로 모바일을 노리지 말라고 경고한다. 스마트폰 화면을 꾸미려면 접두사 없는 클래스를 쓰고, 큰 화면에서 바꿀 것만 접두사를 붙인다.

4.1 – 카드 격자를 반응형으로 바꾸기

3.1의 바둑판을 화면 너비에 따라 1열, 2열, 3열로 바뀌게 고친다.

  1. 카드 묶음의 부모 클래스에서 grid-cols-3을 grid-cols-1 md:grid-cols-2 lg:grid-cols-3으로 바꾼다.
  2. Ctrl+S 키로 저장하고 F5 키로 새로고침한다.
  3. 브라우저 창이 넓으면 3열로 보인다. 클래스 세 개가 겹쳐 있어도 충돌하지 않는다. 기본은 1열이고, 768px 이상이 되는 순간 2열 규칙이 덮어쓰고, 1024px 이상이 되는 순간 3열 규칙이 다시 덮어쓴다.
<div class="m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

4.2 – 화면 크기별로 확인하기

실제로 열 수가 바뀌는지 눈으로 확인한다. 브라우저 개발자 도구(웹 페이지의 구조와 화면 크기를 검사하는 브라우저 내장 도구)의 기기 모드를 쓰면 창 크기를 숫자로 정확히 바꿀 수 있다.

  1. Chrome에서 F12 키를 눌러 개발자 도구를 연다.
  2. Ctrl+Shift+M 키를 눌러 기기 툴바(Device toolbar)를 켠다.
  3. 화면 위쪽의 [Dimensions] 옆 너비 입력란을 클릭하고 500을 입력한다. 카드가 1열로 쌓인다.
  4. 너비를 800으로 바꾼다. 카드가 2열이 된다. 800은 md 기준(768px) 이상이고 lg 기준(1024px) 미만이기 때문이다.
  5. 너비를 1100으로 바꾼다. 카드가 3열이 된다.
  6. 확인이 끝나면 Ctrl+Shift+M 키로 기기 툴바를 끄고, F12 키로 개발자 도구를 닫는다.

너비 하나 바꿀 때마다 열 수가 바뀌는 것이 반응형의 전부다. CSS 미디어 쿼리(화면 크기 조건에 따라 다른 CSS를 적용하는 문법)를 직접 적는 대신, 접두사가 그 일을 대신한다.

4.3 – 완성 페이지 조립과 직접 해보기

지금까지 만든 조각을 한 파일로 정리한다. 아래가 이 문서의 완성 코드다. 자기 파일과 비교해 다른 곳이 있으면 맞춘다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind 레이아웃 실습</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <nav class="flex items-center justify-between bg-gray-900 text-white p-4">
      <span class="text-xl font-bold">MySite</span>
      <div class="flex gap-6">
        <a href="#">홈</a>
        <a href="#">소개</a>
        <a href="#">연락처</a>
      </div>
    </nav>
    <h1 class="text-3xl font-bold text-blue-600">Tailwind 실습 시작</h1>
    <div class="m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 1</div>
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 2</div>
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 3</div>
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 4</div>
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 5</div>
      <div class="p-4 bg-blue-500 text-white rounded-lg">카드 6</div>
    </div>
  </body>
</html>

완성 코드를 확인했으면, 배운 것만으로 다음 과제를 직접 풀어 본다.

  1. 페이지 맨 아래에 footer 태그를 추가하고, “© 2026 MySite” 글자를 가로 가운데에 배치한다.
  2. 카드 격자에 1280px 이상에서 4열이 되는 규칙을 추가한다.

과제가 잘 됐는지 다음 다섯 가지로 확인한다. 3개 이상 맞으면 합격이다. 1. footer 안 글자가 화면 가로 가운데에 보인다. 2. footer에 flex와 justify-center를 함께 썼다. 3. 개발자 도구에서 너비 1300 입력 시 카드가 4열로 보인다. 4. 너비 1100에서는 여전히 3열이다. 5. 접두사 없는 grid-cols-4를 쓰지 않았다.

정답 예시는 다음과 같다. 카드 묶음의 닫는 </div> 아래에 footer를 추가하고, 부모 클래스에 xl:grid-cols-4를 덧붙인다.

<div class="m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<footer class="flex justify-center bg-gray-900 text-white p-4">
  <span>© 2026 MySite</span>
</footer>

justify-center는 2.2의 표에서 본 대로 항목을 가로 가운데로 모은다. xl:grid-cols-4는 1280px 이상에서만 4열 규칙을 덧입힌다.

이 문서의 클래스 이름·브레이크포인트 값·Play CDN 주소는 2026-07-27에 Tailwind CSS 공식 문서(https://tailwindcss.com/docs)로 확인한 값이다. Tailwind 버전이 올라가면 값이 바뀔 수 있으므로, 다르게 동작하면 공식 문서를 먼저 확인한다.

댓글 남기기