Essential Portfolio - Masonry 레이아웃 설명
이 문서는 자동으로 번역되었으며 부정확한 내용이 포함될 수 있습니다.
영어 원본 보기
Masonry는 콘텐츠를 여러 열로 배치하는 그리드 레이아웃 방식입니다. 크기가 서로 다른 이미지도 빈 공간 없이 깔끔하게 배열할 수 있어 이미지 갤러리에 인기 있는 선택입니다.
다음은 Essential Portfolio 템플릿을 사용한 Masonry 레이아웃의 예입니다(왼쪽).
DPG는 이전에도 여러 Series 2 템플릿에서 Masonry 레이아웃을 사용했습니다. Series 3에서는 기능을 개선하기 위해 최신 웹 기술을 사용하여 Masonry를 새로 작성했습니다. 이로 인해 Series 3의 Masonry는 동작 방식이 약간 다릅니다.
새로운 점
Series 3에서 Essential Portfolio 템플릿에는 Masonry와 Horizontal Masonry라는 두 가지 서로 다른 masonry 레이아웃이 있습니다.
이전 템플릿의 masonry 동작에 익숙하다면, 가장 먼저 눈에 띄는 변화는 Masonry 레이아웃에서 페이지에 표시되는 이미지의 순서일 것입니다. 차이점에 대해 계속 읽어 보세요.
열 채우기
Masonry에서는 열의 개수를 선택하며, set에 있는 이미지의 총 개수가 이 열들에 나뉘어 배치됩니다. 이미지는 열의 너비에 맞춰지므로 세로 이미지가 가로 이미지보다 더 크게 표시됩니다.
모든 이미지의 크기가 정확히 동일하지 않으면 갤러리 하단이 완벽하게 고르지 않을 수 있습니다.
Horizontal Masonry에서는 세로 이미지가 1개 열을 채우고, 가로 이미지가 2개 열을 채웁니다. 열 안에서 행의 높이가 일정하므로 크기가 불규칙한 이미지(매우 긴 세로 이미지, 매우 넓은 가로 이미지)는 그리드에 맞도록 약간 잘립니다.
set에 있는 이미지 수가 모든 열 「슬롯」을 채우지 못하면 갤러리 하단에 빈 공간이 생길 수 있습니다.
미디어 순서
Masonry는 아래로 향하는 열 방향으로 진행됩니다. 왼쪽 예시에서 볼 수 있듯이, 이미지는 첫 번째 열에서 시작해 맨 아래에 도달할 때까지 세로로 쌓이고, 그다음 이미지가 두 번째 열의 맨 위에 나타나는 식으로 이어집니다.
❗️이것이 Series 2의 masonry와 동작 방식에서 가장 큰 차이점입니다. Series 2에서는 이미지 1이 1번 열에서 시작한 뒤 이미지 2가 2번 열에 나타났습니다.
❗️즉, 이 레이아웃에서는 이미지의 사용자 지정 순서를 Admin에서 제어하기 어려울 수 있습니다. Admin의 그리드는 이미지를 가로 행으로 표시하기 때문입니다.
혼란을 방지하려면 Design 섹션을 사용하여 Masonry 레이아웃의 순서를 정리하는 것이 가장 좋습니다. 여기서는 이미지를 클릭하고 드래그하여 여러 열에 걸쳐 원하는 순서로 자유롭게 배치할 수 있습니다.
📎 Design 섹션을 사용하여 이미지를 정리하는 방법에 대해 자세히 알아보세요.
반면 Horizontal Masonry는 가로 순서를 따릅니다. 여전히 Design 섹션에서 정리할 수 있으며, sets 보기에서도 순서가 동일하게 인식됩니다.
Last updated:
