부트스트랩 그리드 만드는법 및 화면구성 살펴보기

현제 부트스트랩으로 웹앱을 만들고 있습니다 그에따라 정신이 사나와서 블로그글도 제대로 못쓰고 있는데 부트스트랩 그리드에 관해서 잠깐 알려드리겠습니다

부트스트랩은 반응형 프레임워크로서 css를 잘모르는 개발자가 아주 쉽게 반응형 사이트를 개발할 수 있게 css가이드를 제공하고 있는데요 화면 분활의 핵심이 부트스트랩 그리드인것 같급니다

우선 반응형 웹사이트에 대해서 알아보기로 하죠 반응형웹이란 화면 해상도가 변하면서 그에따른 레이아웃배치가 해상도에 맞게 배치가 되는데요

부트스트랩에서는 이런 화면 배치를 그리드라는 방식으로 해결을 하였습니다

데스크탑과 모바일에서 보여지는 화면이 다를 수밖에 없는데요 화면을 잘라서 모바일과 데스크탑에 보여질걸 나누어 놓은게 그리드입니다

각각의 해상도에 따라서 쓰이는 접두어가 있는데 살펴보도록 하겠습니다

모바일 768px 이하	태블릿 768px 이상	데스크탑 해상도 992px 이상	데스크탑 해상도 1200px 이상
.col-xs-그리드수	.col-sm-그리드수	.col-md-그리드수	.col-lg-그리드수

이렇게 나뉘어지며 해당되는 클래스수를 계산하여 화면 분활에 사용하실 수 있습니다.

이렇게 그리드가 나뉘어지며 화면의 격자는 12개를 기준으로 나눕니다 최대한 쪼갤수 있는 한계치가 12개라는 건데요 한번 보실까요?

 

 

소스코드입니다. 그리드는 4개씩 3줄이 나오게 하였으며, 보더로 화면에 표기를 하였습니다.

  

md이기 때문에 992 해상도 이상에서는 위와 같이 한줄로 나란히 3개로 나오게 되는데요. 해상도가 조금이라도 낮아진다면 다시 목록 리스트형이 바뀌게 됩니다.

DIV는 인라인이기 때문이 이런식으로 층층으로 나타나게 됩니다. 그래서 클래스를 잘 이용하면 해상도에 따라 화면 나열하는걸 다르게 만드실 수 있습니다.

이렇게 그리드를 나누고 합칠 수 있으며 화면 해상도에 맞춰 그리드를 제어할 수가 있습니다
그리드에는 옵셋개념도 있는데요.  col-md-push-그리드 수, col-md-pull-그리드 수 이렇게 사용을 합니다. 왼쪽 오른쪽으로 그리드를 왔다갔다 할 수 있게 하는거라 생각하시면 될것 같네요.

여기까지 부트스트랩 그리드에 관해 알아보았습니다. 이것 저것 바꿔가면서 연습해보시기 바랍니다