📌 Bootstrap에서 container를 사용하는 상황
Bootstrap에서 .container는 반응형 레이아웃을 만들 때 필수적인 요소
이 클래스를 활용하면 콘텐츠가 적절한 너비를 유지하면서 중앙 정렬되며, 반응형 디자인이 가능해짐.
🏗️ container를 사용해야 하는 경우
✅ 1. 레이아웃을 중앙 정렬할 때
기본적으로 .container를 사용하면 양쪽 여백을 자동으로 조절하여 화면 크기에 맞게 중앙에 배치됩니다.
<div class="container">
<h1>이 페이지의 메인 콘텐츠</h1>
</div>- 부모 요소가
.container라면 내부 요소들이 중앙에 배치됨 - 너비가 화면 크기에 따라 자동으로 조절됨
✅ 2. 반응형 디자인을 적용할 때
container-fluid vs container
| 클래스 | 특징 |
|---|---|
.container | 최대 너비 제한이 있음 (해상도에 따라 최대 1320px) |
.container-fluid | 100% 너비를 차지하여 화면 크기에 따라 꽉 참 |
📍 차이점 예제
<div class="container bg-light">
<p>고정된 최대 너비를 가짐</p>
</div>
<div class="container-fluid bg-dark text-white">
<p>화면의 전체 너비를 차지함</p>
</div>.container는 화면이 커도 일정 크기를 유지.container-fluid는 화면 크기에 맞춰 항상 꽉 차게 조절됨
✅ 3. 그리드 시스템을 사용할 때
Bootstrap의 grid system을 사용하려면 .container 안에 .row와 .col을 배치해야 함.
<div class="container">
<div class="row">
<div class="col-md-6 bg-primary text-white">반쪽 영역</div>
<div class="col-md-6 bg-secondary text-white">반쪽 영역</div>
</div>
</div>.container가 없으면row와col이 제대로 정렬되지 않을 수 있음.container는grid system을 안정적으로 사용하도록 도와줌
✅ 4. 여러 섹션을 정렬할 때
페이지 내에서 여러 개의 섹션을 만들 경우, container를 사용하면 정렬이 쉬워짐.
<header class="container">
<h1>사이트 제목</h1>
</header>
<main class="container">
<p>메인 콘텐츠 영역</p>
</main>
<footer class="container">
<p>푸터 영역</p>
</footer>- 각 섹션이 중앙 정렬되면서 깔끔한 레이아웃을 유지
🎯 언제 container를 사용해야 할까?
✅ container를 사용하는 경우
- 페이지 중앙 정렬이 필요할 때
- Bootstrap
grid system을 사용할 때 (row와col이 있을 때) - 화면 크기에 맞춰 자동으로 너비를 조정하고 싶을 때
❌ container를 사용하지 않는 경우
- 전체 너비(
100vw등)를 사용해야 하는 경우 →container-fluid사용 position: absolute또는fixed가 필요한 경우 (레이아웃과 무관하게 위치해야 함)- 내부 요소들이
flexbox또는grid로 따로 정렬될 때 (꼭 필요하지 않을 수도 있음)
✨ 정리
1️⃣ .container는 기본적으로 가운데 정렬되고 반응형 디자인을 지원한다.
2️⃣ container-fluid는 100% 너비를 차지하여 꽉 찬 디자인이 필요할 때 사용한다.
3️⃣ grid system을 사용할 때는 .container 안에 .row와 .col을 포함해야 한다.
📌 즉, Bootstrap을 사용할 때 레이아웃의 중심이 필요하면 container를 넣으면 된다! 🚀
