참고: 인기 워드프레스 테마 중 하나인 The 7이 39달러로 할인 중입니다.

요즘 나오는 대부분의 워드프레스 테마는 반응형(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)이라도 남겨두세요.