이 텍스트는 자동으로 번역되었습니다. 영어 원문을 보려면 여기를 클릭하세요.
메뉴를 만들고 링크를 추가한 후에는 메뉴의 모양을 사용자 정의하고 싶을 수 있습니다. 이 가이드에서는 메뉴 디자인에 자주 적용하는 변경 사항을 다룹니다.
이 가이드에서
문의 사항이 있으십니까?
지원 도우미에게 물어보기사이트 편집기 테마에서는 알림판의 디자인 아래에 있는 편집기를 통해 사이트의 메뉴 디자인을 완전히 사용자 정의할 수 있습니다. 클래식 테마에서는 알림판의 디자인 아래에 있는 사용자 정의에서 제한된 메뉴 디자인 옵션만 제공됩니다.
이 가이드에서 어떤 섹션을 따라야 하는지 확인하려면 워드프레스닷컴 알림판을 방문하여 왼쪽의 디자인 아래를 확인하세요. 편집기가 보이면 이 가이드의 사이트 편집기 섹션을 따르세요. 그렇지 않으면 사용자 정의 기능 안내를 따르세요.
테마에서 사이트 편집기를 사용하는 경우(즉 알림판에 디자인 → 편집기가 있는 경우) 다음 단계에 따라 탐색 블록 설정에서 메뉴 디자인을 제어할 수 있습니다.
- 사이트의 알림판에서 디자인 → 편집기로 이동합니다.
- 템플릿을 선택하고 홈 또는 첫 페이지 등 메뉴가 포함된 템플릿을 선택합니다.
- 화면 왼쪽 상단에서 목록 보기를 엽니다(가로줄 3개가 겹쳐진 모양의 아이콘입니다).
- 목록 보기에서 탐색 블록을 선택합니다.
- 탐색 블록이 보이지 않으면 새로 만들 수 있습니다.
- 화면 오른쪽에서 탐색 블록 설정을 확인합니다.
- 설정 아이콘 또는 스타일 아이콘 아래에서 탐색 블록의 스타일을 사용자 정의합니다.
- 변경사항을 저장하려면 저장 버튼을 클릭합니다.
각 설정의 사용 방법은 탐색 블록 설정 가이드에서 확인할 수 있으며, 다음 내용이 포함됩니다.
- 색상, 타이포그래피, 규격 등 탐색 블록 스타일.
- 정렬, 방향, 메뉴 표시 방식 등 탐색 블록 레이아웃 설정.
이 비디오에서는 탐색 블록에 접근하여 설정과 스타일을 변경하는 방법을 보여줍니다. 이 기능은 완전히 사용자 정의 가능한 사이트 편집기 테마에서 사용할 수 있습니다. 재생 버튼을 클릭한 후 오른쪽 하단의 컨트롤을 사용하여 비디오 속도를 조절할 수 있습니다.
이 섹션은 AI 웹사이트 빌더(모든 유료 요금제)로 만든 사이트 또는 워드프레스 에이전트를 활성화한 사이트(모든 유료 요금제)에 해당합니다. 화면 하단의 AI 아이콘(별 네 꼭짓점 모양)을 클릭하면 워드프레스 에이전트가 열립니다.
워드프레스 에이전트는 메뉴의 모양과 동작을 직접 변경할 수 있습니다. 다음과 같은 요청을 할 수 있습니다.
- “탐색 메뉴 색상을 브랜드에 맞게 변경해 주세요.”
- “드롭다운 메뉴가 마우스 오버 대신 클릭 시 열리도록 설정해 주세요.”
- “모든 화면 크기에서 메뉴를 햄버거 메뉴로 표시해 주세요.”
- “연락처 메뉴 항목에 ‘featured-link’라는 CSS 클래스를 추가해 주세요.”
모든 사이트 편집기 테마에서 메뉴 위치를 이동할 수 있습니다. 사이트 편집기 테마는 디자인의 편집기를 사용하여 메뉴 위치를 포함한 레이아웃 전체를 제어할 수 있게 해줍니다.
사이트 편집기 테마에서는 메뉴 위치를 완전히 사용자 정의할 수 있지만, 먼저 원하는 위치에 메뉴가 표시되는 테마를 찾아보는 것이 좋습니다. 테마 전환에 대해 자세히 알아보세요.
이미 사용하려는 사이트 편집기 테마를 선택했고 메뉴 표시 위치를 변경하고 싶다면 다음과 같은 옵션이 있습니다.
- 탐색 블록을 선택하고 이동하는 방법을 알아보거나 비디오 튜토리얼로 건너뛰세요.
- 템플릿에 새 메뉴를 추가합니다.
- 페이지 목록 블록을 사용하여 개별 페이지나 글에 사이트 탐색을 추가합니다.
- 목차 블록을 사용하여 페이지나 글 내에 탐색을 추가합니다.
알림판의 디자인 아래에 편집기가 없는 테마를 사용 중이라면 완전히 사용자 정의 가능한 사이트 편집기 테마를 살펴보세요.
데스크톱 화면의 메뉴는 일반적으로 한 줄에 텍스트 링크 목록으로 표시됩니다. 작은 화면(태블릿과 모바일 장치)의 경우 모바일 방문자가 쉽게 누를 수 있는 방식으로 모든 텍스트 링크를 표시할 만한 공간이 부족할 수 있습니다.
그 대신에 “오버레이” 또는 “햄버거” 메뉴(가로줄 3개가 햄버거와 비슷하기 때문에 정해진 이름)라고 하는 버튼 뒤로 메뉴 항목이 축소되는 것이 일반적입니다.
사이트 편집기의 탐색 블록 설정에서 오버레이 메뉴의 표시 방식을 조정할 수 있습니다. 오버레이 메뉴 표시를 사용자 정의하려면 다음 단계를 따르세요.
- 사이트의 알림판에서 디자인 → 편집기로 이동합니다.
- 템플릿을 선택하고 홈 또는 첫 페이지 등 메뉴가 포함된 템플릿을 선택합니다.
- 화면 왼쪽 상단에서 목록 보기(가로줄 3개가 겹쳐진 모양의 아이콘)를 엽니다.
- 목록 보기에서 탐색 블록을 선택합니다.
- 화면 오른쪽의 탐색 블록 설정을 확인합니다.
- 설정 아이콘(톱니바퀴 아이콘)을 클릭합니다.
- 표시 아래에서 오버레이 메뉴 설정을 선택합니다.
- 모바일: 기본 설정입니다. 오버레이 메뉴가 모바일 크기 화면에서만 표시됩니다.
- 끄기: 오버레이 메뉴를 전혀 표시하지 않습니다.
- 항상: 화면 크기에 관계없이 항상 오버레이 메뉴를 표시합니다.
- 오버레이 템플릿을 사용하면 모바일에서 표시되는 전체 화면 오버레이의 디자인을 사용자 정의할 수 있습니다. 탐색 오버레이 사용자 정의하기 가이드를 참고하세요.
- “저장” 버튼을 클릭하여 변경사항을 저장합니다.
웹사이트 방문자는 모바일 장치에서 아이콘이나 햄버거 메뉴를 보는 데 익숙합니다. 데스크톱 메뉴를 그대로 표시하는 것, 즉 오버레이 메뉴를 끄면 모바일 장치에서 사이트를 탐색하기 어려워질 수 있습니다.
탐색 블록 가이드를 방문하여 블록의 모든 기능을 알아보세요.
클래식 테마와 서드파티 테마는 모바일 장치에서 메뉴가 표시되는 방식에 대해 자체적인 기본 설정을 적용할 수 있습니다. 선택한 테마의 문서를 확인하여 자세히 알아보세요.
방문자가 메뉴 항목에 마우스 오버하거나 클릭할 때 드롭다운 메뉴가 열리도록 하거나, 항상 표시되도록 설정할 수 있습니다.
서브메뉴 표시 방식을 설정하려면 다음 단계를 따르세요.
- 사이트의 알림판에서 디자인 → 편집기로 이동합니다.
- 템플릿을 선택하고 홈 또는 첫 페이지 등 메뉴가 포함된 템플릿을 선택합니다.
- 화면 왼쪽 상단에서 목록 보기를 엽니다.
- 탐색 블록을 선택합니다.
- 블록 설정 사이드바에서 설정 아이콘(톱니바퀴 아이콘)을 클릭합니다.
- 표시 아래에서 “서브메뉴 표시” 설정을 찾아 다음 옵션 중 하나를 선택합니다.
- 마우스 오버: 방문자가 상위 메뉴 항목에 마우스를 올리면 드롭다운 메뉴가 열립니다. 필요에 따라 메뉴 옆에 화살표를 표시하는 설정을 끌 수도 있습니다.
- 클릭: 방문자가 상위 메뉴 항목을 클릭하면 드롭다운 메뉴가 열립니다.
- 저장 버튼을 클릭하여 변경사항을 저장합니다.
이 가이드의 내용은 워드프레스닷컴 Personal, Premium, Business, Commerce 요금제를 사용하는 사이트에 적용됩니다. 무료 사이트의 경우 이 기능을 사용하려면 요금제를 업그레이드하세요.
CSS 클래스는 개별 메뉴 항목에 CSS 클래스를 적용하는 데 사용할 수 있는 고급 메뉴 속성입니다.
이 가이드에서 어떤 섹션을 따라야 하는지 확인하려면 워드프레스닷컴 알림판을 방문하여 왼쪽의 디자인 아래를 확인하세요. 편집기가 보이면 이 가이드의 블록 테마 섹션을 따르세요. 그렇지 않으면 클래식 테마 안내를 따르세요.
사용자 정의 CSS 추가에 대해 자세히 알아보세요.
지원 