3. 그리드 시스템

처음에는 그리드 시스템에 대해 알아볼 것입니다. 아래 공식 홈페이지 글에도 나와 있는 것처럼 부트스트랩은 전체 화면을 12개의 컬럼으로 나눠놓았습니다. 그 나눠놓은 컬럼에 무엇을 배치할 것인지 우리가 정해서 홈페이지를 만들 수 있습니다. 컬럼 12개가 모여 하나의 row가 됩니다.

앞서 말씀드린 것처럼 실습 캡쳐는 <body>와 </body> 안에 있는 태그들 중 <script>…</script> 를 생략하고 작성하도록 하겠습니다. Code와 같이 작성한다음 002.html로 저장을 하고 실행하면 아래와 같이 나옵니다.

빨간색 네모는 이해를 돕기 위해 작성한 것입니다. 1개의 row에 4 컬럼씩 할당했으므로 균등한 넓이로 출력됩니다.


<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
	</div>
</div>

이번에는 한 개의 row를 더 주어 봤습니다. 빨간색 네모는 이해를 돕기 위한 것입니다. 위에는 4컬럼씩 주었기 때문에 3등분이 되었고 아래는 6컬럼씩 주었기 때문에 2등분이 되었습니다.


<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
		<div class="col-md-4">
			<h1>hello</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<h1>hello</h1>
		</div>
		<div class="col-md-6">
			<h1>hello</h1>
		</div>
	</div>
</div>

아래 공식 홈페이지에서 보듯이 하나의 컬럼 단위를 다시 분할하는 것도 가능합니다. 실습은 해보지 않도록 하겠습니다.

그리드 시스템에서 12컬럼을 모두 이용할 때 넓이를 100% 사용하고 싶다면 .container-fluid를 사용합니다.

컬럼 사이에 여백은 .row에 .no-gutters를 적용하면 padding과 margin을 제거할 수 있습니다.

공식 홈페이지에 나와있는 그리드 시스템 기준입니다. Nestable은 컬럼을 또다른 컬럼으로 나눌 수 있다는 얘기입니다.

우리는 주로 md를 사용합니다.


<!doctype html>
<html lang="ko">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
    <style>
        .border{
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <h1>grid system</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 border">hello</div>
            <div class="col-md-3 col-sm-6 border">hello</div>
            <div class="col-md-3 col-sm-12 border">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 border">hello</div>
            <div class="col-md-4 border">hello</div>
            <div class="col-md-4 border">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 border">hello</div>
            <div class="col-md-4 border">hello</div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>