워드프레스 아바다 테마 CSS 미디어 쿼리 디바이스별 해상도 분기점

베스트셀링 워드프레스 테마인 아바다 테마는 많은 옵션을 제공하여 코딩에 익숙하지 않은 사용자들도 쉽게 사용할 수 있지만, 세부적으로 커스텀을 원하는 경우 CSS를 사용하면 편리합니다. 다음은 아바다(Avada) 테마의 CSS 미디어 쿼리 디바이스별 해상도 분기점에 대한 정보입니다. 아바다 테마가 적용된 워드프레스 사이트에서 CSS를 사용하여 스타일을 지정하려는 경우 참고해보세요.

워드프레스 아바다 테마 CSS 미디어 쿼리 디바이스별 해상도 분기점

아바다 테마의 기기별 해상도 분기점입니다.

/* Extra small devices (phones, 600px and down) */
/* 매우 작은 장치 (폰, 600px 이하) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
/* 소형 디바이스 (태블릿 세로 및 큰 폰, 600px 이상) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
/* 중간 크기의 기기 (태블릿 가로, 768px 이상) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
/* 큰 장치 (노트북/데스크탑, 992px 이상) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* 매우 큰 기기 (큰 노트북 및 데스크탑, 1200px 이상) */
@media only screen and (min-width: 1200px) {

}

/* Extra large devices (large laptops and desktops, 1400px and up) */
/* 매우 큰 기기 (대형 노트북 및 데스크톱, 1400px 이상) */
@media only screen and (min-width: 1400px) {

}

/* Extra large devices (large laptops and desktops, 1692px and up) */
/* 매우 큰 기기 (대형 랩톱 및 데스크톱, 1692px 이상) */
@media only screen and (min-width: 16920px) {

}

커스텀 CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가할 수 있습니다. 아바다 테마의 경우 워드프레스 관리자 페이지의 Avada > Options > 사용자 정의 CSS에서도 커스텀 CSS 코드를 입력할 수 있습니다.

이외에도 차일드 테마를 만든 경우, 차일드 테마 내의 스타일시트 파일([**style.css**])에 사용자 CSS를 추가하는 것도 가능합니다.

CSS 미디어 쿼리(Media Query)에 대한 자세한 내용은 W3Schools 문서를 참고해보세요. CSS에 대해 잘 모르는 경우 생활코딩의 무료 CSS 강의를 보거나 시중에서 CSS 관련 책을 하나 구입하여 보면 도움이 될 것입니다. 기본적인 CSS는 금방 배울 수 있을 것입니다.

[참고*아바다는 인기 다목적 테마로 모든 유형의 사이트 제작에 사용할 수 있습니다. 아바다는 많은 테마 옵션과 기능을 제공하고 Layouts 기능을 추가하여 코딩 지식이 부족해도 프로페셔널한 사이트를 만들 수 있습니다. 하지만 많은 기능이 탑재되어 있다 보니 최적화를 제대로 하지 않으면 사이트 속도가 느려질 가능성이 있습니다. 그래도 예전보다는 속도가 많이 좋아진 편입니다. 빠른 사이트를 원하거나 심플한 블로그 사이트를 운영하려는 경우, 혹은 커스텀하기에 좋은 테마를 원한다면 GeneratePress와 같이 가벼운 테마를 고려해볼 수 있습니다.*]

※파트너스 활동으로 일정액의 수수료를 제공받을 수 있습니다.

참고

https://avada.tistory.com/916

워드프레스 아바다 테마 데모 설치 및 제거 (Avada Theme)