1. 부트스트랩 개요~그리드

부트스트랩 개요~그리드 클래스

<div class="container">

container

영역 각각 구분할 때. 각 부분 별로 구분 시 사용 -> 브라우저 크기 따라 여백

ex) 일반적인 본문

 

<div class="container-fluid">

container-fluid

브라우저 왼쪽에 고정 됨

ex) 상단 메뉴

 

<div class="col-sm-2"> <!-- 576px -->
<div class="col-md-3"> <!-- 768px -->
<div class="col-lg-4"> <!-- 992px -->
<div class="col-xl-5"> <!-- 1200px -->

row 방향으로 최대 12개의 열을 넣을 수 있음. -> 총 12칸. 12칸 중 몇 개 가져갈 지?

1. col-숫자 : row 방향으로 배치. 반응형은 X  (bs4만)

2. col-scale-숫자 : 12칸 중 몇 칸 차지할 것인지? 일정 scale 이하면 세로로 배치됨