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>

002.html

이번에는 한 개의 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>

003.html

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

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

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