Bootstrap 그리드 시스템 (Grid system : row, col)
성격 급한 사람을 위한 빠른 코드!
<!-- 이 row 안에 있는 모든 col 요소는 가로로 배치 -->
<div class="row">
<!--
col : row 안에서 가로로 배치할 요소임
sm : 작은 사이즈,
4 : 4/12 만큼 공간을 차지
- bootstrap에서는 총 12 등분을 기본으로 함
- 내부 요소에 패딩, 마진 등에 의해 12등분을 모두 못 쓸 수 있음.
-->
<div class="col-sm-4">작은 사이즈, 4/12 만큼 공간을 차지</div>
<div class="col-sm-8">작은 사이즈, 8/12 만큼 공간을 차지</div>
</div>HTML 화면을 배치하고 꾸미는 것이 참으로 난감하다.
특히 나처럼 미적 감각이 1도 없는 경우, 이러한 작업은 아주 어려웠다.
Bootstrap을 이용하면 화면 배치가 쉬워지고 준비된 컴포넌트를 사용하여 간단한 화면 구성을 할 수 있다.
오늘은 그중 그리드(Grid) 시스템을 보려고 한다.
화면 구성을 어찌해야 할지 몰랐었는데 Bootstrap을 이용하여 쉽게 사용할 수 있었다.
row, col 사용법을 간단하게 알아보자.
샘플 HTML
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<!-- [jQuery] -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- [Bootstrap] -->
<!-- [Bootstrap]합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- [Bootstrap]부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- [Bootstrap]합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="height: 50px;"></div>
<!-- 첫 번째 DIV -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" style="background-color: red; color: white; height: 50px;">
TEST Left
</div>
<div class="col-xs-4" style="background-color: blue; color: white; height: 50px;">
TEST Center
</div>
<div class="col-xs-4" style="background-color: yellow; color: black; height: 50px;">
TEST Right
</div>
</div>
</div>
<div style="height: 50px;"></div>
<!-- 두 번째 DIV -->
<div class="container" style="background-color: pink;">
<div class="row">
<div class="col-xs-3" style="border: 1px solid black; height: 50px;">
TEST Left
</div>
<div class="col-xs-6" style="border: 1px solid black; height: 50px;">
TEST Center
</div>
<div class="col-xs-3" style="border: 1px solid black; height: 50px;">
TEST Right
</div>
</div>
</div>
</body>
<script src="./test.js"></script>
</html>
결과
(사진을 누르면 확대가 가능하다.)
그냥 <div>를 사용하면 계속 세로로 쌓게 될 것이다.
가로로 쌓고 싶은 경우 <div>에 "row" 클래스를 선언한다.
해당 <div> 안에서 가로로 배치할 컨텐츠에 "col" 클래스를 선언한다.
가로 배치 후 해당 컨텐츠의 크기나 비율을 설정할 수 있다.
https://getbootstrap.com/docs/4.0/layout/grid/
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
class = "container-fluid" : 화면에 꽉 차게
class = "container" : css의 .container 에서 정해진 크기 사용 (핑크색 범위)
class = "row" : 해당 div 내 컨텐츠를 가로 배치.
class = "col-**-*" : 해당 컨텐츠는 가로 배치 중 차지할 비중
.col-xs-* : 무조건 가로 배치
.col-sm-* : 해당 컨텐츠가 768px 이하인 경우 세로로 배치, 그 외 가로 배치
.col-md-* : 해당 컨텐츠가 992px 이하인 경우 세로로 배치, 그 외 가로 배치
.col-lg-* : 해당 컨텐츠가 1200px 이하인 경우 세로로 배치, 그 외 가로 배치
Bootstrap 설치!
https://seokbong.tistory.com/16
Bootstrap 설치 및 사용하기
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다. 1. "최소화된" 이라 그런가 적용 안되는게 있다. h
seokbong.tistory.com