데스크탑 및 모바일 메뉴를 일치시키는 방법

데스크톱과 모바일 모두에서 멋진 메뉴를 원하십니까? 우리는 당신을 덮었습니다. 이 가이드에서는 WordPress 웹사이트의 데스크톱 및 모바일 메뉴를 일치시키는 방법을 보여줍니다.

최근 몇 년 동안 인터넷 검색을 위한 모바일 장치의 사용이 증가하고 있습니다. 그러나 모든 사이트가 사용자에게 모바일에서 좋은 경험을 제공하도록 설계된 것은 아닙니다. 시대에 뒤쳐지지 않고 모바일 방문자를 최대한 활용하려면 사이트가 데스크톱 화면에서처럼 모바일에서도 반응이 좋은지 확인해야 합니다.

데스크탑과 모바일 메뉴를 일치시키는 방법을 보여드리기 전에 먼저 동일한 디자인을 사용하는 것이 좋은 이유를 살펴보겠습니다.

데스크탑과 모바일 메뉴를 일치시키는 이유는 무엇입니까?

사용자가 휴대전화에서 인터넷을 검색하는 것이 점점 더 일반적이지만 모든 웹사이트가 모바일 사용자에게 좋은 경험을 제공하도록 설계된 것은 아닙니다. 모든 장치에서 사이트를 쉽게 탐색할 수 있도록 하려면 데스크톱 및 모바일 메뉴를 일치시켜 모든 화면에서 매력적으로 보이도록 해야 합니다.

현재 대부분의 웹사이트에는 데스크탑 화면에서 보기 좋은 헤더 메뉴가 있습니다. 그러나 모바일 화면에서는 동일하지 않습니다. 많은 웹 사이트 소유자는 모바일에 대한 기본 옵션을 사용하므로 메뉴가 일반적으로 좋지 않습니다.

예제를 살펴보겠습니다. 귀하의 웹사이트에 높이가 30px이고 최대 로고 높이가 100px인 데스크탑의 표준 메뉴가 있다고 가정해 보겠습니다.

변경 없이 모바일에서 동일한 메뉴를 체크하면 이런 모습이 됩니다.

보시다시피 꽤 커서 화면의 거의 20%를 차지합니다. 좋은 소식은 데스크톱 및 모바일 메뉴와 일치하도록 몇 가지 조정을 할 수 있다는 것입니다. 따라서 후자는 다음과 같습니다.

모든 크기의 화면에서 사용자에게 탁월한 경험을 제공하려면 데스크탑과 모바일 메뉴를 일치시키는 것이 필수입니다. 또한 보기 좋고 반응이 빠른 웹사이트는 사이트 탐색 및 참여도를 높이는 데 도움이 됩니다.

데스크탑과 모바일 메뉴를 일치시켜야 하는 이유를 더 잘 이해했으므로 이제 그 방법을 살펴보겠습니다.

WordPress에서 데스크탑과 모바일 메뉴를 일치시키는 방법

데스크탑과 모바일 메뉴를 일치시키는 것은 복잡한 과정이 아닙니다. 아래에서 볼 단계를 따르기만 하면 됩니다. 메뉴의 스타일을 지정하기 위해 약간의 CSS 코드를 사용할 것이지만 코딩 기술이 없더라도 가이드를 따를 수 있음을 명심하십시오.

이 자습서에서는 WordPress에서 가장 반응이 빠르고 사용하기 쉽고 기능이 풍부한 테마 중 하나인 Divi 테마를 사용합니다. 일부 인터페이스는 웹사이트에 사용하는 테마에 따라 다를 수 있지만 대부분의 변경 사항을 테마에 적용할 수 있어야 합니다.

1. 메뉴 구성

데스크탑과 모바일 메뉴를 일치시키기 위해 가장 먼저 해야 할 일은 메뉴를 구성하는 것입니다. 이것은 대부분의 테마에서 동일합니다. 여기서는 메뉴와 로고의 높이를 조정합니다.

WordPress 대시보드에서 모양 > 사용자화 로 이동합니다. 헤더 및 탐색 > 기본 메뉴 표시줄 을 열어야 하는 테마 사용자 지정 프로그램으로 리디렉션됩니다.

그런 다음 로고 이미지 숨기기 옵션을 비활성화하고 선택을 취소하고 메뉴의 높이와 로고의 최대 높이를 다음과 같이 조정합니다.

• 메뉴 높이 : 30
• 로고 최대 높이 : 100

이렇게 하면 데스크탑과 모바일 모두 메뉴의 높이가 낮아져 더 우아하고 모바일 화면에 더 많은 공간이 생깁니다.

값을 설정했으면 게시합니다.

2. CSS로 메뉴 편집

로고와 메뉴를 구성한 후 CSS를 사용하여 메뉴 편집 을 시작할 수 있습니다. 데스크톱 및 모바일 메뉴와 일치하도록 CSS를 WordPress에 추가할 수 있는 다양한 방법이 있습니다. 단일 특정 페이지 또는 전체 웹사이트에 추가할 수 있습니다.

디자인의 일관성을 유지하려면 메뉴의 CSS 변경 사항을 전체 웹 사이트에 적용하는 것이 좋습니다. 그러나 필요한 경우 특정 웹 페이지에 CSS 코드를 포함할 수도 있습니다. 아래에서 두 가지 옵션을 모두 보여드리겠습니다.

시작하기 전에 WordPress 사이트를 백업하는 것이 좋습니다. 사이트에 몇 줄의 코드를 추가할 것이므로 웹사이트의 이전 버전으로 돌아가려는 경우를 대비하여 항상 최근 백업이 있으면 편리합니다.

2.1. 단일 페이지에 CSS 코드 추가

특정 페이지의 데스크톱 및 모바일 메뉴와 일치하도록 CSS 코드를 추가하려면 WordPress 대시보드에서 페이지를 엽니다.

그런 다음 Divi Builder 로 페이지를 열고 페이지 하단의 옵션 버튼(가로 점 3개)을 클릭합니다. 거기에 페이지 옵션이 표시됩니다. 설정 아이콘을 클릭하여 페이지 설정을 열고 고급 탭으로 이동한 다음 사용자 정의 CSS를 누릅니다.

그런 다음 다음 CSS 코드를 추가하고 체크 표시를 클릭하여 저장합니다.

 @미디어(최대 너비: 980px) {
# 페이지 컨테이너 {
패딩 탑: 43px! 중요한;
}
}
@미디어(최대 너비: 980px) {
#로고 {
최대 너비: 100%! 중요한;
최대 높이: 90%! 중요한;
}
}
@미디어(최대 너비: 980px) {
#메인헤더 {
상단: 4%! 중요한;
}
}
@미디어(최대 너비: 980px) {
# et-top-내비게이션 {
패딩 탑: 5px! 중요한;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
패딩 하단: 5px;
}

코드 소스

빌더에서 사용 가능한 미리보기 모드를 사용하여 데스크톱과 모바일 간의 결과를 비교할 수 있습니다. 화면 왼쪽 하단에 옵션이 표시됩니다.

2.2. 전체 웹사이트에 CSS 코드 추가

또는 CSS 코드를 추가하여 전체 웹사이트에 적용할 수 있습니다. 이것은 사이트 전체에서 일관성을 유지 하고 모든 단일 페이지에서 데스크톱 및 모바일 메뉴를 일치시키는 데 도움이 되기 때문에 가장 일반적인 기술입니다.

이를 위해 두 가지 방법으로 사용자 정의 CSS를 추가할 수 있습니다.

• 테마 커스터마이저 사용하기
• 테마 옵션에서 (Divi를 사용하는 경우)

두 가지 옵션을 모두 살펴보겠습니다.

나. 테마 커스터마이저

WordPress 대시보드에서 모양 > 사용자 지정 으로 이동하여 테마 사용자 지정 프로그램을 엽니다. 그런 다음 추가 CSS 탭으로 이동합니다.

다음 CSS 코드를 붙여넣고 게시합니다.

 @미디어(최대 너비: 980px) {
# 페이지 컨테이너 {
패딩 탑: 43px! 중요한;
}
}
@미디어(최대 너비: 980px) {
#로고 {
최대 너비: 100%! 중요한;
최대 높이: 90%! 중요한;
}
}
@미디어(최대 너비: 980px) {
#메인헤더 {
상단: 4%! 중요한;
}
}
@미디어(최대 너비: 980px) {
# et-top-내비게이션 {
패딩 탑: 5px! 중요한;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
패딩 하단: 5px;
}

코드 소스

CSS 코드를 붙여넣은 후 사이트 요구 사항에 맞게 값을 조정할 수도 있습니다. 모바일 메뉴와 로고 사이의 상단 패딩이 올바르게 정렬되었는지 확인하십시오. 올바른 값이 무엇인지 확실하지 않은 경우 높은 값으로 시작하여 결과에 만족할 때까지 값을 줄이십시오.

이 방법의 좋은 점은 테마 사용자 지정 프로그램에서 데스크톱 및 모바일 결과를 미리 볼 수 있다는 것입니다. 미리보기 모드 옵션은 화면 왼쪽 하단에 나타납니다.

ii. 테마 옵션

또는 Divi를 사용하는 경우 테마 옵션을 사용하여 전체 웹사이트에 CSS 코드를 추가할 수 있습니다. 코드를 추가하기 위해 테마 사용자 지정 프로그램을 로드할 필요가 없으므로 이 방법이 더 쉽고 빠를 수 있습니다.

먼저 Divi > 테마 옵션 으로 이동하여 일반 탭 을 엽니다. 그런 다음 페이지 하단으로 스크롤하면 Custom CSS 를 찾을 수 있습니다.

다시 한 번 스크린샷과 같이 텍스트 상자에 다음 코드를 추가하고 변경 사항을 저장합니다.

 @미디어(최대 너비: 980px) {
# 페이지 컨테이너 {
패딩 탑: 43px! 중요한;
}
}
@미디어(최대 너비: 980px) {
#로고 {
최대 너비: 100%! 중요한;
최대 높이: 90%! 중요한;
}
}
@미디어(최대 너비: 980px) {
#메인헤더 {
상단: 4%! 중요한;
}
}
@미디어(최대 너비: 980px) {
# et-top-내비게이션 {
패딩 탑: 5px! 중요한;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
패딩 하단: 5px;
}

이것은 샘플 코드일 뿐이므로 사이트 디자인에 맞게 조정해야 할 수도 있습니다.

모바일 메뉴에 대한 몇 가지 추가 팁

웹사이트에서 데스크탑과 모바일 메뉴를 쉽게 일치시키는 방법을 살펴보았습니다. 하지만 모바일 메뉴를 사용자화하기 위해 할 수 있는 일이 더 있습니다. 이 섹션에서는 메뉴를 최대한 활용하기 위해 수행할 수 있는 가장 일반적인 사용자 정의 몇 가지를 보여줍니다.

이 튜토리얼에서는 Divi 테마를 사용했으므로 일부 옵션은 사용하는 테마에 따라 약간 다를 수 있습니다.

1. 모바일 메뉴 고정 방법

모바일 메뉴를 수정할 수 있는 가장 좋은 방법 중 하나는 사용자가 웹사이트에서 스크롤할 때 수정하는 것입니다. 이렇게 하면 탐색을 개선하고 사이트의 사용자 경험을 개선할 수 있습니다.

모바일 메뉴를 고정하려면 테마 커스터마이저 또는 테마 옵션 에 다음 CSS 코드를 추가하세요.

 @미디어(최대 너비: 980px) {
.et_non_fixed_nav.et_transparent_nav # 메인 헤더, .et_non_fixed_nav.et_transparent_nav # 상단 헤더, .et_fixed_nav # 메인 헤더, .et_fixed_nav # 상단 헤더 {
위치: 고정! 중요한; }}

Divi에서 메뉴를 고정하는 방법에 대한 자세한 내용은 이 가이드를 참조하세요.

2. 모바일 모드에 다른 로고 추가

이것은 모바일 메뉴에 대한 완벽한 정렬을 만들기 위해 올바른 값을 얻는 데 어려움을 겪을 때 유용할 수 있습니다. 모바일 기기에서만 원본 로고를 교체하고 더 적절한 크기로 다른 로고를 사용할 수 있습니다.

모바일에서 다른 로고를 사용하려면 먼저 웹사이트에 로고 이미지를 업로드하세요. 미디어 > 새로 추가 로 이동하여 이미지를 업로드합니다.

그런 다음 라이브러리 탭으로 이동하여 이미지를 선택합니다. 이미 이미지를 업로드했다면 미디어 > 라이브러리 를 열 수 있습니다.

이제 이미지를 선택하고 파일 URL 을 복사합니다.

마지막으로 추가 CSS 아래의 테마 사용자 지정 프로그램에 다음 사용자 지정 CSS를 추가하고 게시합니다. URL을 방금 복사한 URL로 바꾸는 것을 잊지 마십시오.

 @미디어 전용 화면 및 (최대 너비: 981px) {
/ * 모바일 로고를 지정된 이미지로 변경 * /
#로고 {
내용: url("http://site.com/logo.png");
}
}

3. 모바일 헤더에 로고 숨기기

데스크탑과 모바일 메뉴를 일치시키는 데 문제가 있는 경우 다르게 만들고 모바일에서 로고를 완전히 숨길 수 있습니다. 이것은 일부 사이트에 좋은 옵션이 될 수 있지만 사용자가 로고 없이도 귀하의 웹사이트를 식별할 수 있도록 다른 단서를 제공해야 합니다.

모바일 메뉴에서 로고를 숨기려면 WordPress 대시보드에서 모양 > 사용자 지정 으로 이동하여 테마 사용자 지정 프로그램을 엽니다. 그런 다음 모바일 스타일 > 모바일 메뉴 로 이동합니다. 로고 이미지 숨기기 옵션을 선택하고 게시하십시오.

그게 다야! 모바일에서는 로고가 숨겨집니다.

결론

대체로 웹사이트가 보기 좋고 모든 유형의 장치에서 작동하는 것이 중요합니다. 데스크톱 및 모바일 메뉴를 일치시키면 사이트 탐색을 개선하고 방문자에게 더 나은 경험을 제공할 수 있습니다.

이 가이드에서는 데스크톱과 모바일 모두에서 동일한 메뉴를 사용하는 여러 단계를 보여주었습니다. 단일 페이지 또는 전체 웹 사이트에 대해 구성하고 CSS로 편집하는 방법을 살펴보았습니다.

또한 모바일 메뉴를 사용자 정의할 수 있는 몇 가지 팁도 제공했습니다. 인터넷 트래픽의 거의 절반이 모바일이라는 점을 고려하면 사이트에 큰 영향을 미칠 수 있습니다.

Divi 테마 또는 빌더에 대한 자세한 내용을 보려면 다음 가이드를 참조하세요.

• CSS로 Divi 메뉴를 사용자 정의하는 방법
• Divi 헤더 만들기(고정/고정)
• Divi에서 바닥글을 숨기고 제거하는 방법

사이트의 데스크톱 및 모바일 메뉴를 일치시켰습니까? 튜토리얼 이후에 문제가 있었나요? 아래 의견 섹션에서 알려주십시오!