워드프레스 아스트라(Astra) 테마: 모바일 분기점 미디어쿼리

아스트라(Astra)는 현재 100만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 테마 중 하나입니다. 이 테마는 무료 버전과 유료 버전이 있으며, 무료 버전에서는 기능이 제한되어 있습니다. 비슷한 테마로 GeneratePress 테마가 있습니다. 두 테마 모두 속도가 빨라서 블로그에 많이 사용되고 있습니다.

워드프레스 아스트라(Astra) 테마: 모바일 분기점 미디어쿼리

사이트의 스타일을 정교하게 변경하려면 CSS를 사용할 수 있습니다. Astra 테마를 설치하여 스타일시트에서 사용된 미디어쿼리를 모두 정리해 보았습니다.

@media (min-width: 1201px) { 
...
}

@media (max-width: 1200px) {
..
}


@media (min-width: 993px) {
...
}

@media (min-width: 992px) {
...
}

@media (max-width: 992px) {
..
}

@media (min-width: 769px) and (max-width:921px) {
...
}

@media (min-width: 768px) and (max-width:921px) {
...
}

@media (min-width: 769px) {
...
}

@media (max-width: 768px) {
...
}

@media (max-width: 544px) { 
...
}

@media (min-width: 421px) {
...
}

@media (max-width: 420px) {
...
}

상기 코드에서 다음 부분은 일관적이지 않게 사용되었습니다.

@media (min-width: 992px) {
...
}

@media (max-width: 992px) {
..
}

@media (min-width: 769px) and (max-width:921px) {
...
}

@media (min-width: 768px) and (max-width:921px) {
...
}

최종적으로 다음과 같이 정리하여 사용하면 될 것 같습니다.

@media (min-width: 1201px) { 
...
}

@media (max-width: 1200px) {
..
}


@media (min-width: 992px) {
...
}


@media (min-width: 769px) and (max-width:921px) {
...
}

@media (min-width: 769px) {
...
}

@media (max-width: 768px) {
...
}

@media (max-width: 544px) { 
...
}

@media (min-width: 421px) {
...
}

@media (max-width: 420px) {
...
}

위의 CSS 미디어쿼리 분기점은 아스트라 무료 버전을 설치하고 아무런 설정을 변경하지 않았을 때를 기준으로 합니다. 모바일 브레이크포인트(Breakpoints)는 변경이 가능합니다.

CSS 미디어쿼리를 사용하여 모바일, 태블릿, 데스크톱 해상도에 따라 다른 스타일을 지정할 수 있습니다. 기본적인 CSS를 익히면 보다 수월하게 원하는 대로 스타일을 변경할 수 있습니다. 기본적인 CSS는 그리 어렵지 않기 때문에 사이트 작업이 많은 경우 익히시면 도움이 될 것입니다. 엘리멘터와 같은 페이지 빌더를 사용하거나 아바다 테마와 같은 다목적 테마를 사용하면 CSS 사용을 최소화할 수 있습니다.

참고:

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)