부트스트랩4,그리드편

아래 부트스트랩 그리드에 대한 내용을 적지만 내가 이해하도록 4정식이 나오면서 어떻게 변했는지 적는 것이다. 그러니 부트스트랩 그리드에 대해 제대로 배우고 싶다면 부트스트랩 홈페이지를 참조했으면 한다. 3과 4의 차이는 아래 외에 많지만 대표적으로 내가 많이 사용하는 것만 적었다.  참고로 이 글은 내 관점으로 적었으니 어려울 것이다. 

부트스트랩4 알파 그리드에서 xs가 없어지고 col과 xl이 추가된 것을 봤을 때 3에서 사용하던 그리드는 사용할 수 없을 것이라 생각했다. 그런데 나중에 4의 그리드를 신중히 봤는데 변화가 거의 없었다. 아래 그림처럼 부트스트랩 템블릿을 소스를 제공하는 사이트를 봤에서 4 소스에서 xs 그리드를 쓰는 것을 봤다. 3에서 사용하던 그리드를 그냥 사용하면 되는 것이었다. 4를 꼼꼼히 보면 xs는 완전히 없어지지 않은 것을 알 수 있다. 예로 4의 미디어쿼리를 보면 xs가 있는 것을 볼 수 있다.

4의 그리드에서 가장 낮은 xs이 col로 대체되고 col과 xl이 추가됐다는 것만 알면 된다. 아래 그림으로 설명하면 3에서는 xs가 가장 작은 컬럼이었는데 4에서는 추가된 col이 가장 작은 것이 되었다. 

그리고 3에서는 xl가 없었으며 아래 그림을 보듯이 4에서 xl 추가됐고 1200 픽셀보다 큰 기기이다. 즉 3에서 최대가 lg였지만 4에서는 최대가 xl이다. 이 블로그는 col-md-*로 레이아웃을 만들었으므로 큰 어려움이 없다. 그리고 3에서 알던 그리드 레이아웃에 큰 차이가 없다는 것을 확인했다.

부트스트랩3에 맞는 자동으로 레이아웃을 만들어 주는 사이트인 http://shoelace.io/가 있다. 그 사이트에서 그리드를 만들 때 col-xs-*로 만들지 않으면 될 것이다. col-xs는 위에서 적었듯이 4에서 col로 대체됐으니 phone만 아니면 된다. 

레이아웃에서 공백을 만들기 위해 col-#-offset-*를 사용했다. 3에서 4로 바뀌면서 col-#이 offset-도 이동하고 col-이 없어지면서 최종적으로 offset-#-*식이 됐다. 예로 3에서 col-md-offset-4 라고 했다면 4에서는 offset-md-4이라고 한다. 이 블로그는 col-md-offset-1를 사용하고 있는데 4에서는 offset-md-1이라고 해야 한다. 

• 부트스트랩으로 디자인하라:싱글 웹 페이지 & 반응형 웹사이트 쾌속 개발
• 부트스트랩 사이트 디자인:원페이지 사이트를 구축하는 가장 신속하고 효과적인 방법
• AngularJS와 부트스트랩으로 배우는 웹 개발
• 실전 예제로 배우는 반응형 웹 디자인:부트스트랩 스켈레톤 파운데이션 반응형 프레임워크