부트스트랩 그리드 시스템 (Bootstrap Grid System)
그리드 시스템 개요 (Overview of Grid System)
부트스트랩 그리드 시스템은 반응형 레이아웃을 쉽게 구현할 수 있도록 도와주는 강력한 도구입니다. 12개의 열(Column)로 구성된 유연한 시스템으로, 다양한 화면 크기에 맞춰 자동으로 조정됩니다. 그리드 시스템은 주로 컨테이너(Container), 행(Row), 열(Column)로 구성되며, 다양한 클래스와 옵션을 통해 레이아웃을 손쉽게 조정할 수 있습니다.
컨테이너(Container)
컨테이너는 그리드 시스템의 기본 구성 요소로, 웹 페이지의 콘텐츠를 중앙에 배치하고 여백을 제공하는 역할을 합니다. 부트스트랩에서는 두 가지 유형의 컨테이너를 제공합니다:
- 기본 컨테이너(Container): 고정된 너비를 가지며, 화면 크기에 따라 크기가 변경됩니다.
- 반응형 컨테이너(Container-Fluid): 전체 너비를 차지하며, 화면 크기에 관계없이 항상 100% 너비를 유지합니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 컨테이너 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
기본 컨테이너 예제
</div>
<div class="container-fluid">
반응형 컨테이너 예제
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
행(Row)과 열(Column)
행(Row)과 열(Column)은 그리드 시스템의 핵심 구성 요소입니다. 행(Row)은 열(Column)을 포함하며, 열(Column)은 그리드의 콘텐츠를 배치하는 영역입니다. 부트스트랩에서는 12개의 열로 구성된 그리드 시스템을 제공하며, col-* 클래스를 사용하여 열의 크기를 지정할 수 있습니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 행과 열 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">열 1</div>
<div class="col-4">열 2</div>
<div class="col-4">열 3</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
그리드 옵션 (Grid Options)
부트스트랩은 다양한 그리드 옵션을 제공하여 열의 크기, 간격 등을 조정할 수 있습니다. 주요 옵션으로는 다음이 있습니다:
.col-*: 기본 열 크기를 지정합니다..col-sm-*: 작은 화면 이상에서 열 크기를 지정합니다..col-md-*: 중간 화면 이상에서 열 크기를 지정합니다..col-lg-*: 큰 화면 이상에서 열 크기를 지정합니다..col-xl-*: 매우 큰 화면 이상에서 열 크기를 지정합니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 그리드 옵션 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">열 1</div>
<div class="col-12 col-sm-6 col-md-4">열 2</div>
<div class="col-12 col-sm-6 col-md-4">열 3</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
중첩 그리드 (Nested Grids)
부트스트랩에서는 그리드 시스템 내에 또 다른 그리드를 중첩시킬 수 있습니다. 중첩 그리드를 사용하면 더욱 복잡한 레이아웃을 쉽게 구성할 수 있습니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 중첩 그리드 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
중첩 그리드 열 1
<div class="row">
<div class="col-6">중첩 열 1-1</div>
<div class="col-6">중첩 열 1-2</div>
</div>
</div>
<div class="col-6">
중첩 그리드 열 2
<div class="row">
<div class="col-6">중첩 열 2-1</div>
<div class="col-6">중첩 열 2-2</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
반응형 그리드 (Responsive Grids)
부트스트랩의 그리드 시스템은 반응형 디자인을 지원하여 다양한 화면 크기에 적응합니다. 각 열은 미디어 쿼리를 사용하여 화면 크기에 맞게 조정됩니다. 주요 반응형 그리드 클래스는 다음과 같습니다:
.col-*: 기본 열 크기..col-sm-*: 작은 화면 (576px 이상)에서의 열 크기..col-md-*: 중간 화면 (768px 이상)에서의 열 크기..col-lg-*: 큰 화면 (992px 이상)에서의 열 크기..col-xl-*: 매우 큰 화면 (1200px 이상)에서의 열 크기.
반응형 그리드 예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 반응형 그리드 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">반응형 열 1</div>
<div class="col-12 col-sm-6 col-md-4">반응형 열 2</div>
<div class="col-12 col-sm-6 col-md-4">반응형 열 3</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
이와 같이 부트스트랩의 그리드 시스템을 사용하면 다양한 화면 크기에 적응하는 반응형 레이아웃을 쉽게 만들 수 있습니다.