메인 배너 섹션 활용하기

메인 배너 섹션은 제작된 페이지의 분위기나 첫인상에 매우 큰 영향을 끼칠 수 있는 부분 중 하나입니다. 활용법을 참고하여 더욱 멋진 메인 배너를 꾸며 보세요.

1. 메인 배너 섹션의 기본

1-1. 개별 설정 패널

메인 배너는 이미지와 동영상 타입 중 선택하여 페이지당 1개만 추가할 수 있습니다. 개별 설정 패널에서는 제목, 설명, 버튼, 링크 주소를 설정할 수 있습니다.

1-2. 이미지 메인 배너

메인 배너에 이미지를 추가한 모습입니다. 이미지는 1개 이상 추가할 수 있으며 옵션을 이미지마다 각각 다르게 설정할 수 있습니다.

1-3. 동영상 메인 배너

메인 배너에 비메오 주소로 동영상을 추가한 모습입니다. 이처럼 유튜브나 비메오 영상을 추가할 수 있습니다. 동영상 메인 배너는 페이지에 접속 시 자동으로 재생되며 음소거 기능을 제외한 나머지 옵션은 이미지형 메인 배너와 같습니다. 이미지와 다르게 하나의 영상만 추가할 수 있습니다.

1-4. 동영상 메인 배너 썸네일 사용하기

동영상 메인 배너는 모바일과 구형 브라우저(인터넷 익스플로러10 이하)에서 재생되지 않습니다. 이는 유튜브와 비메오의 API에서 해당 환경에 대한 자동재생 기능을 지원하지 않기 때문입니다. 영상이 재생되지 않을 때는 동영상의 기본 썸네일이 대신 보여지게 됩니다. 모바일과 구형 브라우저에서 원하는 썸네일 이미지를 사용하려면 위쪽의 예시를 참고하여 썸네일 이미지를 추가하세요.

2. 메인 배너와 머리글 합치기

2-1. 스타일 편집 - 메인 배너 섹션으로 이동합니다.

팔레트 모양의 바로 가기 아이콘을 클릭하면 빠르게 이동할 수 있습니다.

2-2. 종류 아래의 '머리글과 합치기'설정에 체크합니다.

2-3. 스타일을 설정할 수 있습니다.

머리글과 메인 배너가 합쳐지면 머리글의 글자색은 메인 배너의 스타일과 같아집니다.

3. 배경색과 투명도 활용하기

간혹 배경과 텍스트(제목, 설명)가 쉽게 어우러지지 않는 경우가 있습니다. 이는 배경의 컬러 톤이 다채롭거나 텍스트의 컬러와 비슷하면 텍스트의 가시성이 떨어지는 문제가 발생합니다. 이럴 때 배경 색상과 투명도를 활용하여 매우 간단하게 문제를 해결할 수 있습니다.

3-1. 배경 이미지와 텍스트의 색이 서로 충돌하여 텍스트의 가시성과 가독성이 떨어집니다.

밝은 톤 위주의 이미지이기 때문에 흰색 텍스트와 충돌합니다.

3-2. 스타일 편집 - 메인 배너 섹션으로 이동하여 적당한 배경 색상을 선택하고 불투명도를 조절합니다.

이 설정을 통해 배경이 약간 어두워지며 흰색 텍스트가 훨씬 잘 보이게 되었습니다. 배경 색상은 불투명도가 100%에 가까울수록 메인 배너 영역이 모두 배경색으로 덮입니다. 참고하셔서 가장 적당한 값으로 설정해보세요.

4. 비율 고정과 높이 고정

메인 배너 섹션은 가로 너비가 화면에 꽉 찬 형태에서 창의 크기에 따라 반응형으로 동작합니다. 그러나 배경이 특별히 한 눈에 모두 보여야 하는 경우에는 문제가 생길 수 있습니다. 이런 경우에는 고정 방식을 변경하여 해결할 수 있습니다.

4-1. [스타일 편집 > 메인 배너 섹션]에서 종류를 변경할 수 있습니다.

메인 배너의 크기를 계산하는 방식을 높이 고정과 비율 고정 중에 선택할 수 있습니다.

4-2. 높이 고정 예시

메인 배너가 보이는 창 안에서 얼마나 보여질 것인지 선택하는 방식입니다. 화면의 2/3, 절반, 2/3, 전체 화면 중 선택합니다.

4-3. 비율 고정 예시

창 크기에 따라 메인 배너의 비율을 항상 유지합니다. 텍스트를 포함하고 있는 배경을 사용할 때 창 크기에 따라 가려지는 부분 없이 항상 같은 비율을 유지할 수 있습니다. 이처럼 배경이 한눈에 보여야 할 경우 사용할 수 있습니다. 다양한 비율을 지원하고 있으며 원하는 비율에 맞춰 배경을 편집해서 등록하는 것이 가장 좋습니다.

유의할 점은 높이 고정일 때와 다르게 메인 배너에 제목과 설명을 입력할 수 없습니다. 이는 모바일 버전에서 글이 메인 배너 영역 밖으로 넘어가는 현상이 있을 수 있기 때문입니다. 참고해주세요!

관련된 안내서 보기

히어로 이미지

메인 배너 섹션의 크기

SixShop | 식스샵 안내서입니다.

SixShop | 식스샵 안내서입니다.