메인 배너 섹션 2차 개선_한별(완)
[ 기능 배포 관련 안내서 ]
업로드 전 체크리스트
업로드 후 체크리스트
4-2. 메인 배너 섹션 개별 편집하기
메인 배너 섹션에 이미지, 색상, 동영상 중 하나의 탭을 선택하여 메인 화면으로 구성할 수 있습니다.
이미지 혹은 색상 탭을 사용하면 여러 개의 배너를 슬라이드 형태로 설정할 수 있고, 동영상 탭을 사용하면 하나의 배너만 화면에 보입니다.
[ 이미지 배너 추가하기 ] Step 1. 메인 배너 섹션 개별 편집 패널의 '이미지' 탭을 클릭해 주세요.
패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드하고 이미지를 드래그하여 순서를 변경할 수 있습니다.
Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 [설정] 버튼을 클릭해 주세요.
Step 3. 이미지 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목 |
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
배경 위 이미지 이미지를 업로드하면 기존에 설정된 이미지 위에 새로운 이미지를 추가할 수 있습니다. |
배경 위 이미지 위치 배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 선택할 수 있습니다. |
[ 색상 배너 추가하기 ]
Step 1. 메인 배너 섹션 개별 편집 패널의 '색상' 탭을 클릭해 주세요.
패널 하단의 [+] 버튼을 클릭하여 색상을 추가하고 색상 썸네일을 드래그하여 순서를 변경할 수 있습니다.
Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 [설정] 버튼을 클릭해 주세요.
Step 3. 색상 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목 |
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 색상 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
배경 위 이미지 이미지를 업로드하면 기존에 설정된 색상 위에 새로운 이미지를 추가할 수 있습니다. |
배경 위 이미지 위치 배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 선택할 수 있습니다. |
배경 색상의 배경색을 설정할 수 있습니다. 색상 추가 시 기본 배경색은 #5553C0(군청) 입니다. |
[ 동영상 배너 추가하기 ]
Step 1. 메인 배너 섹션 개별 편집 패널의 '동영상' 탭을 클릭해 주세요.
Step 2. 파일 업로드 옆 […] 버튼을 클릭하여 MP4 동영상 파일을 업로드해 주세요.
Step 3. 동영상 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목 |
MP4 파일 10MB 이하 확장자 MP4 파일을 등록해 주세요.
|
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
4-3. 메인 배너 섹션 공통 스타일 설정하기
메인 배너 섹션의 공통 스타일 설정 패널로 이동하거나 메인 배너 섹션 태그의 파레트 모양 아이콘을 눌러 메인 배너 섹션의 공통 스타일을 설정할 수 있습니다.
메인 배너 섹션의 크기 설정 방법은 이미지 설정 가이드를 참고해 주세요.
설정 항목 |
종류 메인 배너 섹션에 등록된 이미지 혹은 동영상의 노출 방식을 설정할 수 있습니다.
|
스타일
|
높이 (종류: 높이 고정으로 선택 시) 메인 배너 섹션에 출력되는 이미지 혹은 동영상의 높이를 설정할 수 있습니다.
|
비율 (종류: 비율 고정으로 선택 시) 메인 배너 섹션에 출력되는 이미지 혹은 동영상의 너비, 높이 비율을 설정할 수 있습니다.
|
배경 위 색상 메인 배너 섹션에 등록된 이미지 위에 덮여 씌워질 배경 색상을 설정할 수 있습니다.
|
안쪽 여백 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 안쪽의 위쪽, 아래쪽 여백을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 위치 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼의 위치, 굵기, 크기, 자간, 줄간격을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 정렬 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼의 정렬을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 여백 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼 사이의 여백을 설정할 수 있습니다.
|
제목 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 위에 출력되는 제목글의 스타일 속성을 설정할 수 있습니다.
|
설명 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 위에 출력되는 설명글의 스타일 속성을 설정할 수 있습니다.
|
버튼(종류: 높이 고정으로 선택 시) 메인 배너 섹션 위에 출력되는 버튼의 스타일 속성을 설정할 수 있습니다.
|
네비게이션 메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지로 이동할 수 있는 버튼 유형을 설정할 수 있습니다.
|
전환 효과 메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지의 전환 효과를 설정할 수 있습니다.
|
4-4. 모바일 전용 메인 배너 섹션
메인 배너 섹션의 경우 모바일 전용 메인 배너 섹션 기능을 이용하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.
모바일 전용 메인 배너 섹션 권장 사이즈: 가로 기준 840 ~ 1,440px
[ 모바일 전용 메인 배너 설정하기 ]
Step 1. 모바일 뷰포트로 전환해 주세요.
디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 클릭하면 모바일 뷰포트로 전환이 됩니다. 단축키: Ctrl + Shift + M
Step 2. 메인 배너 섹션을 더블 클릭하고 모바일 전용 메인 배너 사용하기를 '사용'으로 클릭해 주세요.
Step 3. 패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드해 주세요.
사용하지 않을 이미지가 등록되어 있다면 해당 이미지 위에 마우스를 올린 후 휴지통 모양의 '삭제' 버튼을 클릭하여 삭제해 주세요.
[ 모바일 전용 메인 배너 섹션의 높이와 비율 설정하기 ]
메인 배너 섹션의 종류에 따라 모바일 전용 메인 배너 섹션의 높이와 비율 설정 방법이 다릅니다.
모바일 메인 배너 섹션의 종류를 확인하려면 디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해 주세요. 단축키: Ctrl + Shift + M
[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 확인하실 수 있습니다.
메인 배너 섹션의 종류가 높이 고정인 경우
모바일 전용 메인 배너 섹션의 높이를 데스크탑의 높이와 다르게 설정할 수 있습니다.
[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 높이 조정이 가능합니다.
메인 배너 섹션의 종류가 비율 고정인 경우
데스크탑에서 설정한 메인 배너 섹션의 비율을 동일하게 따라갑니다.
[데스크탑 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 비율 조정이 가능합니다.
메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 메인 배너 섹션의 크기 안내서를 확인해 주세요.
Last updated