Word Cracker의 잡다한 정보 모음

Divi 테마에서 여백과 Gutter를 효과적으로 활용하는 방법

0

요즘은 Elegant Themes의 Divi 테마를 가지고 개인 사이트를 만들고 있습니다. Divi 테마로 비교적 심플한 레이아웃의 블로그는 별다른 기술 없이 쉽게 구축이 가능한 것 같습니다. 하지만 다른 모든 분야와 마찬가지로 정교한 기능이나 레이아웃을 원하는 대로 구현하려면 아무래도 어느 정도의 학습 과정(Learning Curve)이 필요할 것입니다.

이 글은 Elegant Themes의 Blog에 올라온 “5 Creative Ways to Use Divi’s Built-In Margin and Gutter Controls”라는 글을 참고하여 작성되었습니다.

내부 여백(padding)과 외부 여백(margin)의 차이점

margin과 padding은 모두들 잘 알고 있는 개념이라 생각됩니다. MS 용어집에서는 margin을 ‘여백’으로, padding을 ‘안쪽 여백’으로 번역되어 있습니다. Divi에서는 margin을 ‘외부여백’, padding을 ‘내부여백’으로 되어 있습니다. 다이어그램으로 살펴보면 쉽게 이해가 될 것입니다.

외부 여백과 내부 여백. 출처: stackoverflow

padding과 margin의 차이는 다음 두 그림을 통해 시각적으로 더 잘 이해할 수 있습니다.

버튼에 20px padding이 적용된 경우

그리고 다음은 margin이 적용된 경우입니다.

버튼에 20px margin이 적용된 경우

Gutter는 margin과 같은 것이지만 컬럼(열) 사이의 공간을 일컫는 용어입니다. 여러 개의 열을 가진 Divi 행(Row)이 있는 경우 아래 이미지와 같이 각 컬럼 사이의 공간(간격)이 gutter입니다.

Gutter는 컬럼 사이트의 공간(간격)입니다.

컬럼 사이의 간격은 위에서 주황색으로 표시된 설정 컨트롤에서 조정 가능합니다.

Elegant Themes에서 제공하는 위의 동영상에서 Divi의 margin과 gutter를 크리에이티브하게 사용하는 방법을 설명합니다.

Staggered Elements(지그재그 형식으로 배치된 요소)

Divi 테마 사용 방법

위와 같은 효과를 구현하려면 첫 번째 이미지와 세 번째 이미지에 bottom margin을 적용하고, 두 번째 이미지에 top margin을 적용하면 됩니다.

Closed Grid(여백이 없이 꽉 찬 그리드)

Divi 테마 사용 방법

그림과 같이 여백이 없는 그리드 형식으로 이미지를 배치하려면 “일반 설정”에서 Use Custom Gutter Width를 Yes로 바꾸고 Gutter Width를 최저값으로 설정하면 됩니다.

Divi 사용법

한글 버전에서는 Use Custom Gutter Width가 “를 사용하는 주문 폭 개골창“이라는 황당한 표현으로 번역되어 있네요. 아래와 같이 내부에 2개 행으로 이미지를 배치시키고 “Use Custom Gutter Width” 설정을 조정하면  위의 샘플과 같은 효과를 얻을 수 있습니다.

Divi 테마 사용 방법

Overlapping Images(이미지 중첩)

Elegant Themes의 Divi 테마 사용법

위와 같이 이미지가 겹쳐지도록 설정하려면 하나의 행(Row) 내에 2개의 열(Column)을 배치하고 각 열에 이미지를 추가합니다. 그런 다음 왼쪽 이미지에는 “고급 디자인설정”에서 오른쪽 외부 여백(right margin)을 마이너스로 적용(예: -175px)하고, 오른쪽 이미지에는 상단 외부 여백(top margin)을 적용하면 됩니다.

Overlapping Text(텍스트 중첩)

Elegant Themes의 Divi 테마 사용법

텍스트를 겹치게 배치하는 방법은 이미지 중첩과 비슷하지만 몇 가지 사항을 더 고려해야 합니다. 먼저 2개 이상의 행(Row)이 필요합니다. 샘플에서는 2개의 행(하나는 full-with 열을, 하나는 두 개의 열 배치)이 사용되었습니다.

Elegant Themes의 Divi 사용법

중첩(겹칩) 자체는 아래 행(Row)의 텍스트 모듈의 모듈 설정에서 이루어집니다. 고급 다자인 설정 탭에서, 외부 여백과 내부 여백을 제어하는 섹션까지 스크롤합니다. top margin(외부 여백에서 상단)에 마이너스 값을 입력합니다(예: -40px).

텍스트를 중첩시킬 때에는 텍스트 정렬도 까다로울 수 있습니다. 고급 디자인 설정에서 왼쪽 외부 여백의 값을 다양하게 하여 최적을 값을 결정하고, 일반 설정에서 텍스트 위치(Text Orientation) 설정도 다양하게 하여 테스트해보도록 합니다.

Divi 테마 사용법

일반 설정 아래의 “텍스트 위치“에서는 위의 그림과 같이 네 가지 옵션 중에서 설정할 수 있습니다.

Image Overlapping A Section(이미지를 섹션과 중첩시키기)

Divi 테마 사용법

위의 그림과 같이 이미지를 다른 섹션과 겹치도록 하는 효과를 구현할 수 있습니다. (위의 동영상 참고)

마치며

Divi 테마에서 사용자 정의 내부여백, 외부여백 및 gutter(컬럼 사이의 여백)를 활용하여 다양한 효과를 낼 수 있습니다.

Themeforest의 많은 테마에서는 Visual Composer라는 페이지 빌더가 사용되고 있습니다. VC는 쉽게 레이아웃 작업이 가능하도록 돕지만, 한편으로는 사이트의 속도를 떨어뜨리고 여러 가지 문제를 발생시킵니다(“워드프레스 페이지 빌더의 장점과 단점” 참고). Divi 테마는 사이트 속도 면에서는 비교적 빠른 속도를 보여주는 것 같습니다.

Related Posts

Comments