728x90
반응형
📌 Bootstrap Grid System 개념 요약
- Bootstrap은 12칸 기반의 그리드 시스템을 사용함
- 핵심 구조는 container → row → column
- container: 내부 콘텐츠 여백 및 정렬, 반응형 너비 제공
- row: 열(column)들을 정렬할 수 있는 행 역할
- column: 콘텐츠를 담는 실제 영역 (최대 12칸)
📌 실전 예시
- row 안에 col 2개 추가 시 → 자동으로 각각 6칸씩 할당
- 수동 제어 방법:
- col-4, col-8 같은 클래스명을 이용해 칸 수 지정 가능
- 반응형 처리:
- 모바일: col-12 → 수직 쌓기
- 데스크탑: col-lg-6 → 수평 정렬
📌 디바이스에 따른 시뮬레이션
- F12 → 상단의 디바이스 모드 아이콘 클릭
- 휴대폰 화면 선택 시 → 콘텐츠가 자동으로 수직 정렬됨
- 이는 Bootstrap의 반응형 CSS 규칙 덕분
- 각 기기에 맞춰 별도 레이아웃 개발이 필요 없음
📌 장점 요약
- 빠르고 일관된 반응형 레이아웃 구현 가능
- 코드 효율성 증가
- 모바일 대응 자동 처리
- 대부분의 웹사이트에 적합한 구조 제공
✅ 코드 예시 (HTML + Bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Grid Example</title>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container mt-5">
<div class="row">
<!-- 메뉴 영역: 모바일에서는 전체폭, 데스크탑에서는 8칸 -->
<div class="col-12 col-lg-8 bg-light p-4">
<h2>🍔 메뉴</h2>
<ul>
<li>치즈버거</li>
<li>불고기버거</li>
<li>새우버거</li>
</ul>
</div>
<!-- 가격 영역: 모바일에서는 전체폭, 데스크탑에서는 4칸 -->
<div class="col-12 col-lg-4 bg-secondary text-white p-4">
<h2>💰 가격</h2>
<ul>
<li>치즈버거 - 6,000원</li>
<li>불고기버거 - 7,000원</li>
<li>새우버거 - 6,500원</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap JS (선택적) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
✅ 실습 포인트 요약
| 클래스명 | 설명 |
| container | 반응형 기준이 되는 루트 요소 |
| row | 열들을 감싸는 행 |
| col-12 | 모바일(기본)에서는 전체 너비 사용 |
| col-lg-8, col-lg-4 | 데스크탑 이상에서 너비를 8:4로 설정 |
| bg-light, bg-secondary | 배경색 (Bootstrap 유틸리티 클래스) |
| p-4 | 안쪽 여백 (padding) |
✅ 실습 방법
- 위 HTML 코드를 복사하여 index.html로 저장
- 크롬 브라우저에서 열기
- F12 → 좌측 상단 디바이스 아이콘 클릭
- 모바일 / 태블릿 / 데스크탑 크기를 바꿔가며 확인
728x90
반응형