container 클래스를 사용하여 다양한 브레이크포인트에 맞춘 반응형 레이아웃을 구현하는 방법을 학습합니다.container 클래스는 웹 레이아웃에서 콘텐츠 영역을 깔끔하게 정리하고 중앙에 배치하는 데 주로 사용됩니다. 웹 페이지의 본문 콘텐츠나 주요 섹션을 지정된 너비 안에 고정하여 사용자에게 더 직관적인 레이아웃을 제공합니다.
컨테이너는 웹 페이지에서 콘텐츠가 화면 크기에 맞춰 잘 정리되도록 도와줍니다. 만약 화면이 너무 크거나 너무 작을 때, 콘텐츠가 지나치게 퍼지거나 너무 좁아지는 것을 방지해 줍니다. 쉽게 말해, 콘텐츠의 가로 길이를 적당하게 제한하여 어떤 화면 크기에서도 보기 좋은 레이아웃을 유지하는 역할을 합니다.
예를 들어, 큰 모니터에서 콘텐츠가 너무 넓게 퍼지지 않게 해주고, 작은 화면에서는 콘텐츠가 잘리지 않고 적절하게 표시되도록 도와줍니다.
<div class="container mx-auto">
<h1 class="text-3xl font-bold">웹 페이지 타이틀</h1>
<p>이 영역은 컨테이너 안에서 중앙에 배치되며, 화면 크기에 맞춰 최대 너비가 조절됩니다.</p>
</div>
| Breakpoint | 적용 화면 크기 | Max Width (최대 너비) |
|---|---|---|
| 기본값 | 모든 화면 크기 | 100% (화면 너비에 맞춤) |
sm |
640px 이상 (작은 화면) | 640px |
md |
768px 이상 (중간 크기 화면) | 768px |
lg |
1024px 이상 (큰 화면) | 1024px |
xl |
1280px 이상 (매우 큰 화면) | 1280px |
2xl |
1536px 이상 (초대형 화면) | 1536px |
컨테이너는 웹 콘텐츠 영역을 깔끔하게 정리하고, 중앙에 배치하는 데 매우 유용하며, 반응형 웹 디자인을 구현할 때 유동적으로 화면 크기에 맞는 최적의 레이아웃을 구성할 수 있습니다.
컨테이너를 사용해 웹페이지의 최대 너비를 설정할 수 있습니다. 기본적으로는 화면 크기에 따라 다른 최대 너비를 적용할 수 있지만, 가로로 가운데 정렬하거나 패딩을 추가하려면 유틸리티 클래스가 필요합니다.
<div class="container mx-auto">
<!-- 콘텐츠 -->
</div>
여기서 mx-auto 유틸리티는 컨테이너를 가로로 가운데 정렬하는 역할을 합니다.