[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

부트스트랩5 알파가 런칭되었습니다! 아래에서 확인해봐요!

부트스트랩 5(Bootstrap 5) 알파버전 출시! 남들보다 빠르게 공부해보자!

부트스트랩 (Bootstrap)

 

부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 

 

전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러그인의 라이브러리입니다. 미리 정의 된 요소들을 이용해 쉽게 웹디자인을 하고 완성도 높은 다양한 UI를 개발할 수 있습니다. 보통 웹사이트를 제작할 때 필요한 UI 디자인은 하나하나 적용하고 직접 코딩하는 것이 일반적입니다. 하지만 미리 정의된 스타일시트를 이용해 이 과정을 단축시킬 수 있고 그 퀄리티가 굉장히 뛰어납니다. 웹사이트를 너무 쉽게 만들 수 있어서 우려의 목소리도 나오고 있지만 워드프레스, 어썸폰트, 부트스트랩, 제이쿼리등 훌륭한 프레임워크, 플러그인등을 이용해 웹사이트의 제작이 간소화 된다면 단점 보다 장점이 더 많습니다.

 

오늘은 이 부트스트랩을 사용하는데 있어서 조금 까다로운 그리드 시스템을 쉽게 사용하게 해주는 사이트를 소개하도록 하도록 할게요.

 

 

 

http://shoelace.io/

 

바로 위 사이트가 부트스트랩의 그리드 시스템을 쉽게 사용할 수 있게 도와주는 사이트입니다.

 

좌측에 데스크탑 - 테블릿 - 모바일을 겨냥해서 레이아웃을 설계할 때 어떻게 설계되는지 미리 보여주는 창입니다.

 

 

 

가운데는 직접 이렇게 칸을 채워가면서 설계를 할 수 있는 공간입니다.

 

 

우측은 이렇게 설계한 레이아웃을 코드로 출력시켜주는 공간입니다.

 

부트스트랩 그리드 시스템을 통해서 그리드를 잡는 예제를 하나 만들어 보겠습니다.

 

 

반응형으로 제작할 레이아웃의 목표입니다.

 

 

 

 

가장 큰 large desktop을 기준으로 설계한 모습

 

 

 

 

테블릿 레이아웃이 원하는데로 출력되는 것을 확인할 수 있습니다.

 

 

 

 

깔끔하게 모바일까지 대응되네요.

 

 

 

위와 같은 코드도 복사할 수 있습니다.

 

 

 

최종 결과물입니다.

 

사실 부트스트랩 그리드 시스템을 조금만 심도있게 학습하시면, 이런 툴이 없더라도 머릿속에 그려지는데로 코딩하시면 되는데요. 이번 강의에서는 부트스트랩을 처음 사용하시는 분들이 웹사이트를 직접 제작할 때 쉽게 설계하는 방법을 알려드리기 위해 준비했습니다.

 

추후에 부트스트랩을 전반적으로 다뤄보는 강의를 제작해보도록 하겠습니다.

 

이해가 잘 안되시는 부분은 댓글로 알려주시면, 제가 아는 선에서 최대한 알려드리도록 할게요!