masonry layout vue 적용기 > IT Note

본문 바로가기
사이트 내 전체검색

IT Note

masonry layout vue 적용기
0

View 1,230  | 작성일2023.04.07 09:38

본문

우선 masonry layout 이 뭐냐면…

그냥 우리가 핀터레스트 같은 웹에서 보는 벽돌이 불규칙적으로 쌓인거 같은 UI 입니다. 

갤러리 UI 같은 스타일에서 많이 쓰이고 있죠.


193284d3df9351ef3aebe3f9fcdb9f43_1680827383_4306.png
 

이렇게 생긴 디자인 입니다.


CSS도 많이 발전하여 당연히 CSS만으로 완벽하게 구현할수 있지 않을까? 싶었는데… 아쉽게도 css 에 기능이 들어가긴 했습니다만 웹브라우저에서 테스트해본 결과 사파라와, 파이어폭스에서 제한적으로 되고 크롬에서 잘 안되더라고요.


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout 


우선 이 링크가 CSS에서 정식 지원하는 Masonry layout 설정인데.. 이제막 시작해서 이걸 사용자가 보는 웹페이에 쓸수는 없습니다.


그래서 찾아보니 보통은 자바스크립트로 처리하거나 혹은 flex 로 비슷하게 흉내내는 방법은 이것저것 있는데 … 저는 프론트를 vue.js를 즐겨쓰니 vue.js 에도 뭐가 있지않나 싶었습니다.


다행히 뭐가 있군요.


https://www.npmjs.com/package/vue-masonry-css 


vue 에서 masonry css 를 사용할수 있게 해주는 외부 라이브러리 입니다.

사용법도 간단해서요 


스크립트 넣어주고


193284d3df9351ef3aebe3f9fcdb9f43_1680830556_7485.jpeg


이런식으로 쓰시면 됩니다.

cols 는 칼럼개수고 gutter는 column 사이의 간격으로 보입니다.


여튼 뭐 하루종일 낑낑댔는데 이정도면 만족입니다.

아쉽게도 정식 masonry 와는 다르게 flex 를 이용해서 maronry 를 흉내낸거 같은데(그래서 높이다 너무 큰 애들이 오면 균형이 조금 안좋습니다) 그래도 이정도면 간편하게 사용할수 있어 추천합니다.

댓글목록

등록된 댓글이 없습니다.

IT Tip&Tech 목록

게시물 검색

접속자집계

오늘
333
어제
638
최대
5,785
전체
621,649
Copyright © LittleCandle All rights reserved.
문의메일 : littlecandle99@gmail.com
모바일 버전으로 보기