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

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

댓글 3건
  1. 김상현

    아이폰의 경우 어떻게 해야 하나요?힌트 부탁드립니다.

    1. wordcracker

      아이폰/아이패드 버전별 CSS 미디어 쿼리는 http://www.thewordcracker.com/basic/turn-off-iphonesafari-input-element-rounding/ 글에 잘 나와 있습니다.

  2. wordcracker

    위 예제처럼 PC 화면용과 모바일 화면용 레아웃을 조정하려면 미디어 쿼리를 사용해야 합니다. 아이폰, 아이패드, 스마폰 화면에 사용 가능한 정확한 미디어 쿼리는 다음 글을 참고하시기 바랍니다:

    http://www.thewordcracker.com/miscellaneous/media-query-for-mobile-devices-such-as-iphone-nad-ipad/

    그리고 CSS를 테마 스타일시트에 적용하는 방법은 http://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/ 글을 참고하시기 바랍니다.

댓글 남기기