Masonry는 사전적으로 벽돌쌓기를 의미합니다. masonry layout은 마치 벽돌을 쌓는것처럼 서로 다른 길이를 가진 이미지들을 빈틈없이 차곡차곡 쌓아놓은 듯한 레이아웃을 의미합니다. 다만 masonry layout은 일반적으로 상단에서 하단으로 쌓아 나가는게 일반적입니다. 대표적인 예시로는 핀터레스트나 네이버 이미지 검색이 있습니다. 이번 글에서는 이러한 masonry layout을 구현하는 네가지 방법에 대해 알아보겠습니다.
1. css로 구현하기
이 방법은 가장 간단하면서도 쉽게 적용 할 수 있는 방법입니다.
See the Pen Untitled by 이승철 (@ibnviuin-the-builder) on CodePen.
이 방법은 가장 masonry layout을 흉내내는 가장 간단한 방법입니다. 하지만 이 방법은 아이템 정렬 순서가 세로로 적용되고 무한스크롤 같이 데이터를 추가할 경우 아이템들의 위치가 바뀌기 때문에 세로 순서로 정렬되어도 상관없고 아이템이 추가되는 경우가 아닌경우에만 가볍게 사용할 수 있는 방법입니다.
2. CSS + Javascript 로 구현하기
이 방법은 JS를 이용하여 각 아이템들의 위치를 계산하여 정해주는 방법입니다.
See the Pen masonry grid by 이승철 (@ibnviuin-the-builder) on CodePen.
이 방법은 출력된 아이템들의 위치를 JS로 옮겨주는 방법입니다. 우리가 생각하는 핀터레스트나 네이버 이미지 검색 레이아웃과 동일한 형태를 보여주고 있습니다. 하지만 이 방법에도 단점은 있습니다. 하나하나의 개별 요소의 위치를 계산해 주기 때문에 아이템의 개수가 매우 많아지게 되면 정렬하는데에 시간이 오래 걸리게 됩니다. 예제 코드에서 <figure>의 갯수를 늘려 보신다면 문제점을 겪어 보실 수 있을겁니다.
3. 외부 라이브러리 사용하기
무언가를 구현할 땐 누군가 만들어서 배포한 라이브러리를 사용하는것도 한 방법입니다.
See the Pen masonry - pkgd by 이승철 (@ibnviuin-the-builder) on CodePen.
위는 가장 많이 쓰이는 라이브러리 중 하나인 https://masonry.desandro.com/ 를 활용하여 구현 해 보았습니다. 사용법이 어렵지 않으니 한번 사용 해 보시길 바랍니다.
4. 기타
위에서 설명한 내용 말고도 또다른 라이브러리로는 naver에서 배포한 @egjs/grid 나 무한 스크롤을 접목해 놓은 @egjs/infinitegrid 가 있습니다. javascript 뿐만 아니라 react나 vue 같은 프레임워크 페키지도 함께 재공해 주고 있으니 관심있으신 분들은 한번 사용해보는것도 좋을 것 같습니다.
이상으로 masonry layout의 구현 방법에 대해 작성해 보았습니다. 더 좋은 방법이나 틀린 내용이 있다면 언제든지 지적 해주시면 감사하겠습니다.
참고 자료
'CSS' 카테고리의 다른 글
| css 문자열 개행(\n) 및 공백(\t) 처리와 ellipsis(...) (0) | 2023.05.23 |
|---|