사용자 지정 CSS

직접 CSS를 추가해 메뉴의 모양을 세밀하게 조정합니다.

사용 가이드 모든 요금제 1 분 소요

설정, 글꼴, 색상으로 원하는 것을 할 수 없을 때 스타일시트 / CSS를 사용하세요. 특별한 호버 효과, 항목 하나의 글꼴 크기, 작은 테마 수정 등이 해당합니다. CSS는 메뉴와 함께 저장되며 게시할 때 스토어에 추가됩니다.

사용자 지정 CSS 추가하기

고급 탭 열기

메뉴 편집기에서 왼쪽 사이드바의 고급 아이콘(</>)을 클릭합니다 (1).

고급 탭(1)을 열고 스타일시트 / CSS(2)에 CSS를 입력합니다.
CSS 추가하기

스타일시트 / CSS (2)에 CSS를 입력하거나 붙여 넣어 //enter css custom here 자리 표시자를 대체합니다.
저장 및 게시하기

저장을 클릭한 다음 게시를 클릭합니다. 스토어를 강력 새로 고침해 결과를 확인하세요.

올바른 요소 지정하기

CSS는 그대로 페이지에 추가되며 이 메뉴에만 한정되지 않으므로 선택자의 범위를 지정하세요:

모든 메뉴: .gm-menu로 시작합니다.
메뉴 하나: .gm-menu-<ID>로 시작합니다. ID를 찾으려면 스토어에서 메뉴를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하세요.
항목 하나: 항목 설정의 고급 섹션에서 추가 클래스 이름을 지정한 다음(메뉴 항목 편집 참고) 그 클래스를 사용합니다.

예를 들어 추가 클래스 이름이 sale-item인 항목을 굵은 빨간색으로 만들려면:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

고급 탭에는 메뉴를 선택한 시장으로 제한하는 시장별 사용 가능 여부도 있습니다. 시장별 메뉴 표시를 참고하세요.

문제 해결

CSS가 적용되지 않아요

저장한 후 게시를 클릭했는지 확인하세요.
앱 자체 스타일은 !important를 자주 사용하므로 규칙에도 필요할 수 있습니다.
} 누락 같은 오타를 확인하세요. 오류 하나로 그 뒤의 규칙이 모두 작동하지 않을 수 있습니다.

도움이 되었나요?