Studio 에디터: 메뉴 드롭다운 디자인하기 | 도움말 센터

Studio 에디터: 메뉴 드롭다운 디자인하기

6 분 분량

드롭다운을 추가하고 설정했다면, 원하는 대로 디자인을 조정할 수 있습니다. 컨테이너 및 메뉴의 디자인과 정렬을 변경해 클라이언트를 위한 사용자 지정 디자인을 만들고 브랜드를 강화할 수 있습니다.

시작하기 전:

드롭다운은 Studio 에디터의 새 메뉴에서만 추가할 수 있습니다. 이전 메뉴 환경이 있는 경우, 하위 메뉴를 추가하고 메가 메뉴를 추가할 수 있습니다.

다음 도움말을 참고하세요.

드롭다운 레이아웃 조정하기

메뉴 유형(탐색 바, 햄버거 등)에 따라 레이아웃 패널을 사용해 드롭다운의 표시 또는 너비를 설정할 수 있습니다. 메인 메뉴 디자인에 맞게 간격 및 정렬을 조정할 수도 있습니다.

드롭다운 레이아웃을 조정하려면:

에디터로 이동합니다.
메뉴 / 메뉴 버튼을 클릭합니다.
(햄버거 메뉴) 메뉴 편집을 클릭해 햄버거 편집 모드를 열고 메뉴를 선택합니다.
레이아웃 아이콘을 클릭합니다.
드롭다운 탭을 선택합니다.
옵션을 사용해 레이아웃을 조정합니다.
- 컨테이너 너비: 드롭다운 컨테이너의 너비를 선택하고 원하는 대로 조정합니다.
  - 늘이기: 드롭다운 컨테이너의 너비는 화면의 전체 너비와 동일합니다. 여백(px)을 설정해 너비를 조정할 수 있습니다.
  - 메뉴에 맞춤: 드롭다운의 너비가 메인 상위 메뉴와 동일합니다.
  - 콘텐츠 허그: 컨테이너가 드롭다운 아이템을 "포괄"합니다. 메뉴를 메인 메뉴의 왼쪽, 가운데 또는 오른쪽에 정렬할지 여부를 선택할 수 있습니다.
- 아이템 표시: 드롭다운 메뉴 아이템을 접을지 또는 항상 표시할지 여부를 선택합니다.
- 컨테이너 위 간격: 드롭다운과 메인 메뉴 사이의 간격을 더 크게 또는 더 작게 설정합니다.
- 단 수: 드롭다운 메뉴에 표시할 단 수를 선택합니다.
- 간격: 드롭다운 메뉴에서 아이템의 간격을 조정합니다. 하위 아이템을 추가한 경우, 하위 아이템 사이의 간격을 변경할 수도 있습니다.
  - 아이템 간격: 드롭다운 아이템 사이의 가로 및 세로 간격을 입력합니다.
  - 하위 아이템 간격: 하위 아이템 사이의 간격을 더 작게 또는 크게 설정합니다.
  - 하위 아이템 위 간격: 메뉴에서 하위 아이템 위 간격을 선택합니다.
- 여백: 드롭다운의 각 부분에 대한 여백을 필요에 맞게 조정합니다.
  - 아이템 여백: 드롭다운 메뉴 아이템 주위 공간을 더 작게 또는 크게 만듭니다.
  - 하위 아이템 여백: 드롭다운 메뉴에서 하위 아이템 주위의 간격을 조정합니다.
  - 컨테이너 여백: 드롭다운 컨테이너 주위 공간을 필요한 만큼 작게 또는 크게 설정합니다.
- 정렬: 드롭다운 아이템 및 하위 아이템을 컨테이너의 왼쪽, 오른쪽 또는 가운데로 정렬합니다.

메뉴 레이아웃 패널의 드롭다운 탭입니다. 커서가 단 슬라이더를 드래그하고 있습니다.

참고:

표시되는 옵션은 메뉴 유형(탐색 바 또는 햄버거) 및 선택한 방향(가로 또는 세로)에 따라 다릅니다.

드롭다운 디자인 사용자 지정하기

드롭다운의 각 부분을 디자인해 컨테이너에서 아이템 및 하위 아이템에 이르기까지 메인 메뉴의 디자인과 분위기를 보완할 수 있습니다.

드롭다운 디자인을 사용자 지정하려면:

에디터로 이동합니다.
메뉴 / 메뉴 버튼을 클릭합니다.
(햄버거 메뉴) 메뉴 편집을 클릭해 햄버거 편집 모드를 열고 메뉴를 선택합니다.
에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
디자인 섹션으로 스크롤합니다.
디자인할 요소를 선택합니다.
- 드롭다운 컨테이너: 컨테이너를 사용자 지정합니다.
- 드롭다운 메뉴 컨테이너: 드롭다운 메뉴 아이템을 표시하는 컨테이너의 디자인을 조정합니다.
- 드롭다운 아이템
- 드롭다운 하위 아이템
(드롭다운 아이템 / 드롭다운 하위 아이템) 기본, 마우스오버 또는 현재 페이지 중 해당 상태를 선택합니다.
사용 가능한 옵션을 사용해 드롭다운을 디자인합니다.
- 배경 채우기: 드롭다운의 배경 색상을 변경하거나 시선을 사로잡는 그라데이션을 추가합니다. 투명도를 조정하고 디자인 요구 사항에 맞게 여러 레이어를 추가할 수 있습니다.
- 테두리: 드롭다운 컨테이너 테두리의 너비와 색상을 조정합니다.
- 모서리: 반경을 조정해 드롭다운의 모서리를 더 둥글게 또는 각지게 만듭니다.
- 텍스트: 드롭다운 아이템 및 하위 아이템 텍스트의 스타일 및 서식을 조정합니다.
- 음영: 드롭다운에 음영을 추가하고 각도, 색상, 거리 등을 사용자 지정합니다.