백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

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

 

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

 

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

 

masonry 레이아웃

 

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

 

 

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

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

min-blog.tistory.com

 

버전 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에 적용한 결과 

 

'IT.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×