시작에 앞서
상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다. 아임웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다.
이 섹션에서는 메이크디 상단 디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다.
Point 1. 최대 3단으로 나눌 수 있는 상단 섹션
우리는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 단까지 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다.
1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 삽입됩니다. 다음으로 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운 단이 생겨나며, 왼쪽/가운데/오른쪽 모두 위젯을 추가하는 경우, 3개 단으로 설정됩니다.
2) 단 크기 조절하는 방법
단의 크기는 파란 점선을 통해 구분이 가능합니다. 각 단은 파란 세로 점선을 마우스로 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있게 되었습니다. 이로써 더욱 차별적인 상단 디자인이 가능하게 되었으며, 특정 섹션은 마우스 스크롤을 해도 상단에 고정되도록 설정할 수 있는 기능도 추가되었습니다.
1) 상단 전용 섹션을 추가하는 방법
상단 영역에 마우스 커서를 놓고 우클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 [빈 섹션 추가]를 클릭하여 섹션을 여러 개로 늘릴 수 있습니다.
2) 섹션 단위 상단 스크롤 고정하기
상단 전용 섹션 좌측에 위치한 [핀] 아이콘을 클릭하는 것으로, 원하는 섹션을 상단에 고정시킬 수 있습니다. 상단에 고정되길 원하는 섹션만 핀을 클릭해주세요. 물론 모든 섹션 핀을 클릭하면 모든 섹션들을 고정시키는 것도 가능합니다.
3) 상단 고정메뉴 설정하기
상단 섹션 고정과는 별개 디자인 스타일로 [상단 고정메뉴]를 만들 수도 있습니다. 기본 상단 디자인과는 다른 스타일로 상단 고정메뉴를 만들고 싶은 경우 사용할 수 있습니다.
Point 3. 위젯들로 상단 메뉴를 더 다양하고, 자유롭게
상단 디자인을 위한 다양한 전용 위젯들이 추가되었으며, 이 전용 위젯들을 사용해 상단 메뉴를 풍성하게 꾸밀 수 있습니다.
1) 위젯을 추가하는 방법
빈 상단 전용 섹션을 추가하면 처음에는 한 개 위젯만 추가가 가능합니다. 위젯 추가 후 필요하다면, 마우스 커서를 상단 섹션 위쪽 끄트머리에 놓으면, 플러스(+) 아이콘이 나타납니다. 이 플러스(+) 아이콘을 클릭하는 것으로 새로운 위젯을 추가할 수 있습니다.
추가로 왼쪽 끄트머리에 마우스 커서를 대면, 왼쪽 단에 위젯이 추가되며, 오른쪽 끄트머리에 오른쪽 단에 추가됩니다.
2) 위젯을 배치하는 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 단 역시 좌 또는 우로 드래그하여 변경이 가능합니다. 보다 간편하게 위젯이 위치한 단을 변경하려면, 위젯 보조 메뉴를 열고 '이동' 메뉴를 클릭해 왼쪽/가운데/오른쪽을 선택해주세요.
3) 위젯 디자인 변경 및 설정 방법
상단 전용 위젯 역시 고유의 설정을 가지고 있습니다. 설정 창을 열면 각 위젯이 가진 디자인 및 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단이 본문 배경과 '겹치기'한 상태와 그렇지 않은 기본 상태의 상단 디자인을 다르게 꾸밀 수 있습니다.
기본 상단과 겹치기 한 상단 디자인 별도 관리 가능
디자인 모드 상단 중앙에 위치한 탭 메뉴를 클릭해 '기본 상단' 또는 '겹치기 한 상단' 디자인을 따로따로 관리할 수 있습니다.
Point 5. 모바일 상단 디자인 가능
구형 상단의 경우 모바일 버전은 별도 디자인할 수 있는 옵션이 매우 적었습니다. 그러나 신형 상단의 경우 PC 상단을 디자인하듯, 똑같이 편집이 가능해졌습니다.
1) 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
2) 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
3) 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.
4) PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.
5) 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.
6) 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.
솔루션 꿀팁&길라잡이
시작에 앞서
상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다. 아임웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다.
이 섹션에서는 메이크디 상단 디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다.
Point 1. 최대 3단으로 나눌 수 있는 상단 섹션
우리는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 단까지 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다.
1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 삽입됩니다. 다음으로 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운 단이 생겨나며, 왼쪽/가운데/오른쪽 모두 위젯을 추가하는 경우, 3개 단으로 설정됩니다.
2) 단 크기 조절하는 방법
단의 크기는 파란 점선을 통해 구분이 가능합니다. 각 단은 파란 세로 점선을 마우스로 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있게 되었습니다. 이로써 더욱 차별적인 상단 디자인이 가능하게 되었으며, 특정 섹션은 마우스 스크롤을 해도 상단에 고정되도록 설정할 수 있는 기능도 추가되었습니다.
1) 상단 전용 섹션을 추가하는 방법
상단 영역에 마우스 커서를 놓고 우클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 [빈 섹션 추가]를 클릭하여 섹션을 여러 개로 늘릴 수 있습니다.
2) 섹션 단위 상단 스크롤 고정하기
상단 전용 섹션 좌측에 위치한 [핀] 아이콘을 클릭하는 것으로, 원하는 섹션을 상단에 고정시킬 수 있습니다. 상단에 고정되길 원하는 섹션만 핀을 클릭해주세요. 물론 모든 섹션 핀을 클릭하면 모든 섹션들을 고정시키는 것도 가능합니다.
3) 상단 고정메뉴 설정하기
상단 섹션 고정과는 별개 디자인 스타일로 [상단 고정메뉴]를 만들 수도 있습니다. 기본 상단 디자인과는 다른 스타일로 상단 고정메뉴를 만들고 싶은 경우 사용할 수 있습니다.
Point 3. 위젯들로 상단 메뉴를 더 다양하고, 자유롭게
상단 디자인을 위한 다양한 전용 위젯들이 추가되었으며, 이 전용 위젯들을 사용해 상단 메뉴를 풍성하게 꾸밀 수 있습니다.
1) 위젯을 추가하는 방법
빈 상단 전용 섹션을 추가하면 처음에는 한 개 위젯만 추가가 가능합니다. 위젯 추가 후 필요하다면, 마우스 커서를 상단 섹션 위쪽 끄트머리에 놓으면, 플러스(+) 아이콘이 나타납니다. 이 플러스(+) 아이콘을 클릭하는 것으로 새로운 위젯을 추가할 수 있습니다.
추가로 왼쪽 끄트머리에 마우스 커서를 대면, 왼쪽 단에 위젯이 추가되며, 오른쪽 끄트머리에 오른쪽 단에 추가됩니다.
2) 위젯을 배치하는 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 단 역시 좌 또는 우로 드래그하여 변경이 가능합니다. 보다 간편하게 위젯이 위치한 단을 변경하려면, 위젯 보조 메뉴를 열고 '이동' 메뉴를 클릭해 왼쪽/가운데/오른쪽을 선택해주세요.
3) 위젯 디자인 변경 및 설정 방법
상단 전용 위젯 역시 고유의 설정을 가지고 있습니다. 설정 창을 열면 각 위젯이 가진 디자인 및 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단이 본문 배경과 '겹치기'한 상태와 그렇지 않은 기본 상태의 상단 디자인을 다르게 꾸밀 수 있습니다.
기본 상단과 겹치기 한 상단 디자인 별도 관리 가능
디자인 모드 상단 중앙에 위치한 탭 메뉴를 클릭해 '기본 상단' 또는 '겹치기 한 상단' 디자인을 따로따로 관리할 수 있습니다.
Point 5. 모바일 상단 디자인 가능
구형 상단의 경우 모바일 버전은 별도 디자인할 수 있는 옵션이 매우 적었습니다. 그러나 신형 상단의 경우 PC 상단을 디자인하듯, 똑같이 편집이 가능해졌습니다.
1) 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
2) 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
3) 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.
4) PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.
5) 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.
6) 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.