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

Divi는 분기점과 미디어 쿼리를 사용하여 다양한 화면 크기에 사이트를 최적화하여 표시하는 반응형 워드프레스 테마입니다. 사용자들이 이용하는 디바이스의 화면 크기에 맞게 홈페이지가 적절한 레이아웃으로 자동으로 표시됩니다.

예를 들어, 데스크탑(PC)에서 4열로 표시되는 게시글들이 태블릿에서는 2열로, 모바일에서는 1열로 표시될 수 있습니다.

Divi 분기점/CSS 미디어 쿼리 분기점

Divi 테마의 분기점(CSS 미디어 쿼리 분기점)은 홈페이지 콘텐츠가 특정 스크린 사이즈에 대하여 변하는 너비(픽셀 단위)입니다.

기본적으로 Divi 테마는 데스크톱, 태블릿, 모바일 기기 사이즈를 통해 볼 때 콘텐츠를 다르게 표시하기 위한 3가지 내장 분기점(브레이크 포인트)이 있습니다.

3가지 Divi 분기점은 다음과 같습니다.

  1. 데스크톱: 981px 이상 스크린 사이즈
  2. 태블릿: 980px ~ 768px 스크린 사이즈
  3. 모바일: 767px 이하 스크린 사이즈

Divi 빌더에서 Divi 분기점 활용하기

Divi 빌더에서 내장 Divi 분기점을 쉽게 활용할 수 있습니다. Divi 섹션, 행, 컬럼, 모듈의 설정에 대하여 개별적으로 데스크톱, 태블릿, 모바일 기기에 따라 설정을 변경할 수 있습니다.

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

예를 들어, Text 모듈을 사용하는 경우 Design 탭에서 각 설정에 대하여 기기 해상도에 따라 다르게 설정을 지정하는 것이 가능합니다.

가령 텍스트 크기를 디바이스별로 다르게 설정하고 싶은 경우 Text Size 옵션 옆에 마우스를 올리면 위의 그림과 같이 물음표(?)를 비롯한 몇 가지 숨겨진 옵션이 표시됩니다. 두 번째 아이콘(모바일 기기 모양의 아이콘)을 클릭하면 데스크톱, 태블릿, 모바일 기기를 선택할 수 있는 아이콘이 표시됩니다.

그러면 각 디바이스 아이콘을 클릭하고 텍스트 크기를 다르게 지정할 수 있습니다. 다른 설정에 대해서도 동일한 방법으로 기기별로 다르게 설정할 수 있습니다.

엘리멘터 페이지 빌더아바다 테마의 아바다 빌더보다 수월하게 설정이 가능한 것 같습니다.

CSS 미디어 쿼리

보통 Divi의 내장 분기점 기능으로 충분하지만, 디바이스 해상도에 따라 보다 세부적으로 컨트롤하고 싶은 경우 다음의 CSS 미디어 쿼리를 사용할 수 있습니다.

/*** 대형 데스크톱 이상 디바이스용 반응형 스타일 -  Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
// CSS 스타일
}

/*** 표준 데스크톱용 반응형 스타일 - Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
// CSS 스타일
}

/*** 태블릿 이하 기기용 반응형 스타일 - Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
// CSS 스타일
}

/*** 태블릿 전용 반응형 스타일 - Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
// CSS 스타일
}

/*** 스마트폰용 반응형 스타일 - Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
// CSS 스타일
}

/*** 스마트폰 세로 방향용 반응형 스타일 - Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
// CSS 스타일
}

예를 들어, 다음과 같은 CSS를 추가하면 해상도가 1405px 이상인 디바이스에서 모든 H1 제목의 크기가 35px로 설정됩니다.

/*** 대형 데스크톱 기기 이상 ***/
@media all and (min-width: 1405px) {
h1 {
font-size: 35px;
}
}

커스텀 CSS 코드는 Divi » Theme Options » General 탭으로 이동하여 맨 아래의 Custom CSS 섹션에 추가할 수 있습니다.

워드프레스 Divi 테마 커스텀 CSS

Custom CSS 섹션에 사용자 정의 코드를 추가하면 외모 » 사용자 정의하기 » 추가 CSS 섹션에 자동으로 추가됩니다. 또한, 사용자 정의하기의 추가 CSS 섹션에 추가해도 Divi 테마의 Custom CSS 섹션에 반영됩니다.

그러면 Divi 테마에서 테마 옵션을 내보내기 하면 커스텀 CSS도 함께 포함되어 엑스포트(Export)됩니다.

기본적인 CSS는 어렵지 않고 배우는 데 시간도 그리 오래 걸리지 않습니다. 홈페이지 작업을 자주 하는 경우 기본적인 CSS를 이해하면 많은 도움이 될 것입니다.

워드프레스 Divi 테마

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.