이 블로그가 아닌 다른 티스토리 블로그를 부트스트랩4로 만들었다. 부트스트랩4가 적용된 그 블로그에 부트스트랩5 알파의 CSS와 자바스크립트를 그대로 적용해서 얼마나 변했는지 확인해 본다. 몇 년 전 부트스트랩4가 나왔을 때도 부트스트랩3으로 만든 이 블로그를 부트스트랩4를 적용한 적이 있다. 

 

그래서 부트스트랩4로 만든 티스토리 블로그에 5 알파의 CSS와 자바스크립트를 적용했다. 적용 결과 시간을 들여 전체적으로 봐야 하지만 대부분 크게 눈에 띄가 다르게 보이는 것은 없었다. 내 블로그에서 눈에 뛴게 없었다는 것이다. 예로 아래와 같은 캐러셀은 변화가 없었다. 참고로 부트스트랩3에서 그리드가 변해 캐러셀을 변화가 많았다.

바로 눈에 띄는 부분은 커버의 card grid 와 링크 부분이었다. 그래서 부트스트랩5 알파의 card 부분을 살펴봤더니 내가 4에서 적용시켰던 cards grid가 5 알파에서는 없는 것을 확인했다. 그러니 커버에 grid card 부분이 제대로 나오지 않은 것이었다.

cards grid는 벽돌 모양으로 쌓는 레이아웃으로 이 블로그의 커버에서도 볼 수 있다. 예로 아래에서 볼 수 있는 카드를 그리드로 만드는 레이아웃이 부트스트랩5 알파에서 볼 수 없었다. 참고로 아래 card grid는 부트스트랩4에서만 지원하는 것이다. 

부트스트랩3로 만든 이 블로그에서 그리드 레이아웃을 어떻게 적용했는지는 아래 글에서 알 수 있다. 사람들이 그리드 레이아웃을 많이 사용하니 부트스트랩4에 집어 넣은 모양이다. 

 

벽돌리스트인 Masonry 레이아웃 구현하기

글에서 벽돌를 쌓는 것과 같은 레이아웃을 만드는 것에 대해 적으려고 한다. 벽돌을 쌓아올린 것과 같은 레이아웃을 Masonry 레이아웃이라고 한다. Masonry와 Masonry 레이아웃 이해 사전에서 masonry 뜻

min-blog.tistory.com

그리고 부트스트랩5 알파를 보니 자바스크립트에 2,3,4에서 볼 수 있었던 jQurey를 빼 버리고 가볍게 가는 것 같다. jQuery는 벽돌 레이아웃을 구현하기 위해 필요한 것 같다. 

'정보/부트스트랩' 관련된 글 MORE