Studio 에디터: 새 메뉴 레이아웃 조정하기
5 분
페이지 메뉴
- 가로 메뉴 레이아웃 조정하기
- 세로 메뉴 레이아웃 조정하기
- 햄버거 메뉴 레이아웃 조정하기
최신 메뉴 구성 요소를 사용하면 각 개별 화면 중단점에 대한 단일 메뉴의 레이아웃을 변경해 화면 크기에 맞게 클라이언트의 사이트를 더 쉽게 디자인할 수 있습니다.
메뉴 유형(레이아웃)을 선택한 후에는 사용자 지정 옵션을 사용해 원하는 대로 정확하게 표시되도록 하세요.
가로 메뉴 레이아웃 조정하기
가로 탐색 바 메뉴에는 다양한 옵션이 있어, 레이아웃을 창의적으로 완전히 제어할 수 있습니다. 오버플로우 아이템이 표시되는 방법을 선택하고 드롭다운 아이콘을 활성화하는 등의 작업을 수행할 수 있습니다.
가로 메뉴 레이아웃을 조정하려면:
- 에디터에서 메뉴를 클릭합니다.
- 레이아웃
아이콘을 클릭합니다.
- 메뉴 유형 아래에서 탐색 바를 클릭합니다.
- 회전 방향 드롭다운에서 가로를 선택합니다.
- 옵션을 사용해 레이아웃을 조정합니다.
오버플로우 아이템
구분선 및 여백
드롭다운 아이콘
방향 및 정렬
세로 메뉴 레이아웃 조정하기
세로 메뉴는 작은 화면 크기에서 잘 어울리므로 태블릿 화면 중단점에 적합합니다. 간격 및 방향 등과 같은 옵션을 조정해 모든 것이 정렬되도록 하고 사이트의 구조를 보완하세요.
세로 메뉴 레이아웃을 조정하려면:
- 에디터에서 메뉴를 클릭합니다.
- 레이아웃
- 메뉴 유형 아래에서 탐색 바를 클릭합니다.
- 회전 방향 드롭다운에서 세로를 선택합니다.
- 다음 옵션을 사용해 레이아웃을 사용자 지정합니다.
- 구분선: 구분선 추가 버튼을 선택해 이 옵션을 활성화 또는 비활성화하고 간격을 조정합니다.
- 활성: 구분선과 메뉴 아이템 사이의 간격을 조정합니다.
- 비활성: 아이템 사이의 간격을 조정합니다.
- 여백: 옵션을 사용해 메뉴 및 아이템 주변의 여백을 더 크게 또는 더 작게 설정합니다.
- 드롭다운 아이콘 간격: 드롭다운 아이템과 아이콘 사이의 간격을 조정합니다.
- 방향: 메뉴를 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 표시하도록 설정합니다.
- 정렬: 메뉴 아이템을 컨테이너의 왼쪽, 가운데 또는 오른쪽으로 정렬하거나 양쪽에 설정합니다.
- 구분선: 구분선 추가 버튼을 선택해 이 옵션을 활성화 또는 비활성화하고 간격을 조정합니다.
참고:
드롭다운 아이콘 간격 옵션은 다음과 같은 경우에만 표시됩니다.
- 가로 레이아웃에서 드롭다운 아이콘을 활성화했습니다(세로 메뉴에서는 드롭다운 아이콘을 활성화 또는 비활성화할 수 없습니다).
- 메뉴가 컨테이너의 왼쪽, 가운데 또는 오른쪽으로 정렬됩니다.
햄버거 메뉴 레이아웃 조정하기
햄버거 메뉴를 사용하면 메뉴 아이콘에 표시하는 항목(텍스트, 아이콘 또는 둘 다)을 선택하고 정렬을 설정할 수 있습니다.
메뉴 아이템을 가로 또는 세로로 표시할지 여부를 선택하고 설정을 조정할 수도 있습니다.
햄버거 메뉴의 레이아웃을 조정하려면:
- 에디터에서 메뉴를 클릭합니다.
- 레이아웃
- 메뉴 유형 아래에서 햄버거를 클릭합니다.
- 조정하고자 하는 메뉴 부분에 따라 레이아웃 패널을 종료하거나, 유지합니다.
- 메뉴 아이콘:
- 레이아웃 패널에 머무릅니다.
- 다음 옵션을 사용해 레이아웃을 사용자 지정합니다.
- 표시할 내용 선택: 햄버거 메뉴 버튼에 텍스트, 아이콘 또는 둘 다를 표시할지 여부를 선택합니다.
참고: 메뉴에 아무것도 표시하지 않도록 선택할 수도 있습니다. 하지만, 방문자가 메뉴를 찾을 수 있도록 다른 옵션 중 하나를 선택하는 것이 좋습니다. - 정렬: 메뉴 아이콘을 컨테이너의 왼쪽, 가운데 또는 오른쪽으로 정렬합니다.
- 표시할 내용 선택: 햄버거 메뉴 버튼에 텍스트, 아이콘 또는 둘 다를 표시할지 여부를 선택합니다.
- 메뉴 자체:
- 레이아웃 패널을 종료합니다.
- 메뉴 편집을 클릭합니다.
- 메뉴 아이템을 선택합니다.
- 레이아웃
- 아이템을 가로 또는 세로로 표시할지 여부를 선택하고 옵션을 사용해 조정합니다.
- 메뉴 아이콘:
가로
세로
