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

3

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

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

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

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

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

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

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

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

워드프레스에서 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/ 글을 참고하시기 바랍니다.