부트스트랩 그리드 만들기

이 글에서 부트스트랩 그리드 이해를 쉽게 할 수 있으면서 자동으로 만들 수 있는 사이트를 소개하고자 합니다. 참고로 부트스트랩 공식 홈페이지인 http://getbootstrap.com/css/(영어 홈페이지)나 부트스트랩 한글 홈페이지인 http://bootstrapk.com/css/에서 그리드 시스템에서 부트스트랩 그리드를 익힐 수 있다.

처음 부트스트랩의 그리드를 접했을 때 복잡하고 어려웠다. 그리드는 12개로 나누고 이것이 스마트폰, 태블릿, 노트북, 데스크탑 등의 기기에 따라 달라 xs,sm,md.lg로 나눈다고 하니 어려웠다. 이젠 부트스트랩 그리드를 자주 접하니 자연스럽게 낯선 것이 없어졌지만 지금도 어려운 것이 완전히 해소된 것이 아니다. 처음 부트스트랩 그리드를 접하면 낯설어 어렵거나 복잡할 것이다.

그런데 http://shoelace.io/ 사이트에서 부트스트랩 레이아웃를 만들면 옆에 소스가 나오니 기기에 따라 어떻게 된다는 것을 파악할 수 있었다. 거기를 많이 사용하면 xs는 스마트폰이고 sm은 태블릿, md는 작은 기기 데스크탑 보통 노트북,  lg는 1200px보다 크거나 같은 큰 데스크탑 기기라는 것을 알 수 있다. 이 수치는 부트스트랩 홈페이지를 보면 나와있다. 

만약 md로 레이아웃을 만들면 아래 그림을 보듯 작은 기기인 테블릿이나 스마트폰에서 모든 것이 일렬로 쌓인다는 것을 볼 수 있다. 데스크탑 이상에서는 그 레이아웃을 유지한다는 것을 알 수 있다. 아래 그림에 나오지 않았지만 sm을 사용하면 sm이 태블릿이니 스마트폰에서는 레이아웃이 일렬로 정렬되며 태블릿보다 큰 기기에서는 레이아웃을 유지한다.  아래 그림을 보듯이 http://shoelace.io/ 사이트에서 레이아웃을 만들면 스마트폰(phone), 태블릿(Tablet) ,작은 기기 데스크탑(Desttop), 큰 기기 데스크탑(Large Desktop)에서 어떻게 되는지 한 눈에 볼 수 있는 좋은 점이 있다. 참고로 아래 그림은 전체 화면이 아니라 일부라서 오른쪽에 나오는 소스 화면은 없다.

대부분 md로 레이아웃을 만든다. 나도 이 블로그를 sm과 md로 레이아웃을 만들었다. 이 블로그 머리말은 sm을 사용했고 나머지는 md를 사용했다. 아래 그림을 보듯이 머리말 부분은 sm을 사용해서 브라우저 크기를 태블릿 크기로 줄여도 머리말은 일렬로 되지 않을 것이다. 항상 레이아웃을 md만 사용할 수 있는 것은 아니다. 참고로 xs,sm.md.lg를 같이 사용하는 방법도 있는데, 아직 이것을 사용하는 방법은 모르겠다.

반응형 사이트를 여러 기기에서 점점하는 http://responsivetest.net/나 http://troy.labs.daum.net/처럼 http://shoelace.io/는 내가 만든 레이아웃을 점검하는 곳인 같다. 

9.9원으로 대량 문자 전송