머리글 메뉴 노출 형태를 선택_혜조(완)

• 업로드 전 체크리스트

• 작업자: 김혜조

• 담당 제품 관리자: 최은정님

• 목적: 기능 배포 전 안내서 업데이트, 정보 공유 목적

• 기능 관련 노션 링크

• 노출 위치 링크

• 틀 작업 후 동호님 공유

• 70% 작업 후 제품 관리자 공유

• 스펠러 확인

• 하위 주소:

• 업로드 전 서운팀 기능 공유

• 업로드 후 체크리스트

• 기존 안내서에 변경할 링크 있는지 확인

• 업로드 후 서운팀 공유

• 업로드 후 제품 관리자 공유

• 업로드 후 링크 확인 및 글자 씹힘 없는지 확인

• 업데이트 기능별 문서 및 깃북 엑셀 업로드

🎯 위치: 5-2 머리글 설정하기 > 머리글 공통 스타일 설정 위치 교체

[ 머리글 - 공통 스타일 설정 ]

[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 머리글 공통 스타일 설정이 가능합니다.

항목

종류 뷰포트에 따라 최적화된 머리글 사용 데스크탑으로 접속 시 상단에 펼쳐진 메뉴가 노출되고, 모바일로 접속 시 '≡' 아이콘 형태의 메뉴가 노출되고 메뉴 아이콘을 클릭하면 전체 메뉴를 확인할 수 있습니다. 모바일 머리글 사용 데스크탑으로 접속 시에도 모바일과 동일하게 '≡' 아이콘 형태의 메뉴가 노출되고 메뉴 아이콘을 클릭하면 전체 메뉴를 확인할 수 있습니다. 이 경우 모바일에서의 머리글 배치는 데스크탑에서 설정한 값과 동일하게 설정됩니다.

배치 종류에 따라 머리글에 포함된 요소들의 배치 유형을 선택할 수 있습니다. 뷰포트에 따라 최적화된 머리글 사용 시 한줄 - 왼쪽 로고 1 한줄 - 왼쪽 로고 2 한줄 - 왼쪽 로고 3 한줄 - 가운데 로고 한줄 - 오른쪽 로고 두줄 - 왼쪽 로고 두줄 - 가운데 로고 모바일 머리글 사용 시 가운데 로고 - 왼쪽 메뉴 가운데 로고 - 오른쪽 메뉴 왼쪽 로고 - 왼쪽 메뉴 왼쪽 로고 - 오른쪽 메뉴

배경 머리글의 배경 색상과 불투명도를 설정할 수 있습니다.

여백 머리글의 위아래 여백을 설정할 수 있습니다.

경계선 넣기 사용 [✔︎] 하면 지정한 색상으로 머리글 하단에 얇은 경계선을 넣어줍니다.

스크롤할 때 화면 스크롤할 때 머리글 메뉴를 어떻게 보일지 설정할 수 있습니다. 변화 없음 화면 상단에 고정 화면을 이동해도 머리글이 화면 최상단에 고정 노출됩니다.

🎯 위치: 5-2 머리글 설정하기 > 메뉴 - 공통 스타일 설정 하단에 추가

[ 모바일 메뉴 - 공통 스타일 설정 ]

머리글의 종류를 '모바일 머리글 사용'으로 선택한 상태에서 머리글 - 모바일 메뉴가 활성화됩니다.

항목

앞 배경 모바일 메뉴의 색상과 불투명도를 설정할 수 있습니다.

뒷 배경 모바일 메뉴 뒷 배경의 색상과 불투명도를 설정할 수 있습니다.

로고 상점 이름 색상, 상점 이름 크기, 이미지 너비를 설정할 수 있습니다.

로그인 로그인의 색상과 크기를 설정할 수 있습니다.

상품 검색 상품 검색의 색상과 크기를 설정할 수 있습니다.

메뉴 메뉴의 색상과 크기를 설정할 수 있습니다. 단, 메인 배너 섹션이 머리글과 합치기 설정이 되어 있는 경우 메뉴의 색상은 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]의 스타일을 따라갑니다. 밝은: 흰색 어두운: 검은색

아이콘 아이콘의 색상과 크기를 설정할 수 있습니다.

🎯 위치: 5-2 머리글 설정하기 > 메뉴 - 공통 스타일 설정에 교체

[ 메뉴 - 공통 스타일 설정 ]

• 뷰포트에 따라 최적화된 머리글 사용 시

머리글의 종류를 '뷰포트에 따라 최적화된 머리글 사용'을 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 공통 스타일 설정이 가능합니다.

항목

색상 메뉴 항목의 색상을 설정할 수 있습니다. 기본 기본 상태일 때 메뉴의 색상을 설정할 수 있습니다. 마우스 오버 메뉴 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다. 선택 선택된 메뉴 항목의 색상을 설정할 수 있습니다.

간격 메뉴 항목 사이의 간격을 설정할 수 있습니다.

글자 메뉴 항목의 글꼴, 굵기, 크기, 자간을 설정할 수 있습니다.

• 모바일 머리글 사용 시

머리글의 종류를 '모바일 머리글 사용'을 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 아이콘(≡)의 색상만 선택이 가능합니다.

항목

색상 메뉴 아이콘(≡)의 색상을 설정할 수 있습니다. 기본 기본 상태일 때 메뉴의 색상을 설정할 수 있습니다. 마우스 오버 메뉴 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다. 선택 선택된 메뉴 항목의 색상을 설정할 수 있습니다.

🎯 위치: 4. 모바일 메뉴 설정하기 교체

모바일 뷰포트 편집 창에서 좌측 하단 메뉴 아이콘(≡) 클릭 > 스타일 편집 클릭 > 모바일 메뉴를 클릭하여 모바일 메뉴를 설정해볼 수 있습니다.

데스크탑에서 머리글의 종류를 '모바일 머리글 사용'을 선택한 상태에서는 모바일 메뉴의 설정이 데스크탑에도 적용됩니다. 데스크탑에서 머리글의 종류를 '뷰포트에 따라 최적화된 머리글 사용'을 선택한 상태에서는 모바일 메뉴를 데스크탑 버전과 별도로 설정할 수 있습니다.

🤔 페이지와 메뉴 FAQ

Q. 모바일 메뉴 설정을 했더니 하위 메뉴가 보이지 않습니다.

머리글의 종류를 '모바일 메뉴 사용'으로 선택한 경우 상위 메뉴 클릭해야 하위 메뉴를 확인할 수 있습니다. 머리글의 종류는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 변경할 수 있습니다.