[워드프레스] 모바일 버전 레이아웃 조정하기

요즘 나오는 대부분의 워드프레스 테마는 반응형(Responsive)으로서 별도의 수정 없이 모바일 기기에서도 최적화되어 나오는 경우가 많습니다. 모바일 버전에서의 레이아웃을 조정하기를 원하는 경우 CSS의 미디어쿼리(Media Query)를 사용하여 제어할 수 있습니다.

예를 들어, 화면(브라우저 창) 크기가 500px보다 작을 때 배경색을 바꾸고 싶다면 다음과 같은 CSS 코드를 사용할 수 있습니다.

// Only applies to mobile device screens whose maximum width is 500px
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

여기에서 직접 테스트해볼 수 있습니다. 위의 코드는 max-width(최대 폭)가 500px인 화면(즉, 500px보다 작은 화면)에만 적용하라는 의미가 됩니다.

// Only applies to mobile device screens whose minimum width is 768px
@media only screen and (min-width: 768px) {
/* your code */
}

이 코드는 min-width(최소 폭)가 768px인 화면(즉, 768px보다 큰 화면)에만 적용하라는 의미입니다.

여기에서 아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리가 소개되어 있으니 참고하시기 바랍니다.

그리고 모바일용 기기에만 특정 코드를 적용하고 싶은 경우에 WordPress에서 지원하는 wp_is_mobile() 함수를 사용할 수 있습니다.

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.