의외로 모바일 기기에서 레이아웃을 변경하는 방법에 대해 궁금해 하는 분들이 많네요.

요즘 나오는 대부분의 워드프레스 테마는 반응형으로 출시되어 나옵니다. 즉, 기기 해상도에 따라 레이아웃이 적절하게 바뀌도록 처음부터 디자인되어 있습니다.

가령 이 블로그에 사용된 Pluto 테마는 해상도별로 표시할 열을 설정할 수 있습니다.

워드프레스 포트폴리오 테마 설정

하지만 모바일에서는 별도의 옵션이 없고 무조건 한 열로 표시됩니다. 이런 옵션은 테마에 따라 다릅니다.

간혹 모바일에서 1줄로 표시되는 것을 2줄로 표시되도록 만드는 방법에 대한 질문을 접합니다. (예: 아바다의 포트폴리오에서 표시되는 포트폴리오 개수를 변경하고 싶은 경우)

이 경우 미디어 쿼리를 사용하여 해상도에 따라 레이아웃 조정을 시도해볼 수 있습니다.

미디어 쿼리에 대한 정보는 다음 w3schools 문서를 참고해보세요.

예를 들어 링크된 문서에 다음과 같은 CSS 코드가 예시로 제시되어 있습니다.

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

이 코드를 적용하면 600px 이하의 해상도에서 body의 배경색이 lightblue(연한 파랑?)로 설정됩니다.

2개 열로 표시하는 방법은 다음 w3schools 문서를 참고해볼 수 있습니다.

제시된 코드를 적절히 응용할 수 있습니다.

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