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

3

PC에서 표시되는 특정 요소(Element)를 모바일 기기에서는 표시되지 않도록 하고 싶은 경우가 있을 것입니다. 가령 다음 테마 스크린샷을 살펴보겠습니다.
GalaNight Theme
위 그림은 GalaNight Theme이라는 테마를 적용한 기본적인 모습입니다. 이 사이트를 스마트폰 등 모바일 버전에서 보면 메뉴가 다음과 같이 바뀝니다.
GalaNight Theme for mobile
물론 이것도 나쁘지는 않지만 다른 플러그인을 사용하여 메뉴 모양을 바꾸고 싶어할 수 있습니다. 그런 경우 모바일 버전에서 이 테마의 메뉴는 숨기는 것이 좋을 것입니다. 이 경우 미디어 쿼리(media query)를 사용하여 모바일에서만 표시되지 않도록 할 수 있습니다(물론 그 반대의 경우도 가능합니다).

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

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

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

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

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

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

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

Related Posts