Studio 에디터: 메뉴 디자인하기

4 분 분량

Studio 에디터에서는 메뉴의 모양과 느낌을 가장 작은 세부 사항까지 사용자 지정할 수 있습니다. 속성 패널에 액세스해 각 개별 상태(예: 마우스오버, 선택)별로 메뉴를 디자인하고, 채우기 색상, 텍스트 스타일, 음영 등의 설정을 조정하세요.

이 도움말에서 각 메뉴 유형을 디자인하는 방법을 확인하세요.

마우스오버 인터랙션을 사용 중이라면:

메뉴에 마우스오버 인터랙션을 추가할 경우, 태블릿 및 모바일 기기에서는 표시되지 않습니다. 모든 중단점에 표시하려면 클릭 인터랙션을 추가할 수 있습니다.

속성 패널에서 세 가지 상태(기본, 마우스오버, 클릭)별로 가로 메뉴를 디자인할 수 있어 방문자가 보다 상호 작용이 가능한 탐색 경험을 할 수 있습니다.

선택한 프리셋에 따라 사용 가능한 옵션을 사용해 메뉴를 사이트의 디자인과 분위기와 어울리게 만들어 보세요. 예를 들어, 일부 가로 메뉴에는 사용자 지정할 수 있는 버튼 또는 구분선이 포함됩니다.

방문자가 자신이 어떤 페이지에 있는지 항상 알 수 있도록 두 가지 상태(기본 및 선택)별로 세로 메뉴를 디자인할 수 있습니다. 메뉴, 하위 메뉴 및 화살표(해당되는 경우)의 채우기 색상을 변경하고 텍스트, 테두리, 음영 등과 같은 기타 영역을 사용자 지정하세요.

참고:

사용 가능한 설정은 요소 추가 패널에서 선택한 특정 메뉴에 따라 다릅니다.

도움말:

세로 메뉴를 페이지에 고정해 방문자가 위아래로 스크롤 시 위치를 유지하도록 설정할 수 있습니다.

속성 패널에서 프리셋을 선택해 앵커 메뉴에 표시할 내용을 선택하세요. 텍스트, 버튼 또는 이 둘을 결합한 프리셋을 표시할 수 있습니다. 하나의 프리셋으로 방문자가 특정 영역으로 스크롤할 때 앵커 이름을 표시할 수도 있습니다.

방문자가 현재 보고 있는 앵커를 명확하게 표시할 수 있도록 기본 및 클릭 상태의 디자인을 사용자 지정할 수 있습니다.

앵커 메뉴를 선택합니다.
에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
디자인 섹션으로 스크롤합니다.
상단에서 프리셋을 선택합니다.
기본 또는 클릭 중 관련 상태를 선택합니다.
사용 가능한 옵션을 사용해 메뉴를 디자인합니다.
- 채우기 색상 및 투명도: 메뉴 또는 하위 메뉴의 배경 색상을 변경하고 원하는 대로 투명도를 조정합니다. 디자인에 화살표가 포함된 경우 여기에서 색상을 지정할 수 있습니다.
- 텍스트: 메뉴 및 하위 메뉴 아이템의 스타일과 서식을 조정합니다.
- 간격: 메뉴 아이템 사이의 세로 간격과 텍스트 및 하위 메뉴 간격(px)을 조정합니다.

햄버거 메뉴에는 메뉴, 컨테이너, 메뉴를 열고 닫는 아이콘 등 필요에 따라 디자인할 수 있는 여러 요소가 포함되어 있습니다.

메뉴 아이콘

메뉴 컨테이너

실제 메뉴

"메뉴 닫기" 버튼

페이지 메뉴