갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (메뉴 활용)

갤러리 이미지를 클릭하면 새로운 갤러리가 표시되도록 메뉴를 구성할 수 있습니다. 이 구성은 주로 여러 개의 포트폴리오 또는 제품을 전시할 때 유용하며, 장소를 소개할 때도 사용할 수 있습니다.

갤러리 이미지 클릭 시 새로운 갤러리가 나오게 구성하는 방법은 여러 가지가 있습니다. 이 도움말에서는 갤러리 위젯과 링크를 사용해 구성하는 방법을 설명합니다.

아래와 같은 샘플 페이지를 만들어 보는 것으로, 갤러리 이미지 중 하나를 클릭하면 관련 갤러리가 나오는 방법을 배울 수 있습니다.

시작에 앞서

이 도움말을 진행하기에 앞서, 아래의 구조도를 숙지해 주세요. 우리는 아래와 같이 메뉴를 생성 및 구성하고, 갤러리 홈(Home)에는 각 메뉴(Nature, Sky, Street)들로 이동할 수 있는 링크를 추가할 것입니다.

구성방법

갤러리 메뉴를 구성하기 위한 상위, 하위 메뉴들을 생성하고 구성합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 왼쪽에서 메뉴 관리 창이 나오면, 상단 메뉴 항목에 위치한 를 클릭합니다.
  4. 메뉴명(Home)을 작성하고, 확인 버튼을 클릭합니다.
  5. 위 3~4번 과정을 반복해 남은 모든 메뉴(Nature, Sky, Street)들을 추가합니다.

갤러리로 사용할 메뉴들을 하나의 메뉴로 그룹화 합니다.

  1. Nature 메뉴를 마우스로 클릭 후 드래그하여, Home 메뉴 위에 올리고, 화살표 아이콘이 생기면, 마우스를 놓아줍니다. (Nature 메뉴가 Home의 하위 메뉴로 구성됩니다.)

  2. 위 애니메이션을 참고해, 같은 방법으로 남은 메뉴들도 Home 메뉴의 하위 메뉴로 구성합니다.
  3. 닫기 ✕ 아이콘을 클릭해 메뉴 생성 및 편집을 완료합니다.

하위 메뉴에 갤러리 위젯을 삽입하고 이미지를 추가합니다.

  1. Nature 메뉴로 이동합니다. (메뉴 관리를 열고 Nature 메뉴를 클릭해 이동하거나, 상단 메뉴의 Home > Nature 를 클릭해 이동할 수도 있습니다.)
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 갤러리 위젯을 클릭합니다.
  3. 추가된 갤러리 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  5. 갤러리 설정 창 왼쪽 상단의 + 상단 이미지, 동영상 추가에 마우스 포인터를 올리고, 이미지 추가를 클릭합니다.

  6. 내 PC에서 갤러리와 연관된 이미지를 올려줍니다.

  7. 갤러리 설정 창 바깥 영역을 클릭해 설정을 종료합니다.
  8. 위 1~7번 과정을 참고해 남은 2개 하위 메뉴(Sky, Street)에도 갤러리 이미지를 추가합니다.

3단계에서 제작한 메뉴들로 이동할 수 있는 홈 메뉴를 제작합니다.

  1. Home 메뉴로 이동합니다. (메뉴 관리를 열고 Home 메뉴를 클릭해 이동하거나, 상단 메뉴의 Home 을 클릭해 이동할 수도 있습니다.)
  2. 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 갤러리 위젯을 클릭합니다.
  3. 갤러리 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  5. 갤러리 설정 창 왼쪽 상단의 + 상단 이미지, 동영상 추가에 마우스 포인터를 올리고, 이미지 추가를 클릭합니다.

  6. 각 갤러리의 대표 이미지를 추가합니다. (이 도움말에서는 갤러리 하위 메뉴를 총 3개 만들었으므로, 아래 그림과 같이 각 갤러리를 대표하는 3개의 이미지가 추가되었습니다.)

  7. 대표 이미지 하나를 마우스로 클릭합니다.
  8. 갤러리 설정 창 왼쪽 하단의 빈 칸을 마우스로 클릭하면, 아래 그림과 같이 링크할 메뉴 목록이 나타납니다. 갤러리 이미지 클릭 시 이동할 메뉴를 선택해 주세요.

  9. (선택 사항) 이미지 제목이미지 설명을 작성합니다. 작성한 이미지 제목과 설명은 이 도움말 상단의 그림과 같이 갤러리에 표시됩니다. 단, 이미지 제목과 설명의 표시여부는 갤러리 스타일마다 상이하며, 갤러리 스타일을 변경하는 방법은 아래 6단계 과정을 참고해 주세요.

    참고: 이 도움말에서는 아래의 Mansonry 갤러리가 선택되었습니다. 갤러리 스타일은 아래 6단계 과정을 참고해 변경할 수 있습니다.

  10. 남은 갤러리 이미지도 위 6~9번 과정을 반복해 나머지 이미지도 설정을 완료합니다.

    중요: 반드시 이미지를 먼저 선택하고 링크, 제목, 설명을 추가하세요.

대표 이미지를 가장 적합하게 표시할 수 있는 갤러리 스타일로 변경합니다. 이 도움말의 경우, 그리드 갤러리 또는 Mansonry 갤러리 스타일을 권장합니다.

  1. 갤러리 설정 창 상단의 디자인 탭을 클릭합니다.

  2. 다른 디자인 버튼을 클릭합니다.

  3. 갤러리 스타일을 선택합니다. (예: 그리드 갤러리 또는 Mansonry 갤러리 스타일 선택)
  4. 갤러리 설정 창 바깥 영역을 클릭해 적용을 완료합니다.

갤러리 이미지에 이미지 제목과 설명을 추가한 경우, 해당 텍스트의 정렬 형식을 변경할 수 있습니다.

  1. 갤러리 설정의 디자인 탭에서 텍스트 항목의 정렬 옵션을 클릭합니다.

  2. 9개의 정렬 위치 중 하나를 선택합니다.

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 상단의 Home 메뉴를 클릭합니다.
  3. 갤러리 이미지 중 하나를 클릭합니다.
  4. 링크한 갤러리 메뉴로 이동하는지 확인하고, 연관 이미지들이 표시되는지 확인합니다.
  5. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

관련 도움말

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
863.5K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
3.9K
전국 파트너/리셀러 수

아임웹과 함께하는 제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 이지페이, 엑심베이 공식파트너입니다.