-
Bootstrap 그리드 시스템 (Grid system : row, col)DEV/javascript 2022. 2. 21. 11:54
성격 급한 사람을 위한 빠른 코드!
<!-- 이 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>결과
(사진을 누르면 확대가 가능하다.)
샘플 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
'DEV > javascript' 카테고리의 다른 글
Bootstrap 기본적인 버튼(Button) 사용법 (0) 2022.02.21 Bootstrap 기본적인 테이블(Table)사용하기 (0) 2022.02.21 Bootstrap 설치 및 사용하기 (0) 2022.02.21 Toast grid 함수 및 이벤트 예시 (0) 2022.02.17 Javascript Toast grid 예시 (1) 2022.02.16