Tailwind CSS에서의 레이아웃 시스템 이해
컨테이너 (Container)
컨테이너는 웹 레이아웃에서 콘텐츠를 중앙에 배치하고, 반응형으로 동작하여 다양한 화면 크기에서 일관된 레이아웃을 제공합니다.
컨테이너 속성
| Breakpoint | 적용 화면 크기 | Max Width (최대 너비) |
|---|---|---|
| 기본값 | 모든 화면 크기 | 100% |
sm | 640px 이상 | 640px |
md | 768px 이상 | 768px |
lg | 1024px 이상 | 1024px |
xl | 1280px 이상 | 1280px |
2xl | 1536px 이상 | 1536px |
컨테이너 기본 사용법
<div class="container mx-auto px-4">
<!-- 콘텐츠 -->
</div>container: 반응형 레이아웃 설정.mx-auto: 가로 중앙 정렬.px-4: 좌우 패딩 추가.
실습 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Container Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto px-4">
<div class="bg-white p-6 rounded-lg shadow-md">
<h1 class="text-3xl font-bold mb-4">컨테이너 예시</h1>
<p>이 예시는 Tailwind CSS의 컨테이너 클래스를 사용해 화면 크기에 맞는 레이아웃을 구현한 것입니다.</p>
</div>
</div>
</body>
</html>설명
container: 반응형 레이아웃을 위한 기본적인 컨테이너를 정의합니다. 화면 크기에 따라 너비가 조정됩니다.mx-auto: 컨테이너를 가로로 중앙에 정렬합니다.px-4: 컨테이너의 좌우에 1rem(16px)의 패딩을 추가하여 콘텐츠가 화면 가장자리에 너무 가까이 붙지 않도록 합니다.- 추가 설명: 필요에 따라
mx-auto와px-4의 값을 조정하여 패딩 크기나 정렬 방식을 변경할 수 있습니다.
Flexbox
Flexbox는 수평 및 수직 정렬을 위한 CSS 레이아웃 모델로, 단일 행 또는 열에서 아이템을 정렬하는 데 유용합니다.
주요 Flexbox 유틸리티 클래스
flex: Flexbox 컨테이너 활성화.justify-start,justify-center,justify-end,justify-between,justify-around: 아이템을 수평으로 정렬.items-start,items-center,items-end,items-stretch: 아이템을 수직으로 정렬.gap-x-N,gap-y-N: Flexbox 아이템 간의 간격 조절.
실습 예제
<header class="bg-gray-100 p-6 rounded-lg mb-6">
<nav class="flex justify-between items-center">
<!-- 좌측: 로고 -->
<div class="text-2xl font-bold">MyWebsite</div>
<!-- 중앙: 네비게이션 링크 -->
<ul class="flex gap-4">
<li>
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-gray-900">Services</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</li>
</ul>
<!-- 우측: 로그인 버튼 -->
<div>
<button
class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
type="button"
>
Login
</button>
</div>
</nav>
</header>설명
flex:nav요소를 Flexbox 컨테이너로 설정하여 내부 요소들을 유연하게 배치할 수 있게 합니다.justify-between: 좌측, 중앙, 우측 요소들을 수평으로 공간을 균등하게 배치합니다.items-center: Flex 아이템들을 수직으로 중앙에 정렬합니다.flex(내부ul): 네비게이션 링크들을 가로로 나열합니다.gap-4: 네비게이션 링크들 간에 1rem(16px)의 간격을 추가합니다.- 추가 설명: 필요에 따라
justify-*와items-*클래스의 값을 변경하여 아이템들의 정렬 방식을 조정할 수 있습니다.
Grid
Grid는 복잡한 2차원 레이아웃을 구성하는 데 적합한 CSS 레이아웃 모델입니다.
주요 Grid 유틸리티 클래스
grid: Grid 컨테이너 활성화.grid-cols-N: Grid 컨테이너에 N개의 열을 지정.gap-x-N,gap-y-N: Grid 아이템 간의 수평 및 수직 간격 설정.
실습 예제
<div class="grid grid-cols-3 gap-4">
<img src="https://via.placeholder.com/400x400.png?text=City" alt="City Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Landscape" alt="Landscape Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Mountain" alt="Mountain Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=River" alt="River Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Forest" alt="Forest Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Ocean" alt="Ocean Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Desert" alt="Desert Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Waterfall" alt="Waterfall Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Beach" alt="Beach Image" class="w-full h-full rounded-lg shadow-md" />
</div>설명
grid:div요소를 Grid 컨테이너로 설정합니다.grid-cols-3: Grid 컨테이너에 3개의 열을 생성하여 아이템들을 3열로 배치합니다.gap-4: Grid 아이템들 간에 1rem(16px)의 간격을 추가합니다.- 추가 설명: 열의 개수를 변경하고 싶다면
grid-cols-3을grid-cols-4등으로 수정할 수 있으며,gap-4의 값을 조정하여 간격 크기를 변경할 수 있습니다.
포지션 (Position)
요소의 위치를 정의하는 데 사용됩니다.
| Class | Properties |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
Position: Fixed
fixed는 요소를 뷰포트에 고정하여, 스크롤 시에도 해당 요소가 고정된 위치에 머무르도록 합니다.
실습 예제
<header class="fixed left-0 right-0 bg-gray-800 text-white p-4 z-50">
<nav class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold">MyShop</div>
<ul class="flex space-x-4">
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Products</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</nav>
</header>
<main class="container max-w-2xl mx-auto px-4 pb-8 pt-24">
<div class="grid grid-cols-2 gap-4">
<img src="https://via.placeholder.com/400x400.png?text=City" alt="City Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Landscape" alt="Landscape Image" class="w-full h-full rounded-lg shadow-md" />
<!-- 추가 이미지들 -->
</div>
</main>설명
fixed left-0 right-0: 헤더를 뷰포트의 상단에 고정시키며, 좌우로 0px 위치시켜 화면 전체 너비를 차지하게 합니다.z-50: 헤더의 z-index를 50으로 설정하여 다른 요소들보다 위에 표시되도록 합니다.pt-24(main요소): 상단에 6rem(96px)의 패딩을 추가하여 고정된 헤더 아래에 충분한 공간을 확보합니다.- 추가 설명: 필요에 따라
top-0을 추가하여 헤더가 정확히 상단에 위치하도록 조정할 수 있습니다.
Position: Sticky
sticky는 스크롤할 때 요소가 지정된 위치에 도달하면 고정되며, 그 이후에는 부모 요소의 끝에 도달할 때까지 고정된 상태를 유지합니다.
실습 예제
<header class="fixed left-0 right-0 bg-gray-800 text-white p-4 z-50">
<nav class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold">MyShop</div>
<ul class="flex space-x-4">
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Products</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</nav>
</header>
<main class="container max-w-5xl mx-auto px-4 pb-8 pt-24 flex gap-x-4">
<section class="w-3/5">
<div class="grid grid-cols-2 gap-4">
<img src="https://via.placeholder.com/400x400.png?text=City" alt="City Image" class="w-full h-full rounded-lg shadow-md" />
<img src="https://via.placeholder.com/400x400.png?text=Landscape" alt="Landscape Image" class="w-full h-full rounded-lg shadow-md" />
<!-- 추가 이미지들 -->
</div>
</section>
<aside class="w-2/5">
<div class="sticky top-16 p-6 border-2 border-gray-800 rounded-lg">
<h2 class="text-xl font-bold mb-4">장바구니</h2>
<div class="space-y-2">
<div class="flex justify-between"><span>상품 1</span><span>₩ 10,000</span></div>
<div class="flex justify-between"><span>상품 2</span><span>₩ 20,000</span></div>
<div class="flex justify-between font-bold border-t pt-2"><span>총합계</span><span>₩ 30,000</span></div>
</div>
<button class="mt-4 w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">결제하기</button>
</div>
</aside>
</main>설명
sticky top-16:aside요소를 스크롤할 때 뷰포트의 상단에서 4rem(64px) 위치에 고정시킵니다.flex justify-between: 장바구니 항목들을 Flexbox를 사용하여 좌우로 배치합니다.gap-x-4(main요소의flex): 섹션과 아사이드를 가로로 1rem(16px)의 간격으로 배치합니다.- 추가 설명:
sticky요소는 부모 컨테이너 내에서만 작동하므로, 부모 요소에 충분한 높이가 설정되어 있어야 합니다. 필요에 따라top값을 조정하여 고정 위치를 변경할 수 있습니다.
결론
- 컨테이너: 콘텐츠를 중앙 정렬하고 반응형 레이아웃 구현에 필수.
- Flexbox: 간단한 1차원 정렬에 적합.
- Grid: 복잡한 2차원 레이아웃 설계에 최적.
- 포지션: 요소를 고정하거나 특정 위치에 배치하는 데 사용.
Tip: 실습 코드를 참고하여 직접 수정해 보세요!
배운 내용 요약
- Tailwind CSS의 기본 컨테이너 설정과 활용 방법.
- Flexbox와 Grid를 사용한 다양한 레이아웃 구성.
fixed와sticky포지션을 활용한 고정 및 반응형 요소 배치.- Tailwind 유틸리티 클래스를 통해 효율적인 스타일링과 레이아웃 관리 방법.
개발자가 되고 싶은 정치학도생의 기술 블로그