모바일 버전에서 메뉴를 표시하지 않으려면 (워드프레스)

PC에서 표시되는 특정 요소(Element)를 모바일 기기에서는 표시되지 않도록 하고 싶은 경우가 있을 것입니다. 가령 다음 테마 스크린샷을 살펴보겠습니다.

위 그림은 GalaNight Theme이라는 테마를 적용한 기본적인 모습입니다. 이 사이트를 스마트폰 등 모바일 버전에서 보면 메뉴가 다음과 같이 바뀝니다.

물론 이것도 나쁘지는 않지만 다른 플러그인을 사용하여 메뉴 모양을 바꾸고 싶어할 수 있습니다. 그런 경우 모바일 버전에서 이 테마의 메뉴는 숨기는 것이 좋을 것입니다. 이 경우 미디어 쿼리(media query)를 사용하여 모바일에서만 표시되지 않도록 할 수 있습니다(물론 그 반대의 경우도 가능합니다).

미디어 쿼리를 적용하는 방법은 다음과 같습니다:

 @media screen and (max-width: 480px) {
 <!--- 원하는 스타일 -->
 }

위의 코드는 480px 이하의 화면에서 해당 스타일을 적용하라는 의미입니다. 위의 예에서 아이패드 크기 이하의 기기에서 메뉴를 숨기려면 다음과 같은 코드를 적용하면 됩니다.

 @media screen and (max-width: 767px) { #selectnav1 { display: none; } }

이 코드를 적용한 후에 모바일 기기에서 위 사이트를 다시 보면 다음과 같이 메뉴가 사라집니다. 물론 PC에서는 그대로 유지됩니다.

미디어 쿼리 적용에 대한 보다 자세한 내용을 원하시면 w3schools.com을 참조하시기 바랍니다.

데스크탑(PC), 태블릿, 모바일에 사용 가능한 CSS 미디어 쿼리는 다음 글을 참고해보세요.

• PC, 태블릿, 모바일용 CSS 미디어 쿼리(Media Query)

워드프레스에서 CSS 코드를 추가하는 방법은 다음 글을 참고해보세요.

• 워드프레스에서 CSS 추가하기