고급 반응형 편집을 위해 Divi의 내장 사용자 정의 CSS 입력을 사용하는 방법

Divi에는 반응형 디자인 편집 기능이 내장되어 있어 CSS를 몰라도 데스크탑, 태블릿 또는 휴대폰 디스플레이에서 웹사이트 스타일을 매우 쉽게 조정할 수 있습니다. Divi의 내장 반응형 편집 기능에는 사용자 정의 CSS를 사용하여 보다 고급 반응형 디자인을 변경할 수 있는 간소화된 방법이 포함되어 있습니다. 이것은 미디어 쿼리와 함께 외부 스타일 시트에 의존하는 것보다 훨씬 더 편리합니다. 각 장치 디스플레이에 대해 실시간으로 CSS를 시각적으로 조정할 수도 있으므로 반응형 디자인에서 많은 추측을 하지 않아도 됩니다.

이 튜토리얼에서는 사용자 정의 CSS를 사용하여 편리한 반응형 디자인 변경을 수행하여 Divi의 기본 제공 디자인 옵션에서 사용할 수 없는 고급 디자인 수정을 할 수 있는 방법을 보여 드리겠습니다.

시작하자.

반응형 편집을 위한 Divi의 내장 중단점

Divi에는 Divi Builder의 모든 요소 설정에 내장된 3개의 일반적인 반응형 중단점(브라우저 너비에 따라 디자인이 변경되는 지점)이 있습니다. 이 세 가지 중단점은 주로 데스크톱, 태블릿 및 휴대폰 디스플레이에 대한 특정 디자인 설정을 용이하게 하기 위한 것입니다.

데스크톱, 태블릿 및 전화 디스플레이에 대한 Divi의 3가지 주요 반응 중단점은 다음과 같습니다.

• 데스크탑: 981px 이상
• 태블릿: 980px ~ 768px
• 모바일: 767px 이하

이 세 가지 중단점은 고급 사용자 지정 CSS뿐만 아니라 Divi 빌더 전체의 모든 반응형 디자인 탭에서 동일합니다. 따라서 반응형 디자인 탭을 배포할 때마다 해당 탭 아래에서 수행된 모든 스타일은 이러한 세 가지 주요 반응형 중단점 범위 내에 표시됩니다.

또한 이러한 장치 디스플레이에 대한 일반적인 중단점이 Divi 테마의 구조에 내장된 유일한 중단점이 아니라는 점을 언급할 가치가 있습니다. Divi의 반응형 중단점 식별에 대한 기사에서 이에 대해 알아볼 수 있습니다.

Divi의 사용자 정의 CSS 입력 상자 이해

Divi 빌더 내에서 요소(섹션, 행 또는 모듈)를 사용자 정의할 때 각 디자인 옵션은 해당 요소의 특정 부분에 해당(또는 대상)합니다. 예를 들어 텍스트 모듈을 편집할 때 내장 설정(예: 제목 2 글꼴, 왼쪽 패딩 등)을 사용하여 해당 모듈의 모든 부분을 대상으로 지정할 수 있습니다.

마찬가지로 고급 사용자 정의 CSS 입력 상자를 사용하여 Divi 요소(섹션, 행 또는 모듈)를 사용자 정의할 때 각 입력 상자는 해당 Divi 요소의 전체 또는 특정 부분에 해당(또는 대상)합니다. 사용 가능한 사용자 정의 CSS 상자의 수는 스타일을 지정하는 요소에 따라 다릅니다. 텍스트 모듈에는 세 개의 사용자 정의 CSS 요소 입력 상자(이전, 기본 및 이후)만 있을 수 있지만 행동 유도 모듈에는 제목, 설명 및 버튼에 대한 추가 상자가 있습니다. 이는 모듈에 해당 모듈 요소 내에서 대상으로 지정할 수 있는 더 많은 부분이 있기 때문입니다.

다음은 행동 유도 모듈에 사용할 수 있는 다양한 사용자 정의 CSS 입력 상자의 그림입니다.

각 사용자 정의 CSS 입력 상자는 요소 내의 특정 CSS 클래스를 대상으로 합니다. 특정 요소를 대상으로 하는 클래스를 보려면 요소 위에 마우스를 놓고 물음표 아이콘을 클릭하기만 하면 됩니다. 거기에서 대상이 되는 CSS 클래스를 볼 수 있습니다.

따라서 입력 상자의 CSS 스니펫에 CSS 클래스를 추가할 필요가 없습니다. 그렇게 하면 코드가 작동하지 않습니다.

대신 이미 대상으로 지정되어 있는 클래스에 적용하려는 상자에 CSS 속성을 직접 추가하기만 하면 됩니다.

반응형 디자인 중단점에 사용자 정의 CSS를 추가하는 방법

CSS 입력 상자에 대한 세 가지 주요 반응형 디자인 중단점에 액세스하려면 요소 위에 마우스를 놓고 태블릿 아이콘을 클릭하기만 하면 됩니다. 그러면 세 개의 반응형 디자인 탭이 표시됩니다.

이제 탭을 사용하여 세 가지 장치 디스플레이(데스크톱, 태블릿 및 전화) 중 하나에 CSS를 추가하기만 하면 됩니다.

예를 들어, 클릭 유도문안의 프로모션 버튼이 데스크톱이 아닌 태블릿과 휴대전화에서 모듈의 전체 너비로 확장되도록 하고 싶다고 가정해 보겠습니다. 프로모션 버튼 입력 상자 아래에서 태블릿 탭을 선택하고 "디스플레이: 차단;"을 추가합니다.

태블릿 탭을 선택하면 Divi Builder 보기 모드가 태블릿 보기 모드(너비 768px)로 전환되어 디자인이 어떻게 보일지 실시간으로 더 잘 볼 수 있습니다.

더 작은 장치는 기본적으로 더 큰 장치의 CSS를 상속합니다.

기본적으로 태블릿 탭에 적용된 코드는 전화기 디스플레이에도 상속됩니다. 이를 상기시키기 위해 Divi는 태블릿 디스플레이에 추가된 것과 동일한 코드를 사용하여 입력 상자에 회색 자리 표시자 코드를 추가합니다.

휴대폰 디스플레이가 태블릿 디스플레이를 상속하는 이유는 백엔드의 태블릿 디스플레이에 대한 실제 중단점(미디어 쿼리)이 "max-width: 980px;"로 설정되기 때문입니다. 즉, 휴대폰 디스플레이 너비가 980px 미만이므로 태블릿에 추가된 코드가 휴대폰에도 적용됩니다. 따라서 전화에 다른 스타일을 적용하려면 전화 탭 입력 상자에 추가 코드를 추가해야 합니다.

참고: 전화기 디스플레이에 사용자 정의 CSS를 추가하면 Divi는 백엔드의 태블릿에 대한 미디어 쿼리를 768px에서 980px(또는 최대 너비: 980px 및 최소 너비: 768px) 사이의 보다 정확한 범위로 현명하게 변경합니다.

사용자 정의 CSS가 백엔드에 적용되는 것

세 가지 반응형 탭(데스크톱, 태블릿 및 전화) 모두에 사용자 지정 CSS를 추가한다고 가정해 보겠습니다.

데스크탑에서는 버튼을 모듈의 오른쪽 하단에 배치합니다.

태블릿에서는 데스크톱 코드를 재정의하고 버튼을 모듈의 전체 너비로 확장합니다.

전화에서는 태블릿 CSS를 재정의하고 디스플레이를 정상으로 되돌립니다.

백엔드에서 CSS를 검사하면 Divi가 다음 미디어 쿼리로 코드를 구성하므로 다음과 같은 작업을 수행할 필요가 없음을 알 수 있습니다.

데스크탑:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

태블릿:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

핸드폰

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSS는 Divi에 어떻게 저장됩니까?

Divi의 내장된 속도 최적화의 일부로 Divi Builder 내의 모든 스타일(맞춤형 CSS 포함)이 결합, 축소 및 더 빠른 페이지 로딩을 위해 정적 CSS 파일로 저장됩니다. 따라서 하위 테마를 통해 사용자 정의 CSS를 추가할 필요를 우회하려는 경우 사이트 속도 저하에 대해 걱정할 필요 없이 기본 제공 반응형 CSS 입력을 활용할 수 있습니다.

자세한 내용은 Divi 사이트 속도를 높이는 방법에 대한 게시물을 확인하세요.

마지막 생각들

이 게시물이 Divi의 기본 제공 사용자 정의 CSS 입력 상자를 활용하여 웹 사이트에 대한 편리한 반응형 디자인 변경을 만드는 방법을 조금 더 잘 이해하는 데 도움이 되기를 바랍니다.

대부분의 사람들은 디자인에 사용자 지정 CSS를 추가하기 위해 고급 탭으로 이동할 필요가 없습니다. Divi에는 고급 사용자라도 사용자 정의 CSS를 사용할 필요성을 거의 찾지 못할 정도로 많은 옵션이 내장되어 있습니다. 하지만 고급 스타일링이 필요한 시점이 오면 Divi에서 하는 것이 얼마나 쉬운지 알면 도움이 됩니다.

Divi의 사용자 정의 CSS 입력에 대한 경험은 무엇입니까?