메뉴 스타일: 타입·폰트·링크 효과

헤더 메뉴는 항목만 채운다고 끝나지 않습니다. 글꼴과 색이 사이트 분위기에 맞아야 하고, 휴대폰에서는 어떤 모양으로 열리는지도 정해야 합니다. 에디터에서는 메뉴 요소를 선택하면 나타나는 메뉴 스타일 구역에서 이 모두를 한곳에서 바꿉니다. 이 글에서는 메뉴 타입, 글꼴, 색상, 링크 효과를 차례로 살펴봅니다. 메뉴 항목을 만들고 연결하는 방법은 별도 글에서 다룹니다.

1. 메뉴 스타일은 어디에 있나요

헤더 템플릿이 들어 있는 페이지에서 메뉴 항목 글자를 두 번 누르면 왼쪽에 메뉴 편집 패널이 열립니다. 패널을 아래로 내리면 항목 목록과 새 항목 추가 아래에 메뉴 스타일 구역이 이어집니다. 메뉴 요소를 선택하지 않은 상태에서는 이 구역이 나타나지 않습니다. 여기서 바꾸는 값은 선택한 메뉴 요소에 적용되며, 변경하면 캔버스의 헤더에 바로 반영됩니다.

2. 글꼴, 크기, 굵기

글꼴 목록에서 글꼴을 고르면 하위 메뉴를 포함한 메뉴 항목 전체에 한꺼번에 적용됩니다. 기본값은 테마 폰트 사용 (상속)이며, 목록은 에디터의 다른 글자 설정과 같은 글꼴 모음입니다. 바로 아래 크기 슬라이더는 10px에서 32px까지, 굵기는 가늘게 300부터 아주 굵게 800까지 고를 수 있습니다.

3. 텍스트 색상과 배경 색상

텍스트 색상과 배경 색상의 색 칸을 누르면 색상 선택 창이 열립니다. 색을 직접 고르거나 입력 칸에 #1f2937 같은 색 코드를 적고 Enter를 누르면 됩니다. 텍스트 색상은 메뉴의 모든 링크에, 배경 색상은 헤더 막대와 모바일 메뉴 목록 배경에 함께 적용됩니다. 어두운 배경에는 밝은 글자를 짝지어 주세요.

4. 링크 효과: 마우스를 올렸을 때

링크 효과는 마우스 오버와 포커스 두 탭으로 나뉩니다. 마우스 오버 탭에서 정한 모양은 방문자가 메뉴 항목 위에 마우스를 올렸을 때 나타나고, 포커스 탭은 키보드로 링크를 선택했을 때 나타납니다. 두 탭 모두 같은 항목을 가집니다.

• 글자색: 마우스를 올렸을 때의 글자 색입니다. 옆의 해제를 누르면 지정이 사라집니다.
• 굵기: 기본은 변경 안 함이며, 300~800 중에서 고를 수 있습니다.
• 기울임, 밑줄: 체크하면 해당 모양이 더해집니다.
• 배경색: 링크 뒤에 깔리는 색이며, 역시 해제로 지울 수 있습니다.

값이 하나라도 정해진 탭에는 이름 옆에 작은 점이 표시되어, 어느 탭을 설정했는지 한눈에 알 수 있습니다. 아래 화면은 글자색과 밑줄을 정한 뒤 오늘의 빵 위에 마우스를 올린 모습입니다. 이 효과도 하위 메뉴를 포함한 메뉴 전체에 함께 적용됩니다.

5. 메뉴 타입과 햄버거 메뉴

메뉴 타입은 햄버거 버튼을 눌렀을 때 메뉴가 열리는 방식입니다.

• 드롭다운 (기본): 헤더 아래로 항목 목록이 펼쳐집니다.
• 좌측 드로어, 우측 드로어: 화면 옆에서 메뉴 패널이 열립니다. 드로어를 고르면 드로어 폭 (px) 칸이 나타나며 기본값은 280입니다.

햄버거 메뉴 표시의 데스크탑, 태블릿, 모바일 체크 칸은 어느 화면 크기에서 가로 메뉴 대신 햄버거 버튼을 보여 줄지 정합니다. 처음에는 모바일만 체크되어 있습니다. 아래 화면은 좌측 드로어를 고르고 데스크탑에도 체크한 상태로, 헤더에는 햄버거 버튼만 남았습니다.

방문자가 햄버거 버튼을 누르면 드로어가 열리고, 앞에서 정한 글꼴과 색이 그대로 적용된 항목이 나옵니다. 헤더에 있던 무료 시작 같은 버튼도 목록 아래에 함께 들어갑니다.

6. 이렇게 활용해 보세요

• 사이트의 본문 글꼴과 메뉴 글꼴을 같은 계열로 맞춰 보세요. 헤더만 따로 놀지 않아 한결 정돈되어 보입니다.
• 헤더 배경을 어둡게 바꿨다면 텍스트 색상과 마우스 오버 글자색을 함께 정해 두세요. 강조색 하나로 통일하면 어느 항목이 눌리는지 분명해집니다.
• 메뉴 항목이 많은 사이트는 데스크탑에도 햄버거를 켜고 우측 드로어로 열어 헤더를 간결하게 유지해 보세요.

7. 알아 두실 점

• 메뉴 항목의 이름과 순서는 사이트 전체가 함께 쓰지만, 이 글의 스타일은 선택한 메뉴 요소에 정해집니다. 헤더 템플릿을 넣은 페이지마다 같은 값을 맞춰 주세요.
• 스타일을 바꾼 뒤에는 상단 저장을 눌러 페이지에 남겨 두세요. 저장하고 다시 열어도 글꼴, 색상, 링크 효과, 메뉴 타입이 그대로 유지됩니다.
• 메뉴 패널은 웹사이트에 속한 페이지에서만 쓸 수 있습니다.

글꼴과 색을 한 번 정해 두면 헤더 전체가 같은 분위기로 정리됩니다. 헤더 템플릿 넣기와 캔버스에 메뉴 적용은 별도 글에서 함께 확인해 보세요.