학부연구생으로 참여중인 과제가 개인으로 진행하기에 UI 컴포넌트에 대한 부담을 줄이고자 BootStrap을 적용하기로 결정했다. 본 포스팅에서는 BootStrap 그리드 시스템 배치 과정을 다루고자 한다.
BootStrap이란?
개발자는 CSS까지 작성할 여유가 없는 경우가 대부분이다. 특히 프론트엔드를 메인으로 다루지 않은 개발자라면 CSS에 꽤나 많은 어려움을 겪게 된다. BootStrap은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창등 UI 구성에 필요한 컴포넌트를 재사용 할 수 있도록 모아놓은 프레임워크이다.
본 포스팅은 부트스트랩 v4.3을 기준합니다. 버전 차이에 따라 클래스명이 다를 수 있으니 유의 바랍니다.
Grid System 이란?
레이아웃을 구성할 때, 12 열을 적절하게 조절하여 반응형 레이아웃을 구성 할 수 있도록 부트스트랩에서 제공하는 기능이다. 그리드 시스템을 이용해 모바일과 다양한 크기에 PC 모니터에서도 적용 가능한 웹을 만들 수 있다.
Concept
그리드 시스템은 row와 col의 개념으로 테이블을 구성하듯 컴포넌트를 위치 시킨다. 하나의 row는 12개의 col로 구성되어 있다. 간략하게 공식문서에 내용을 살펴보자
- 그리드 시스템에서는 Content는 반드시 columns 안에 위치해야한다.columns은 row의 자식 노드여야한다.
- Column class를 통해 12개의 열을 다를 수 있다. 만약 Row를 3개의 column으로 나누고 싶다면
col-4를 사용할 수 있다> 12 / 4 = 3 임으로, 하나의 컬럼은 전체 12 중 4의 크기를 가진다
기본 개념과 튜토리얼은 공식문서에 잘 정리되어 있으니 참고하면 되겠다.
컴포넌트 배치
<div class="row table_search mb-4 mt-4">
<div class="first col-md-3 offset-md-2 row justify-content-end">
<select name="field" class="col-md-6">
<option value="">바나나</option>
</select>
</div>
<form class="col-md-4 row search_form">
<input class="col-md-8" placeholder="Search" aria-label="Search">
<button class="btn-outline-success" type="submit">Search</button>
</form>
</div>
table_search의 첫번째 자식가 가진 클래스(first)에 대해 살펴보자
col-md-3 : 이 클래스를 가진 요소를 12열 중 3열을 차지하는 크기로 지정한다.
offset-md-2 : 좌측 마진으로 col-md-2 만큼 준다.
이를 그림으로 나타내면 아래와 같다.
row : 현재 요소를 row로 설정, 할당받은 3열의 크기를 12로 나누어 자식노드에게 크기를 재할당하기위해 선언되었다
justify-content-end : 아래의 col 요소들을 끝(좌측)부터 채운다.
이 요소 밑에 select 태그가 가지는 col-md-6은 부모요소의 크기를 12열로 나눈 열중 6열의 크기를 차지한다는 의미다.
이를 그림으로 나타내면 아래와 같다.
search_form를 포함한 전체 영역별 컴포넌트들은 아래와 같다
