상단(헤더) 설정 주요기능 알아보기

상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다. 캠페이너스에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다.

이 섹션에서는 상단디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다.

우리는 페이지 본문을 디자인할 때,  메뉴를 추가한 다음, 위젯을 추가해 컨텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 단까지 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다.

1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션 처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 삽입됩니다. 다음으로 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운 단이 생겨나며, 왼쪽/가운데/오른쪽 모두 위젯을 추가하는 경우, 3개 단으로 설정됩니다.

2) 단 크기 조절하는 방법 단의 크기는 파란 점선을 통해 구분이 가능합니다. 각 단은 파란 세로 점선을 마우스로 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다.

페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있게 되었습니다. 이로써 더욱 차별적인 상단 디자인이 가능하게 되었으며, 특정 섹션은 마우스 스크롤을 해도 상단에 고정되도록 설정할 수 있는 기능도 추가되었습니다.

1) 상단 전용 섹션을 추가하는 방법 상단 영역에 마우스 커서를 놓고 우클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 [빈 섹션 추가]를 클릭하여 섹션을 여러 개로 늘릴 수 있습니다.

2) 섹션 단위 상단 스크롤 고정하기 상단 전용 섹션 좌측에 위치한 [핀] 아이콘을 클릭하는 것으로, 마우스 스크롤 시 원하는 섹션이 페이지 상단에 고정되도록 설정할 수 있습니다. 상단에 고정되길 원하는 섹션만 핀을 클릭해주세요. 모든 핀을 클릭하면 모든 섹션이 상단에 고정됩니다.

3) 상단 고정메뉴 설정하기 상단 섹션 고정과는 별개 디자인 스타일로 [상단 고정메뉴]를 만들 수도 있습니다. 기본 상단 디자인과는 다른 스타일로 상단 고정메뉴를 만들고 싶은 경우 사용할 수 있습니다.

상단 디자인을 위한 다양한 전용 위젯들을 사용해 상단 메뉴를 풍성하게 꾸밀 수 있습니다.

1) 위젯을 추가하는 방법 빈 상단 전용 섹션을 추가하면 처음에는 한 개 위젯만 추가가 가능합니다. 위젯 추가 후 필요하다면, 마우스 커서를 상단 섹션 위쪽 끄트머리에 놓으면, 플러스(+) 아이콘이 나타납니다. 이 플러스(+) 아이콘을 클릭하는 것으로 새로운 위젯을 추가할 수 있습니다.

왼쪽 끄트머리에 마우스 커서를 대면, 왼쪽 단에 위젯이 추가되며, 오른쪽 끄트머리에 오른쪽 단에 추가됩니다.

2) 위젯을 배치하는 방법 기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 단 역시 좌 또는 우로 드래그하여 변경이 가능합니다. 보다 간편하게 위젯이 위치한 단을 변경하려면, 위젯 보조 메뉴를 열고 '이동' 메뉴를 클릭해 왼쪽/가운데/오른쪽을 선택해주세요.

3) 위젯 디자인 변경 및 설정 방법 상단 전용 위젯 역시 고유의 설정을 가지고 있습니다. 설정 창을 열면 각 위젯이 가진 디자인 및 옵션을 변경할 수 있습니다.

상단이 본문 배경과 '겹치기'한 상태와 그렇지 않은 기본 상태의 상단 디자인을 다르게 꾸밀 수 있습니다.

기본 상단과 겹치기 한 상단 디자인 별도 관리 가능 디자인 모드 상단 중앙에 위치한 탭 메뉴를 클릭해 '기본 상단' 또는 '겹치기 한 상단' 디자인을 따로따로 관리할 수 있습니다.

모바일 사이트의 상단을 PC 상단과는 별개로 디자인할 수 있습니다.

1. 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다. 

2. 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.

3. 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.

4. PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.

5. 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.

6. 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.