bootstrap 5 grid 시스템 - bootstrap 5 기초 1
bootstrap 5의 그리드 시스템에
대해서 알아보겠습니다.
bootstrap 5 설치하기
bootstrap 5를 설치하는 것이 어렵지는
않지만 간단히 설명하면 직접 다운로드
받아서 사용하는 것과 온라인에서 CDN을
사용하는 방법이 있습니다.
어느쪽이건 프로젝트 성격에 따라
취사 선택하면 되겠으나 중소규모라면
CDN 방식이 트래픽을 아낄 수 있고
또 우리의 웹사이트가 아니라 CDN을 쓰는
다른 웹사이트를 방문해도 브라우저에 캐시가
남아서 빠른 로드가 가능하기 때문에
점차적으로 CDN 활용도가 높아지고 있습니다.
bootstrap은 5버전이 나온 이후 jquery를 버려서
점차 점유율을 높여가고 있는데요.
그런 면에서 CDN 쪽이 괜찮을 수 있습니다.
다만 SASS로 커스텀 bootstrap을 사용할거면
다운로드 방식으로 가야할 겁니다.
한글 사이트는 웹폰트를 다운로드 받아야
그럴 듯한 페이지가 나오기 때문에
영어 싸이트에 비해 용량이 많이 필요합니다.
부트스트랩도 아무리 못나가도 몇백 키로 바이트는
되니까 사이트 로드의 경량화 부분에서
좀 고민을 할 필요가 있습니다.
아래 Bootstrap 5.0 사이트에 CSS와 JS의
CDN을 가져와서 html 페이지에 넣습니다.
Introduction · Bootstrap v5.0 (getbootstrap.com)
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
CSS는 head에 들어가고 JS는 </body>앞에
들어가도록 권장됩니다.
자바스크립트 번들의 경우 모든 라이브러리와
의존성을 다 포함한 거고 분리하려면
popper와 bootstrap을 별도로 포함시킵니다.
script 태그를 두개로 나눈다.
Bootstrap 공식 사이트에 자세히 나와있습니다.
다운로드 방식
다운로드 방식은 Compiled CSS and JS에서
Bootstrap v5.0.2 를 다운 받은 후에
압축을 풀어보면 파일 구조가 나옵니다.
css 와 js 폴더 두개가 있습니다.
html 파일이 있는 곳에 복사해서 넣고
다음과 같이 Bootstrap 파일을 연결하면 됩니다.
- CSS 파일
<link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.min.css">
- JS 파일
<script src="./bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js">
Grid 시스템 기초
부트스트랩은 자체의 Grid 시스템으로
이루어져 있습니다. CSS에도 Grid Layout이
있는데 그냥은 사용할 수 없고
제대로된 결과물을 얻기 위해서는
설계부터 구현까지 꽤 공을 들여야 합니다.
부트스트랩의 그리드 시스템은
CSS에 능숙하지 않더라도
직관적으로 이해하기 쉽고
사용하기 쉽게 만들어 놨습니다.
여러 기기에 바로 적용할 수 있는
반응형 웹페이지를 만들 수 있습니다.
특히 이 직관적이라는 부분이 좋습니다.
부트 스트랩 예제
예제를 통하여 알아보겠습니다.
그리드 시스템은
container (컨테이너)
row (행)
col (열)
이 세가지 배치가 기본이됩니다.
컨텐츠(텍스트, 이미지 등)는 최종적으로
col에 들어가게 구현하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontend Bootcamp</title>
<link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.min.css">
</head>
<body>
<style>
.my-con{
border: 1px solid black;
}
.my-row{
border: 1px solid red;
}
.my-col{
border: 1px dotted blue;
}
</style>
<div class="container my-con">
<div class="row my-row">
<div class="col my-col">row 1 col 1</div>
</div>
<div class="row my-row">
<div class="col my-col">row 2 col 1</div>
<div class="col my-col">row 2 col 2</div>
</div>
<div class="row my-row">
<div class="col my-col">row 3 col 1</div>
<div class="col my-col">row 3 col 2</div>
<div class="col my-col">row 3 col 3</div>
</div>
<div class="row my-row">
<div class="col my-col">row 4 col 1</div>
<div class="col my-col">row 4 col 2</div>
<div class="col my-col">row 4 col 3</div>
<div class="col my-col">row 4 col 4</div>
</div>
<div class="row my-row">
<div class="col my-col">row 5 col 1</div>
<div class="col my-col">row 5 col 2</div>
<div class="col my-col">row 5 col 3</div>
<div class="col my-col">row 5 col 4</div>
<div class="col my-col">row 5 col 5</div>
</div>
</div>
<script src="./bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body></html>
정렬이 잘 되어 나오고 브라우저의 크기를
조정하면 비율에 따라 반응형으로
움직이는 것을 볼 수 있습니다.
이것을 CSS로 구현하려면 상당히 많은
코드를 작성하고 또 기기마다 잘 맞는지
확인을 해야하지만 부트스트랩은 이미
검증이 되어있어서 문제가 없습니다.
부족한 부분은 <style>에 커스텀 클래스를
사용해서 Override (덮어쓰기)하면 됩니다.
여기서 부터 개별적인 속성을
클래스로 추가하여 각각의 블록을
쉽게 조작할 수 있습니다.
See the Pen bootstrap grid system by jayonk (@jayonk) on CodePen.
코드펜의 예제에서는 CDN을 사용해서
프레임워크를 불러옵니다. CDN에 있는
integrity는 혹시 모를 해킹 공격을
막기 위한 장치입니다. Bootstrap 웹에서
넣으라고 하는 그대로 넣고 쓰면 됩니다.
col 분할
웹디자인에 중요한 것은 주어진 공간을
잘 분할하는 것 입니다. 웹이라는 공간은
브라우저의 안쪽에 내용물이 표시하는데
2차원 평면입니다. 이 공간을 잘 나눌 수록
가독성이 높아지고 페이지의 효율이 납니다.
예를 들어 상품을 판매하는 페이지라면
페이지를 열었을 때 바로 한눈에 상품이
눈에 들어오도록 해야합니다. 당연한
내용이지만 이 당연한 것을 만들기 위한
도구는 과거 HTML과 CSS에서 제대로
갖춰지지 않았습니다. 레이아웃에 대해
불과 몇년전까지도 테이블 태그와
float 속성을 메인으로 사용했습니다.
웹디자이너들이 이런 고민을 수십년간
안고 왔기 때문에 부트스트랩은 점차
웹에서 꼭 필요한 프레임워크로
떠오를 수 있었습니다.
HTML 특성상 위아래로 늘어나는 것보다
좌우 관리가 어렵습니다. 이것을
Bootstrap에서는 하나의 row(행)을
1부터 12칸으로 나눴습니다. 12등분입니다.
col-3은 row의 전체 12칸에서 3칸을
사용합니다. 그럼 나머지를 채우는데는
col-9가 필요합니다. row 하나에 col이
세개라면 col-5, col-2, col-5 가 들어갑니다.
이렇게만 해주면 알아서 반응형으로
길이가 맞춰집니다. CSS를 붙잡고
왔다갔다 하지 않아도 이것으로
끝나기 때문에 상당히 충격적입니다.
(CSS에 비해서 손이 덜간다는 말입니다)
<div class="container my-con">
<div class="row my-row">
<div class="col-3 my-col">col-3</div>
<div class="col-9 my-col">col-9</div>
</div>
<div class="row my-row">
<div class="col-10 my-col">col-10</div>
<div class="col-2 my-col">col-2</div>
</div>
<div class="row my-row">
<div class="col-5 my-col">col-5</div>
<div class="col-2 my-col">col-2</div>
<div class="col-5 my-col">col-5</div>
</div>
</div>
반응형 breakpoint sm md lg
breakpoint는 반응형 레이아웃의 핵심으로
너비가 일정한 지점(breakpoint - 깨는 포인트)에
도달하면 col을 아래로 내려서 그 col에 대한
너비를 더 확보하게 됩니다. 브라우저에서
글을 읽을 때는 너비가 중요한데 사람들은
가로로 글을 읽기 때문입니다. 또 html 문서는
기본적으로 내용이 길어지면 스크롤이
생겨서 아래로는 계속 내릴 수 있어서
상대적으로 너비의 관리가 중요해집니다.
아래는 breakpoint의 사용방법니다.
sm은 small, md는 middle, lg는 large의
약자로 어디서 변할 것인가를 기본값으로
정해놓았습니다. Bootstrap은 트위터 규격에서
출발했으므로 모바일의 레이아웃을 우선시 합니다.
<div class="container my-con">
<div class="row my-row">
<div class="col-sm-3 my-col">col-3</div>
<div class="col-sm-9 my-col">col-9</div>
</div>
<div class="row my-row">
<div class="col-md-3 my-col">col-3</div>
<div class="col-md-9 my-col">col-9</div>
</div>
<div class="row my-row">
<div class="col-lg-3 my-col">col-3</div>
<div class="col-lg-4 my-col">col-4</div>
<div class="col-lg-5 my-col">col-5</div>
</div>
</div>
너비를 줄이는 과정은 아래와 같습니다.
1. lg 보다 큰 너비에 있을 때
2. lg와 md 사이에 하나 내립니다.
3. md와 sm 사이에 내리고
4. 최종적으로 sm 이하에서 다 내립니다.
정확한 픽셀은 bootstrap 문서에 나와있습니다.
X-Small 부터 Extra extra large 까지 있습니다.
small이 576px, large가 992px 입니다.
Breakpoints · Bootstrap v5.0 (getbootstrap.com)
소스코드의 Sass 파일을 수정하여
전처리하면 이 값들도 바꿀 수 있습니다.
*한가지를 더 보면 아래와 같이 두가지
방식을 추가할 수 있습니다.
<div class="row my-row">
<div class="col-md-4 col-sm-6 my-col">col-4</div>
<div class="col-md-8 col-sm-6 my-col">col-8</div>
</div>
이렇게 하면 md까지 4칸, 8칸하고
md - sm 구간에서 6칸 6칸 이며
sm 이하가 되서야 아래로 내립니다.
이 정도가 기본 개념이고 Bootstrap은
더 많은 것들을 할 수 있습니다.
예를 들어 아래와 같은 레이아웃도
쉽게 만들 수 있습니다. 각종 정렬기능을
사용해서 12칸의 col을 다양하게 활용합니다.
<div class="row justify-content-evenly align-items-center my-row">
<div class="col-sm-5 my-col bg-dark text-light">col-5</div>
<div class="col-sm-5 my-col bg-dark text-light">col-5</div>
</div>
css를 몰라도 되긴 하지만
Bootstrap을 최대한 활용하기 위해서
어느정도의 지식이 있는 것이 유리합니다.
레이아웃은 이론적인 설명보다는
container를 가지고 논다는 생각으로
(play around) 실습을 통해 숙련도를
높일 수 있습니다. 또 공식 document를
활용하면 어렵지 않게 적응할 수 있을 겁니다.
프론트엔드에 약한 백엔드 프로그래머에게도
좋고 또 다양한 프로젝트를 진행하는
프론트엔드 디자이너에게도 도움이 됩니다.
