본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 워드프레스 아바다 테마 CSS 미디어 쿼리 디바이스별 해상도 분기점

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

· 댓글 4

베스트셀링 워드프레스 테마인 아바다 테마는 많은 옵션을 제공하여 코딩에 익숙하지 않은 사용자들도 쉽게 사용할 수 있지만, 세부적으로 커스텀을 원하는 경우 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 코드를 입력할 수 있습니다.

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

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

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

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

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

참고

https://avada.tistory.com/916

 

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

워드프레스 아바다(Avada)는 현재 70만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마는 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 76만 명의 고객을 확보하고 있는 Elegant Themes의

avada.tistory.com

 

💬 댓글 4
logo

기본적인 CSS 좀 알아 두어야겠어요^^

logo

홈페이지를 꾸밀 때 기본적인 CSS를 알아도 많은 도움이 되는 것 같습니다.

logo

좋은 정보입니다만.. 저에게는 좀 어렵군요~ ㅋ 잘 보고 갑니다~^^

logo

기기 해상도별로 스타일을 다르게 적용할 경우 CSS 미디어쿼리를 사용할 수 있습니다. 홈페이지를 만들거나 꾸미는 작업을 하는 경우에 알아두면 좋습니다. 즐거운 하루 보내세요.

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

초기화 시켜야 하는 경우 참⋯

💬空空(공공)

신뢰가 되지않는다면 세무사⋯

💬똘켓ioi

가성비가 좋은 호스팅이로군요^^

💬空空(공공)

잘 보고 갑니다 무더운 하루⋯

💬空空(공공)

올해는 국세청에서 쉽게 신고⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드