우리의 단계별 가이드를 통해 WeWeb에서 무리없이 반응형 이미지 갤러리를 만드는 방법을 탐색해보세요. 초보자와 경험 많은 사용자 모두에게 완벽합니다. 지금 시작하세요.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: WeWeb 열기
반응형 이미지 갤러리를 생성하기 위해 첫 번째로 해야 할 일은 WeWeb을 열어야 합니다. 해당 앱을 바탕 화면에서 찾거나 애플리케이션 폴더에서 찾을 수 있습니다. 만일 WeWeb이 설치되어 있지 않다면, 공식 WeWeb 웹사이트에서 애플리케이션을 다운로드 할 수 있습니다.
2단계: 템플릿 또는 공백 페이지 선택하기
WeWeb을 열면 대시보드에서 기존 웹사이트를 선택하거나 템플릿 또는 빈 페이지를 선택하여 처음부터 시작할 수 있습니다. 처음부터 웹사이트를 생성하는 경우, 이미지 갤러리를 보완하는 디자인을 선택하세요.
3단계: 디자인 모드 입력
사이트를 선택한 후에는 "편집" 버튼을 클릭하여 디자인 모드로 들어가야 합니다. 이렇게 하면 필요한 요소를 드래그 앤 드롭 할 수 있는 디자인 인터페이스가 열립니다.
4단계: 새 페이지 추가 또는 기존 페이지 선택
이미지 갤러리를 새 페이지에 포함시키려면 화면의 왼쪽에서 "페이지"를 클릭한 다음 "새 페이지" 옵션을 선택합니다. 새 페이지의 이름을 입력하고 "생성"을 누릅니다. 갤러리를 기존 페이지에 추가하려면 페이지 목록에서 페이지를 선택합니다.
5단계: 이미지 갤러리 위젯 추가
이미지 갤러리를 추가하려면 왼쪽 메뉴에서 위젯 아이콘을 찾아 갤러리를 배치하려는 페이지 섹션으로 드래그합니다. 위젯 버튼은 종종 정사각형 아이콘으로 표시됩니다.
6단계: 갤러리 스타일 선택
WeWeb은 모든 사람의 예술적 비전에 맞는 여러 가지 갤러리 스타일을 제공합니다. 갤러리 스타일을 선택하려면 "갤러리 스타일"이라고 레이블이 붙은 상자를 클릭하고 가장 적합한 스타일을 선택하세요.
7단계: 갤러리에 이미지 추가
위젯이 적절한 위치에 있다면 이미지를 추가할 차례입니다. 이 작업을 수행하려면 방금 사이트에 추가한 이미지 갤러리 위젯을 클릭합니다. 그런 다음 "이미지 추가" 버튼을 클릭하고, 이를 통해 컴퓨터에서 이미지를 선택하고 갤러리에 업로드 할 수 있는 프롬프트를 엽니다.
8단계: 이미지 조정
이미지의 크기를 조정하거나, 자르거나, 이미지에 변경을 가하려면 간단히 이미지를 선택하고 도구 상자를 사용하여 필요한 변경 사항을 적용하면 됩니다.
9단계: 갤러리 정리
사진을 드래그 앤 드롭하여 순서를 설정함으로써 갤러리를 정리할 수 있습니다. 이미지를 삭제하려면 그 이미지를 클릭하고 '휴지통' 아이콘을 누르세요.
10단계: 갤러리 속성 설정
갤러리가 반응형으로 동작하도록 갤러리 속성을 설정하세요. 속성 패널에서 이미지 너비와 높이를 표시 크기에 맞게 조정할 수 있도록 백분율로 설정합니다.
11단계: 미리보기 및 게시
웹사이트를 게시하기 전에 "미리보기"를 클릭하여 새로운 변경 사항을 검토합니다. 외형과 기능에 만족하면 "게시"를 클릭하여 새 이미지 갤러리를 공개로 만듭니다.
WeWeb에서 반응형 이미지 갤러리를 생성하는 것은 이렇게 간단합니다. 드래그 앤 드롭 요소, 이미지 업로드, 설정 조정을 하면 됩니다.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.