Set Cover가 정사각형으로 잘립니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
Essential Portfolio - Gallery 페이지 스타일
이 문서는 자동으로 번역되었으며 부정확한 내용이 포함될 수 있습니다.
영어 원본 보기
Essential Portfolio의 Gallery 페이지는 유연하고 쉽게 맞춤 설정할 수 있도록 설계되어, 자신의 작업물에 맞게 조정할 수 있습니다. 한 번의 클릭으로 갤러리의 모양을 손쉽게 변경할 수 있도록 다양한 사전 설정 레이아웃 스타일을 만들었습니다. 이러한 레이아웃 내에서, Design editor의 슬라이더로 시각적으로 제어되는 무궁무진한 맞춤 설정을 적용할 수 있습니다.
Gallery 페이지에는 세 가지 보기가 있습니다 - Sets View, Index View, Single View. 이 계층 구조를 통해 프로젝트, 스타일 또는 원하는 다른 기준으로 작업물을 세트별로 보여줄 수 있습니다. 각 보기의 레이아웃은 서로 독립적이므로, 각 단계에서 갤러리의 모양을 자유롭게 조합할 수 있습니다.
이 문서는 각 보기의 다양한 레이아웃 스타일에 대한 개요를 보여 주는 것을 목표로 합니다. 레이아웃은 이미지의 종횡비나 masonry 흐름의 방향처럼 각 레이아웃이 갤러리에 적용하는 서로 다른 특성으로 정의됩니다.
🎨 직접 꾸며 보세요 - 모든 레이아웃에 대해 열 수, 여백, 호버 스타일, 색상, 타이포그래피를 언제든지 변경할 수 있습니다. 아래에서는 각 스타일을 최대한 활용할 수 있는 추가 팁을 정리했습니다. 걱정하지 마세요. 코딩이 전혀 필요 없을 만큼 아주 쉽습니다.
Sets View
세트를 사용하여 작업물을 프로젝트나 카테고리로 나누면 방문자가 쉽게 탐색할 수 있습니다. 원하는 만큼 중첩된 세트를 만들 수 있습니다. 예를 들면 다음과 같습니다:
📁작업 → 📁의뢰 작업 → 📁브랜드 → 📁Bentley.
Sets View 스타일은 6가지가 있습니다:
- Square Grid
- Regular Grid
- Masonry
- Uniform Grid
- List
- Slide
Square Grid
🎨 직접 꾸며 보세요 - 두 개의 열에 배치한 큰 정사각형 Set Cover는 대담한 느낌을 줍니다.
Regular Grid
Set Cover가 원본 이미지 그대로 잘리지 않은 상태로 표시됩니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
🎨 직접 꾸며 보세요 - 넉넉한 여백을 둔 작은 Set Cover는 현대적이고 미니멀한 느낌을 줍니다.
Masonry
Set Cover가 아래로 흐르는 열에 타일 형태로 배치됩니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
🎨 직접 꾸며 보세요 - 여백 없이 큰 Set Cover를 사용하면 강렬한 Masonry 갤러리를 만들 수 있습니다.
Uniform Grid
모든 Set Cover의 크롭은 같은 모양이지만, 그 직사각형의 종횡비를 조정할 수 있습니다. 이를 통해 카드 스타일의 길쭉한 Set Cover나 좁은 배너를 만들 수 있습니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
Set Information은 아래에 표시되거나, 마우스를 올리면 Set Cover 위에 표시될 수 있습니다.
🎨 직접 꾸며 보세요 - 열 수를 1로 줄이면 넓은 전체 너비 배너를 만들 수 있고, 미디어 높이를 늘리면 카드를 만들 수 있습니다.
List
기본적으로 List는 세트를 텍스트 목록으로 표시하며, 마우스를 올리면 전체 페이지 Set Cover가 나타납니다.
각 세트를 개별적으로 선택하여 크롭, 모양, 페이지에서의 위치를 따로 지정할 수도 있습니다.
Slide
Set Cover가 전체 페이지 배너로 표시되며, 스크롤하면 서로 겹쳐 미끄러지면서 인상적인 세트 보기를 연출합니다.
Index View
Index view는 어떤 세트에 들어 있는 모든 항목을 더 넓게 한눈에 보여 줍니다. 작은 썸네일 갤러리를 보여 주고 싶든, 크고 완전한 이미지를 보여 주고 싶든, 그에 맞는 레이아웃이 있습니다.
Index View 스타일은 6가지가 있습니다:
- Square Grid
- Regular Grid
- Masonry
- Horizontal Masonry
- Stream
- Horizontal Scrolling
Square Grid
크고 항목이 많은 세트에 적합하며, 작은 정사각형 썸네일로 방문자에게 다양한 선택지를 제공할 수 있습니다.
이미지 정보는 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
이미지 정보는 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
Regular Grid
Regular Grid 세트 보기와 마찬가지로, 이미지가 원래 종횡비 그대로 잘리지 않은 상태로 표시됩니다.
이미지 정보는 아래에 표시되거나, 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
이미지 정보는 아래에 표시되거나, 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
Masonry
세트 보기와 마찬가지로, Masonry 갤러리는 아래로 흐르는 열로 배치됩니다.
이미지 정보는 아래에 표시되거나, 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
이미지 정보는 아래에 표시되거나, 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
Horizontal Masonry
Masonry와 스타일이 비슷하지만, Horizontal Masonry는 열을 가로로 채우므로 가로 방향 이미지가 우선됩니다.
이미지 정보는 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
이미지 정보는 마우스를 올리면 이미지 위에 표시되거나 숨길 수 있습니다.
Stream
이 보기에서는 이미지가 아래로 스크롤되는 하나의 열에 전체 크기로 표시됩니다. 이야기를 시간순으로 보여 주기에 좋은 선택입니다.
이미지 정보는 이미지 아래에 표시됩니다.
이미지 정보는 이미지 아래에 표시됩니다.
Horizontal Scrolling
Horizontal Scrolling 스타일은 2021년 7월 6일 이후에 제작된 사이트에서만 사용할 수 있습니다.
이미지가 가로로 흐르며 스크롤됩니다. 더 작거나 미니멀한 헤더 스타일과 함께 사용하여 모니터의 전체 너비를 활용하기에 이상적입니다.
이미지 정보는 이미지 아래에 표시되거나 숨겨집니다.
이미지 정보는 이미지 아래에 표시되거나 숨겨집니다.
Single View
Single view는 개별 이미지를 주인공으로 만듭니다. 방해 요소 없이 이미지를 최대한 크게 보여 주거나, 제목·설명·키워드 및 기타 메타데이터로 작업물에 대한 더 많은 정보를 제공하고 싶을 때 이 보기를 선택할 수 있습니다.
Single View 스타일은 3가지가 있습니다:
- Fullscreen
- Stacked
- Panels
그리고 2가지 lightbox 스타일이 있습니다:
- Frame
- Minimal
Fullscreen은 단일 이미지를 가장 크게 보여 주며, 아이콘을 사용해 정보와 썸네일을 표시합니다.
Stacked는 이미지를 표시하고 그 아래에 정보와 썸네일을 보여 줍니다.
Panels는 이미지 옆 패널에 정보를 표시하고, 화면 하단에 썸네일 한 줄을 보여 줍니다.
Single View Lightbox
lightbox를 활성화하면 이미지가 별도의 페이지로 로드되지 않고 index view 위에 팝업으로 표시됩니다.
Frame lightbox에서는 이미지 탐색뿐만 아니라 제목과 설명도 표시할 수 있습니다.
Minimal lightbox는 이미지를 제외한 모든 것을 숨깁니다.
🎨 직접 꾸며 보세요 - 주 사이트와 대비되는 색상(예: 주로 밝은 테마에는 검정, 그 반대도 마찬가지)으로 lightbox 배경을 선택하여 single view에 다른 분위기를 부여해 보세요.