부트스트랩5에서 벽돌쌓기, Masorny 레이아웃 구현

이 글에서 부트스트랩 5에서 Masorny 레이아웃에 대해 적으려 한다.

 

부트스트랩 버전 5에서 jQuery를 사용하지 않는다는 것을 알 것이다. 그리고 아래 그림과 같은 레이아웃인 Masorny를 쉽게 구현하는 것도 없어졌다. 전에 알아보았듯이 masonry 뜻은 명사로 돌이나 벽돌 쌓기 공사를 뜻한다. 구글 이미지 검색에서 masonry라는 키워드로 검색하면 아래 두 번째 이미지가 검색된다.

 

masonry 레이아웃을 보면 알겠지만 빈 공간이 없다. 

 

masonry 레이아웃

 

아래 글에서 masonry 레이아웃에 대해 적었으니 참조했으면 한다.

 

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

 

버전 4에서 카드(Card) 컴포넌트를 공부할 때 위와 같은 Masonry 레이아웃을 쉽게 구현할 수 있어 좋았다. 하지만 버전 5에서 사라져 아쉬웠다. 이 블로그 스킨은 부트스트랩 버전 3 만들었으니 혹시 할지 모른다. 왜냐하면 이 블로그 커버에 적용한 Mansonry 때문이다. 이것은 내가 여기에서 다운할 수 있는 스크립트를 따로 추가하여 구현했다.  

 

부트스트랩 버전 4에서만 지원한다.

 

이 블로그 커버와 버전 4에서 카드

 

한글 부트스트랩 5 페이지 설명을 보니 Masonry 레이아웃을 사용하니 부작용을 발생시킨다고 한다. 그 부작용에 대해서는 여기에서 설명하고 그 부작용 설명이 영문이라... 만약 버전 5에서 Masonry 레이아웃을 사용하고 싶다면 Masonry 플러그인을 사용하면 된다고 한다. 그리고 데모 예시를 만들었다. 

 

버전 5에서 Masonry 레이아웃 사용

 

그 데모 예시에 <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>에 row에 data-masonry='{"percentPosition": true }'을 더하면 된다고 한다. 

 

 

그래서 내 버전 5로 만든 티스토리에 스크립트 등을 추가했더니 아래 그림처럼 카테고리 목록에 Masonry 레이아웃을 만들었다. 그 블로그에 부트스트랩 5 스크립트를 제외한 다른 스크립트를 추가하지 않으려 했는데...

 

5에 적용한 결과