bootstrap 사용해보기

부트스트랩이란?

부트스트랩은 css나 javascript로 작성된 디자인, 기능을 모아 둔 프론트엔드 프레임워크이다.

 

웹페이지를 디자인하려면 색깔, 요소 배치, 사각형의 곡률, 드롭다운 메뉴 등 신경써야 할 것이 많은데

부트스트랩을 사용하면 이러한 작업을 쉽게 할 수 있다.

 

부트스트랩을 사용하려면 부트스트랩 코드가 작성된 파일을 직접 다운받거나 cdm, npm방식 등으로 추가해서 사용하면 된다.

 

내 경우 파일을 직접 다운받아 사용하였으며, 사용한 파일은 각각 bootstrap.min.js와 bootstrap.min.css이다.

 

부트스트랩을 잠깐 사용해보면서,

 

부트스트랩 사용법은 공식 홈페이지에 아주 잘 정리되어 있어서 따로 정리할 필요가 없다고 느꼈지만

 

부트스트랩이 사용하고 있는 그리드 시스템은 알아두면 좋을 것 같았다.

 

그리드 시스템(grid system)?

부트스트랩은 그리드 시스템을 사용하고 있다.

 

그리드 시스템이라는 이름을 처음 봤을 때 css의 grid가 생각났는데, 알고보니 둘은 다른 개념이었다.

 

그리드 시스템은 웹페이지가 탄생하기 이전부터 존재하던 개념으로, 특정한 영역을 디자인하기 쉽게 grid로 나누던 것을 가리킨다고 한다.

 

이 개념이 웹페이지 디자인에도 적용되었다.

 

 

페이지를 여러 개의 균일한 영역으로 나누고 그 위에 디자인을 하면 요소를 정렬하기 쉽고

 

페이지 크기를 늘리기 위해 디자인을 수정하는 경우에도 작업이 편해진다..

 

부트스트랩에서는 한 행을 12개의 영역으로 나누어 관리한다.

 

<div class='container'>
  <div class='row'>
    <div class='cols-4'>lorem</div>
    <div class='cols-8'>ipsum</div>
  </div>
</div>

위 예시에서, 내용으로 lorem을 가진 <div>는 한 행의 4/12만큼의 영역을 차지하게 되고

ipsum을 가진 <div>는 8/12만큼의 영역을 차지하게 된다.

 

직접 사용해본 결과 영역을 관리하기 편했고 디자인이 깔끔했다.

 

 

부트스트랩의 아쉬운 점..

다만 부트스트랩에는 몇 가지 아쉬운 점이 있다.

 

부트스트랩의 js, css 파일을 열어보면 엄청나게 다양한 기능과 스타일이 작성되어 있는데, 실제로 사용하는 구문은 그렇게 많지 않다.

 

부트스트랩의 일부 코드를 사용하려면 전체 파일을 항상 import해야하다 보니, 속도가 느려진다던가 자원의 불필요한 낭비가 생길 수 있다.. 

 

또한 부트스트랩을 이용해 페이지를 제작하는 경우, 부트스트랩을 이용해 제작된 다른 웹페이지와 디자인이 비슷해질 수 있다...

 

이 외에도 여러 아쉬운 점이 있었는데, 크게 눈에 띄는 부분은 위의 2개였다.

 

그래서 부트스트랩은 토이프로젝트나, 샘플 페이지를 만들 때 가볍게 사용하는 정도로 활용하려고 한다.