Elementor 백그라운드 배경 속성: Style – Background와 Background Overlay (CSS)

3

이 글은 Elementor를 사용하면서 페이지, 섹션, 칼럼 옵션설정에서 공통적으로 볼 수 있는 Style > Background 설정에 대한 설명입니다.

워드프레스 페이지빌더 Elementor의 배경(백그라운드 – 이미지,색상) 설정은 CSS의 background 속성에 기반하므로 CSS 디자인방식을 벗어날 수 없습니다. Elementor의 상세 옵션 설정은 사실상 CSS 값을 바꿔주는 정도에 지나지 않습니다.

그래서 이번글은 Elementor 사용법 강좌글의 일환으로 작성되었지만 CSS에대한 일부지식을 언급할 텐데 HTML과 CSS에대해 이해한다면 Elementor를 사용하는데 많은 도움이 될 것입니다. HTML과 CSS는 다른 사이트등에 검색만해도 자료가 많이 있으니 제 블로그에서는 본문에서 꼭 필요한 거 아니면 특별히 기술하진 않아요.

이번글에서는 참고해야할 사전지식을 먼저 알아보고 Elementor의 2개의 옵션설정, Backgournd와 Background Overlay에 대해 알아봅니다.

Elementor에서 배경으로 지정할 수 있는 요소

Elementor 에서는 페이지, 섹션, 칼럼에는 Background를 각각 지정할 수 있는 옵션이 있는데요. 커스텀 CSS를 논외로 했을 때 지정할 수 있는 배경은 각각 다음과 같습니다.

  • 배경으로써 지정할 수 있는 요소: 단색, 그래디언트 색상, 이미지, 비디오(섹션)
  • 페이지의 배경: <body> 태그의 배경을 지정합니다.
  • 섹션과 칼럼의 배경: NORMAL과 HOVER 상태의 백그라운드를 따로 따로 설정할 수 있습니다.
  • 섹션 배경: 비디오를 배경으로 사용할 수도 있습니다.

웹페이지 레이어 계층과 요소들의 컨테이너

웹디자인을 하기위해 알아야할 필수적인 2개의 개념이 있는데, 레이어컨테이너입니다. 

HTML 태그 요소들의 레이어 계층

디자인 영역에는 소위 ‘레이어(Layers)’라고 하는 개념이 있습니다. 포토샵을 사용해봤다면 단숨에 알 것이지만, 혹시 레이어가 무엇인지 모른다면  단순히 말해서 ‘여러장 겹친 투명한 종이’라고 할 수 있겠습니다. 

스케치북처럼 현실의 일반 종이라고 한다면 흰색이 칠해진 불투명한 종이이죠. 그 종이들이 층(레이어)을 이루어 뒷장은 앞장에 가려서 보이지 않지만 여전히 존재하게 되고 앞장의 일부분이 찢어지거나 구멍이 뚫리면 뒷장의 일부가 보이죠. 또는 앞장이 기름종이처럼 반투명하다면 뒷장이 비추어 보이기도 합니다.

웹페이지 또한 여러요소들이 HTML DOM과 CSS를 통해서 레이어 계층을 이루며 서로 가리거나 나란히 놓아지게 되는데요. Elementor로 워드프레스 페이지를 디자인할 때 또한 페이지, 섹션, 칼럼 그리고 콘텐트가 되는 위젯은 서로 앞, 뒤로겹쳐서 존재하게 됩니다.

페이지를 바탕으로 섹션, 칼럽, 콘텐트가 각 구역을 이루며 겹쳐있는 모습

위 그림에 나타나는 각각의 요소들은 HTML 엘리먼트(Elements,태그)들로 구성되어있습니다.

  1. 콘텐트(Elementor에서는 엘리먼트 위젯)
  2. 칼럼배경 (+ Background Overlay)
  3. 섹션배경 (+ Background Overlay)
  4. 페이지배경

참고: 배경 오버레이(Background Overlay)는 차후 설명됩니다.

Elementor에서 페이지배경, 섹션배경, 칼럼배경을 모두 각각 다르게 지정할 수 있는데 위 리스트 처럼 맨 위를 레이어의 맨 앞장이고 마지막에있는 페이지배경은 맨 뒷장이 됩니다.

예를 들어 칼럼, 섹션, 페이지배경을 모두 지정했는데 그 면적, 위치가 서로 모두 같고 불투명한 배경이라면 칼럼배경만 보일 뿐 섹션과 페이지배경은 칼럼배경에 가려져서 보이지 않게 되는 것이죠.

참고: 레이어계층 순서에 영향을 주는 CSS의 z-index 속성 값은 고려치 않음

컨테이너: HTML 엘리먼트의 컨테이너와 콘텐트

HTML과 CSS에대한 지식이 전무할 경우 배경이라고 하면, 단순히 페이지의 배경이라고 생각할 뿐이겠지만 웹페이지를 이루는 각 요소는 구조화된 HTML 요소들로 이루어져있는데요.

각각의 HTML 엘리먼트(태그)는 네모난 상자로 개념화되는데 이것을 컨테이너(container)라고 합니다. 컨테이너는 개념적인 것일뿐 눈에 보이는 요소는 아니지만 이 컨테이너를 웹페이지에서 실제로 보려면 CSS로 테두리(border)를 넣거나 배경으로 단색을 넣어보면 알 수 있습니다.

문장 주변에 사각형 테두리

참고: 테두리의 두께는 CSS 높이와 너비에 영향을 주므로 단순히 컨테이너를 확인하기 위해서라면 배경을 단색으로 넣어보는걸 추천합니다.

위 처럼 <p>태그를 예로 들었을 때, 글자가 컨테이너안에서만 존재할 수 있는 것은 아닙니다.폰트의 라인베이스 높이, 크기같은 CSS 속성값에 따라서는 컨테이너를 벗어나 보일 수도 있습니다. 그래서 어쩌면 container라는 용어는 사실 어울리지 않는 것이라고 할 수도 있죠.

컨테이너의 크기는 딱 떨어지게 가로 세로 유닛(px,em등)값을 넣어서 크기를 지정할 수 있는 것이라기보다는 웹페이지의 너비 콘텐트의 크기, 패딩값, 테두리 두께값들이 정해지면 이 컨테이너의 크기도 정해진다고 보면 됩니다. 

만일, px 단위로 딱 떨어지는 가로, 세로 크기를 정하고 싶다면 Elementor에서는 Custom CSS 룰을 직접 작성해줘야할 텐데요. 웹페이지 태생부터가 모바일, 태블릿, 데스크탑 웹브라우저에서의 가로 세로 크기가 항상 다를 수 있다는 점을 염두에 둬야겠습니다. 

위 그림처럼 콘텐트인 텍스트의 폰트 크기, 컨테이너 패딩 값에따라 전체 컨테이너 가로세로 크기 또한 달라지지만  CSS 배경(이미지) 자체는 이 컨테이너의 크기에 영향을 주지 않습니다. 단지 컨테이너 높이가 0이든, 100이든 배경으로써 존재하게 될 뿐이고 그래서 배경을 지정했음에도 불구하고 컨테이너의 높이나 너비가 0이라면 배경은 보이지 않게 될 뿐입니다.

그 예로, Elementor를 사용할때 아직 위젯을 넣지않고 섹션과 칼럼만으로 레이아웃을 잡고 시작할 때가 있게될텐데 아래 그림처럼 위젯이 없다면 실제 렌더링 되는 페이지에는 섹션이나 칼럼의 높이가 0에 가까울 것이므로 배경을 지정해도 나오지 않게 됩니다. 그러므로 콘텐트(위젯)을 먼저 채워 칼럼의 높이가 정해진뒤에 배경을 조정하는 순서를 추천합니다.

아래그림은 섹션배경을 주황색, 칼럼배경을 녹색으로 했지만, 칼럼 배경은 보이지않고, 렌더링된 최종페이지에서조차도 섹션 배경이 얇은 한 줄로만 나오는 모습입니다.

엘리멘터에서 디자인 중인 화면과 실제 렌더링된 페이지를 나타내는 그림

그리고 아래그림은 위 상태에서 텍스트 위젯(콘텐트)을 칼럼에 넣고 나서야 콘텐트의 높이에 따라 칼럼높이가 늘어마면서 섹션 높이도 높아지고 그 결과 섹션과 칼럼 배경색이 보이게되는 모습입니다.

디자인중인 화면과 실제 페이지 화면 스크린샷

Background – Elementor에서 배경 지정하기

Elementor에서의 배경은 다음 3 가지 컨테이너에 넣을 수 있습니다.

  • 페이지
  • 섹션
  • 칼럼

Background Type 을 이미지로할지, 단색으로할지, 그래디언트 색상으로할지 먼저 정해야합니다. 각 컨테이너의 Background Type 옵션은 아래처럼 찾을 수 있습니다.

페이지 배경 지정 옵션

기어모양 아이콘을 클릭하자 Page Settings가 나온다페이지의 배경을 지정하려면 패널 하단 툴바의기어모양 아이콘Page Settings > Style > Body Style > Background Type 에서 지정할 수 있습니다.

 

 

 

섹션 배경 지정 옵션

섹션 배경 옵션은 6개 점으로 된 편집핸들 이미지섹션 편집핸들을 클릭한 뒤 왼쪽 패널에 Edit Section이 나타나면 Style > Background > Background Type 에서 찾을 수 있습니다.

왼쪽 패널에 나타난 Edit Section

칼럼 배경 지정 옵션

칼럼 배경 옵션은 두 조각을 이어붙인 모양의 편집핸들 이미지. 엘리베이터 스크린도어를 연상케한다.칼럼 편집 핸들을 클릭한 뒤 왼쪽 패널에 Edit Column이 나타나면 Style > Background > Background Type 에서 찾을 수 있습니다.

Edit Column 패널

위 3가지에서 Background 옵션에 서로 다른점이 있다면, 페이지세팅에서는 Background Type 옵션만 존재하고, 섹션과 칼럼에는 Background Type 위에  NORMALHOVER 중에 선택할 수 있는 옵션이 존재한다는 것과, 섹션에서는 비디오 카메라 형상의 아이콘비디오 배경을 Background Type 중 하나로 지정도 가능하다는 것입니다.

Background Type 선택

  • 아무것도 선택되지 않음배경을 아무것도 지정하지 않은 상태
  • 크래식 세그먼트 선택Classic  선택
  • Gradient 세그먼트 선택Gradient 선택
  • 비디오 세그먼트 선택Video 선택 (섹션 한정)

그러면 먼저 Background Type 중 공통사항이 되는 Classic(클래식)과 Gradient(그래디언트)를 먼저 살펴보겠습니다.

Background Type – classic

Color와 Image

classic 아이콘클래식 백그라운드가 선택되면 페이지배경을 단색(Color)으로 지정하거나 이미지(Image)파일을 배경으로 할 수 있는데요.

Edit Column의 Style > background 옵션 패널 화면

여기에서 주의깊게 생각해볼 게 있다면, 배경이미지를 Color와 Image 둘 중 하나가 아니라 둘 모두 지정할 수 있다는 점입니다. 대부분의 경우엔 둘 중 하나만 선택하게 될 겁니다.

이 둘 사이에서도 레이어 개념이 있는데 Color로 지정된 색상이 뒷편에 있고, Image로 지정된 이미지 파일이 앞에 보이게 됩니다. 그래서 만일 둘 모두 지정된다면 Color로 지정된 색상은 Image에 가려진 부분은 보이지 않게 되는것이 기본입니다.

아래 그림처럼 Color는 주황색, 그리고 Image로는 컨테이너(섹션)보다 작은 사진을 배경으로 size 옵션을 Auto로 설정하면 그 관계가 보이게 됩니다. 물론, Image가 컨테이너를 모두 차지할 정도로 크거나 그렇게 되도록 나머지 옵션이 조정되면 Color를 모두 가리게되겠죠.

Color 배경이 더 크고 그 앞에는 배경으로 쓰인 사진이 좀더 작게 나오고 있다
Image 옵션 – Repeat: No-repeat, Size: Auto

그리고 Image에 지정되는 이미지파일을 반투명한 것으로 사용한다면 뒷편에 있는 Color가 비춰보이게되어 배경사진에 Tint 효과를 줄 수도 있습니다.  아래 그림처럼 말이죠.

배경사진이 반투명하자 뒤에 비추어보이는 색상으로 사진이 물듬
Image 옵션 – Repeat: No-repeat, Size: Cover

 위와같은 배경 Tint 효과나 블랜딩은 섹션과 칼럼 배경의 경우 차후 설명할 Background Overlay 옵션 설정을 통해 더욱 다양하고 효과적으로 할 수 있습니다.

 

Classic > Color

단색을 원한다면 Color를 색상을 클릭해서 컬러 픽커를 통해 색상을 고를 수 있습니다.

커러픽커 각 요소 명칭이 나타난 그림

컬러픽커에서 색상의 투명도(Alpha 값)를 조정할 수 있는데 페이지배경 – 섹션배경 – 칼럼배경 3가지의 레이어 관계를 생각 해 볼 때 섹션의 배경이 반투명하다면 그 뒤에있는 페이지 배경이 비춰보이게 될 겁니다.

 

Classic > Image

사진이나 이미지를 배경으로 지정하려면 Image 아래 더하기 모양 아이콘+ 버튼을 클릭해 워드프레스 미디어라이브러리에서 사진을 고르거나 그 옆에있는 Dynamic 아이콘Dynamic을 클릭해서 이미지파일을 가져올 수 있습니다. 

워드프레스 미디어 라이브러리가 나온다

참고: Dynamic은 Elementor에서 지원되는 또다른 기능이므로 후에 다른 글에서 다시 알아보도록 하겠습니다.

이미지를 추가하면 아래처럼 몇가지 백그라운드 속성을 조정할 수 있는 옵션이 생깁니다.

Position Attachment, Repeat, Size 속성을 변경할 수 있는 옵션

이 옵션들은 CSS에서 background와 관련된 속성입니다.

  • Position: 이미지를 맞출 기준점을 정합니다.
  • Attachment: 배경이미지의 스크롤여부를 정합니다.
  • Repeat:  배경이미지를 어떻게 반복할지 정합니다.
  • Size: 이미지를 컨테이너에 어떻게 맞출 것인지를 정합니다.

이 옵션들을 이해함으로써 배경을 어느정도 조절할 수 있는데요. CSS의 모든 background- 속성을 지원하는 것은 아니라서 다른 속성을 사용하고 싶다면 Custom CSS를 사용해야합니다.

Classic > Image - Position

Position은 CSS의 background-position 속성을 지정할 수 있는 옵션으로, 컨테이너와 배경이미지 모두 사각형 박스모델을 갖게되는데 둘을 맞출 기준점을 정합니다.

  • Top Left: 윗 변 왼쪽 모서리에 정렬 (Default)
  • Top Center: 윗변 가운데에 정렬
  • Top Right: 윗변 오른쪽에 정렬
  • Center Left: 가운데 왼쪽변에 정렬
  • Center Center: 정 가운데에 맞춤
  • Center Right: 가운데 오른쪽변에 맞춤
  • Bottom Left: 아랫변 왼쪽 모서리에 정렬
  • Bottom Center: 아랫변 가운데에 정렬
  • Bottom Right: 아랫변 오른쪽 모서리에 맞춤

네모상자에 각 Postion 위치가 표시됨

참고: CSS 의 x, y를 특정 퍼센트(%)나 px 같은 유닛값으로 지정하는 속성은 Elementor 옵션에 나오지않는데 사용하고 싶다면 Custom CSS 룰을 직접 작성해 사용해야하겠습니다.

Default는 background-position 속성을 지정하지 않은 것으로, 그려면 기본으로 Top Left에 맞추게 됩니다.

컨테이너와 이미지의 Top Left 위치

CSS의 background-position 속성은 컨테이너의 크기와 상관없이 맞추게 됩니다. 그러면 배경이미지 파일이 컨테이너보다 클 때와 작을 때를 생각해볼 수 있을 겁니다.

큰이미지는 컨테이너에 짤리고, 작은이미지는 반복

  • 컨테이너보다 배경이 클때: 짤림 – size 옵션으로 조정
  • 컨테이너보다 배경이 작을때: 반복 – repeat 옵션으로 조정

위 그림 처럼 컨테이너보다 배경이미지가 크다면 기준점에서 먼곳은 이미지가 짤려보이게됩니다. 배경이미지 주변부가 그리 중요한 것이 아닐 것이므로 문제가 안된다면 Position을 Center Center로 설정하는 것도 방법입니다. 배경이미지의 모든 부분이 나와야한다면 아래에서 설명할 Size 옵션을 조정함으로써 바꿀 수 있겠습니다.

컨테이너보다 이미지가 작다면 위 그림 오른쪽처럼 타일모양으로 배경이미지가 반복되게 됩니다. 이 효과는 아래에서 설명할 repeat 옶션에서 반복하지 않도록 설정할 수 있지만, 배경을 반복되는 패턴이 그려진 이미지로 넣고 싶다면 작은 이미지를 배경으로 사용함으로써 미미하지만 더 빠른 페이지 로딩과 효율적인 트래픽을 감소효과르르 얻을 수 있기도 합니다.

Classic > Image - Attachment

이 옵션은 CSS의 background-attachment 속성을 지정하는 옵션으로, 웹페이지에서 콘텐트의 내용이 길때 우리는 스크롤을 해서 읽게 되는데요. 화면이 스크롤될때 배경이미지도 함께 스크롤되어 올라가도록 할지, 배경이미지는 스크롤되지 않고 고정시킬지를 결정합니다.

  • Scroll (Default) –  콘텐트가 스크롤 됨에 따라 배경이미지도 함께 스크롤 됩니다.
  • Fixed – 콘텐트가 스크롤 되어도 배경이미지는 고정됩니다.

Elementor로 디자인되는 페이지의 특성상 섹션이나 칼럼 내의 콘텐트만 스크롤 될일이 별로 없을 것이므로  페이지세팅(Page Settings)에서 지정하는 페이지배경에서나 조정할 만한 옵션일 겁니다.

Classic > Image - Repeat

배경이미지가 컨테이너보다 작을 때는 이미지가 타일모양으로 반복되는데요. 이 것은 기본값(Default)가 그렇고, 반복되길 원치않는다면 No-repeat를 선택할 수 있습니다. 이 옵션은 CSS의 background-repeat 속성값을 조정합니다.

  • No-repeat: 배경을 반복적으로 나타내지 않음
  • Repeat : (Default) 가로, 세로 방향으로 타일모양으로 반복
  • Repeat-x: 가로 방향으로 반복
  • Repeat-y: 세로 방향으로 반복
Classic > Image - Size

이 옵션은 CSS의 background-size 속성을 지정하는 것으로, 특정한 가로 세로 크기를 지정할 수있는 것은 아니고 컨테이너의 크기와 배경이미지의 크기가 다를 때 배경이미지를 컨테이너에 어떻게 맞출것인가 지정하는 옵션입니다.

  • Auto (Default): 배경이미지의 크기를 그대로 사용합니다.
  • Cover: 배경이미지가 컨테이너를 모두  차지하도록 덮습니다.
  • Contain: 배경이미지가 모두 보이도록 컨테이너 안에 넣습니다.

Cover와  Contain을 쉽게 이해하려면 먼저 위에서 얘기한 다른 옵션을 조정해볼 필요가 있습니다.

Size: Auto

Auto 속성은 배경이미지의 실제 크기(픽셀면적)를 그대로 사용한다는 특징이 있습니다. 그 결과 컨테이너의 크기가 이미지크기와 다르다면 여백이 생기든 이미지가 짤려보이든 하게 됩니다.

Size 속성값이 Auto가 아닐 땐 웹브라우저가 이미지를 실제보다 크게 혹은 작게 컨테이너크기에 맞추어 새롭게 랜더링해 보여주는 것입니다.

아래그림은 Position은 Center Center로, Repeat는 반복하지 않도록하고 Size를 Auto로 지정했을 때인데 컨테이너가 배경이미지보다 훨 씬 커서 좌,우,상,하 여백이 모두 발생하죠. 

섹션 면적보다 작은 배경이미지

반면 배경이미지가 컨테이너보다 훨씬 크다면 컨테이너를 모두 차지하면서 배경이미지의 일부만 보이게될 겁니다. 오늘날 배경이미지의 auto 속성은 잘 쓰이지 않을 겁니다만,  repeat 옵션으로 작은 패턴이미지 배경을 반복 할 때 정도가 적절한 쓰임일 것같습니다.

Size: Cover

섹션의 배경이미지를 지정하고 Position은 Center Center로, Repeat는 반복하지 않도록하고 Size를 cover로 지정하면 아래그림처럼 컨테이너(섹션)에 가득 차도록 이미지를 채웁니다.

섹션을 가득 채운 배경이미지

배경이미지의 실제크기와 상관없이 컨테이너를 모두 채우도록 이미지를 채우게되는데 가로와 세로중 짧은 쪽을 맞추기때문에 위의 배경이미지의 경우엔 이미지의 좌우가 짤렸습니다. 

그리고 위의 데모에서는 컨테이너의 크기가 제법커서 웹브라우저가 이미지를 실제크기보다 많이 크게 확대하여 렌더링해 보여주므로 픽셀이 깨져 흐릿해보이게 됩니다. 큰 컨테이너에는 적당히 큰 이미지를 사용해야 깨끗한 화질의 사진이 됩니다.

Size: Contain

아래 그림은 섹션의 배경이미지를 지정한 모습인데요. Position은 Center Center로, Repeat는 반복하지 않도록하고 Size를 Contain으로 바꿔보면 섹션크기(컨테이너의 크기. 파란테두리)안에 이미지의 모든 부분이 들어맞도록 맞춰진 모습입니다. 

이미지와 컨테이너 비율이 맞지않아 섹션 위아래에 여백이 생김

Contain 은 실제 이미지크기와 상관없이 이미지크기를 줄이거나 늘려서 컨테이너의 크기에 맞춰 모두 보이도록 해줍니다. 그 결과 컨테이너 위, 아래 또는 좌, 우로 여백이 생기게됩니다. 

컨테이너와 배경이미지의 가로세로 비율이 같다면 이런 여백이 보이지 않을 겁니다만 보통은 그렇게까지 맞추진 않습니다. 반응형 웹페이지처럼 페이지 너비가 바뀌면 어차피 컨테이너의 크기, 비율도 모두 변하기 때문이죠.

 

Background Type – Gradient

그레디언트(그라데이션) 색상은 저녁노을이 질 때의 하늘처럼 한 색상에서 다른 색상으로 점진적으로 변화하는 색상을 말합니다.

우선 참고로, 아래그림은 페이지배경을 설정한 건데요. Gradient 색상이 아래처럼 반복되는 것은 아직 페이지 본문에 콘텐트( 엘리먼트 위젯들)가 몇 개 없어서 수직방향 길이가 짧아서입니다. 위젯을 채워나가면서 전체 내용이 웹브라우저 프래그램 창의 높이보다 높게되면 하나의 그래디언트 색상으로 바뀌게 됩니다.

반복되는 Gradient
Page Settings에서 Bacground Type을 Gradient로 지정한 모습

 

섹션 선택 후 Style > Background > Background Type을 Gradient로 선택하고 나면 아래처럼 추가 옵션이 생기는데요. 왼쪽 패널에 보면 3개로 나누어 생각할 수 있습니다.

섹션 배경타입을 Gradient로 설정한 모습
섹션배경 설정: Gradient

위 그림의 왼쪽 패널에 나타난 옵션 중에서 녹색 상자 두 개는 그래디언트의 첫 번째 색상두 번째 색상을 조절하는 것이고 빨간 상자는 Gradient의 종류(Type)와 각도(Angle)를 조절하는 옵션입니다.

Location

위 그림에서 녹색상자로 표시한 첫 번째 색상 설정과 두번째 색상설정에서 Location 옵션이 각각 0과 100으로 되어있는데, Gradient가 적용되는 컨테이너의 시작부분을 0, 끝 부분을 100으로 봅니다. 위 그림에서는 섹션의 윗변이 0이고, 아랫변이 100인거죠.

Gradient는 한가지 색상에서 다른 색상으로 서서히 변화하는 색상이므로, 어디서부터 그 변화가 시작될 지를 Location 값으로 조정할 수 있는 것입니다.

아래그림처럼 Location: (0~)40까지는 파란색, 70(~100)부터는 빨간색으로 각 색상을 설정하자 41~69 사이에서만 색상변화가 생기는걸 볼 수 있습니다.

섹션: 윗부분은 파란색, 아래부분은 빨간색 그래디언트 백그라운드

첫번재 색상고 두 번째 색상사이에서도 우선순위가 존재하게되는데 Location이 서로 겹치는 범위에서는 그부분은 첫 번째 색상만 나타나게 됩니다. 그 결과 아래그림처럼 33~53사이는 첫번째 색상만 나타나면서 Gradient 효과없이 두가지 색상인 투톤 배경효과를 내보았습니다.

반절을 기준으로 위는 파랑, 아래는 빨강인 그라데이션 배경색

 Location 값 1 ~ 100은 어디까지나 컨테이너의 끝과 끝을 가리키고, 웹페이지의 컨테이너의 높이는 바뀔 수 있다는 점을 상기해야겠습니다.

Type 과 Angle 그리고 Position

Gradient 배경색상의 마지막 옵션으로는 Type과 Angle이 보이는데요.그래디언트의 유형(Type)을 Linear 선택하느냐, Radial로 선태개하느냐에 따라 그 아래 옵션이름이 다르게 바뀝니다.

  • Type을 Linear로 하면 Angle
  • Type을 Radial로 하면 Position

Type: Linear 일때 Angle:

그래디언트 유형이 Linear(리니어)라는 건 경계가 일직선이라는 건데요. 앞서 예시 스크린샷에 나온 것들이 모두 Linear 타입입니다. 그리고 Angle은 그 선의 각도인데 위에 이미지들은 모두 180도로 고정되어있습니다.

아래 그림은 경계선을 좀더 잘 보이도록 하기위해 Location을 좀 조정한건데요. Angle 각도를 210도로 설정해서 사선형태로 그래디언트 색상이 나타나는걸 볼 수 있습니다.

사선으로 기울어진 그래디언트

Type: Radial 일때 Positon:

Type이 Radial 일 때 Postion 속성값을 아래 중 하나로 고를 수 있습니다.

  • Center Center
  • Center Left
  • Center Right
  • Top Center
  • Top Left
  • Lop Right
  • Bottom Center
  • Bottom Left
  • Bottom Right

Radial 이라는 것은 방사형(타원형, 원형) 으로 나타나는ㄴ 그라데이션 색상인데 Position은 그 원의 중심위치를 컨테이너의 어느 위치에 놓을 것인가입니다. 아래그림은 위치파악을 쉽게하기위해 적당히 Location값을 조정했는데 요. Position이 Center Center 일 때 한가운데 자리잡고 있는 걸 볼 수 있습니다.

섹션 가운데에서 색이 퍼지는 효과

그리고 아래그림은 Positon을 Top Left로 함으로써, 왼쪽위에서 빛이 들어오는 효과를 낸 Gradient 배경색상의 예시입니다.왼쪽위에서 빛이 비추는 효과의 그래디언트 색상 배경

 

커스텀 CSS를 이용한 Gradient 컬러 배경 색상

Elementor에서 기본 제공되는 Gradient 옵션에서는 시작컬러와 끝컬러만 지정할 수 있도록 되어있는데 (포토샵등을 이용한) 그래픽 디자인을 해온 분이라면 그보다 더 복잡한 그레디언트 색상을 사용할 수 있다는 것을 알고 있을 겁니다. Elementor에서도 그런 복잡한 그라데이션 패턴을 사용하고 싶다면 Elementor Pro 플러그인이 제공하는 Custom CSS 기능을 사용해서 CSS 룰을 직접 작성해서 할 수 있겠습니다.

그런데 CSS 룰(코드)을 작성할 줄 모른다면 CSS용 Gradient 결과를 프리뷰로 보면서 만들면 코드를 자동으로 작성해주는 웹사이트들이 몇개 있는데 이런 사이트를 이용하는 것도 추천합니다.

  • Ultimate CSS Gradient Generator
    •  Browser Compatibility 에서 IE9 지원이나 Maximize Compatibility(호환성 최대치 지원)등을 체크하면 그에 맞춰 CSS 룰을 작성해줍니다.
  • CSS Gradient
    • 위 사이트보다 좀더 깔끔함. 사이트 메뉴 중 BACKGROUNDS, SWATCHES 등에 들어가면 멋진 디자인감각이 넘치는 CSS 그래디언트 프리셋이 많아 손쉽게 CSS룰을 복사 해올 수 있습니다.

마우스 포인터 Hover 효과를 위한 NORMAL 과 HOVER 배경 설정

웹서핑을 하다보면 버튼이나 사이트 메뉴등에 마우스 포인터를 올렸을 때 색상이 변하는 것을 경험한 적이 있을 겁니다. 그렇게 마우스 포인터를 올렸을 때 특정 효과가 나타나는 것을 Hover Effects(하버 효과, 마우스 오버 효과)라고 하는데요. Elementor에서도 여러가지 하버효과를 줄 수 있는 기능이 이곳 저곳에 있는데 섹션과 칼럼의 배경 설정 또한 그 중 하나입니다.

페이지 배경설정에서는 없지만 섹션칼럼의 배경이미지를 설정하는 Background 옵션 상단에는 NORMAL과 HOVER로 또 나누어서 Background Type을 지정할 수 있는 것을 볼 수 있습니다. 

NORMAL은 마우스 포인터가 컨테이너(섹션, 칼럼)에 올려져있지 않는 보통 상태 일 때의 배경을 지정하는 것이고 HOVER는 마우스 포인터가 올려졌을 때 배경을 지정하는 것입니다. 그리고 위 그림처럼 HOVER를 선택하면  Background Type 아래쪽에 Transition Duration이라은 추가 옵션도 생기는 걸 볼 수 있습니다.

  • Background Type – 앞서 위에서 설명한 Classic과 Gradient 배경 설정 내용과 같습니다.
  • Transition Duration – 마우스 포인터를 올렸을 때 배경이미지가 변하는 애니메이션 효과의 시간을 조정합니다. NORMAL과 HOVER의 Background Type이 같을 때 적용됩니다.

예를 들어서 NORMAL과 HOVER 일 때의 배경이미지를 서로 다르게 해서 마우스 포인터가 올라왔을 때 배경이미지가 바뀌게할 수도 있고 컨테이너보다 큰 배경이미지를 둘 모두에 지정해두고 Position 만 다르게해서 마우스포인터를 올렸을 때 배경이미지가 스크롤 되는 것같은 애니메이션 효과를 줄 수도 있겠습니다.

 

 

Background Overlay – 배경 오버레이 효과

Background Overlay 옵션이 나타난 모습백그라운드 오버레이(Background Overlay)는 섹션과 칼럼에서 사용될 수 있는 옵션인데요. 평소에는 보이지 않다가 Style탭의 Background 옵션에서 NORMAL 모드의 Background Type을 한가지라도 지정하고나서야 바로 아래 쪽에 추가로 나타나는 옵션입니다. 

배경에 특수효과를 주고싶을 때 Background Overlay 옵션을 사용하면 되겠습니다

 

레이어관계: HTML 구조상의 백그라운드 오버레이와 CSS

Background와 Background Overlay의 레이어 관계에서는 Background Overlay가 앞쪽에 있습니다.

 
사실, CSS에 background overlay 라는 스타일 속성이 따로 있는 것은 아닌데요. Elementor가 만들어내는 결과에서 백그라운드 오버레이는 또다른 HTML 엘리먼트(보통 div 태그)를 추가하고 그것에 background 속성을 조정하는 방식으로 추가됩니다.

섹션의 배경 지정을 예로 들어 볼 때 Elementor의 Background 옵션과 Background Overlay 옵션 둘 모두에 각각 다른 이미지를 배경으로 넣었다고 생각해보죠. 아래그림이 그 것을 간단하게 구조적으로 표현한 모습입니다

백그라운드 요소는 <section>태그 사용, 백그라운드 오버레이는 div 태그 사용

HTML 마크업 언어로는 아래처럼 백그라운드 오버레이로 쓰인는<div>태그가 <section> 태그 안에 자식 엘리먼트로서 들어가게 됩니다. 그리고 컨테이너의 크기와 위치가 서로 같죠.

<section class="elementor-section">
    <div class="elementor-background-overlay">
    </div>
</section>

만일 Background Overlay의 이미지가 컨테이너를 가득채우며, 완전히 불투명하고(Opacity = 1), Blend Mode가 Normal 이라고 한다면, 레이어 계층상 앞에 있는 Background Overlay가 뒤에있는 Background에 설정된 것들을 모두 가리게 되므로 Background 옵션을 설정할 이유가 없어집니다.

그 예로, 제경우 배경사진을 흐리게 하기위해서 CSS Filters 중 하나인 이미지 블러(Blur)기능만 필요했는데요. 아래 그림처럼 Background 옵션의 background Type에서 classic 아이콘Classic만 선택하고 다른 옵션들은 손대지 않은 채 Bakground Overlay 에서만 사진파일을 지정하고 CSS Filters 옵션을 조정해서 사용했습니다.

Background Overlay 만으로 배경이미지 흐림효과

Background와 같은 옵션과 다른 옵션

Background Overlay 옵션에서 조정할 수 있는 CSS 속성들은 앞서 언급한 Background 옵션에서의 그 것과 대부분 같다는 걸 눈치채게 되실건데요. 다른점이 있습니다.

Image칸 아래쪽에 자리잡은 Opacity, CSS Filters, Blend Mode 옵션

background Type 중 classic 아이콘Classic에서의 Color나 Image의 Position, Attachment, Repeat, Size 그리고 Gradient의 기본속성은 위에 설명한 Background 옵션 조정과 완전히 같은데, 패널 아래 쪽에는 위 그림에 표시한대로 Opacity, CSS Filters, Blend Mode가 추가로 있다는 것이죠.

앞서 Background 에서 이미 설명했던 항목들은 생략하고 Background Overlay에 있는 아래 3가지 항목만 설명하겠습니다.

  • Opacity: 백그라운드 오버레이의 전체 불투명도 설정
  • CSS Filters: 백그라운드 오버레이에 CSS 필터 효과 적용
  • Blend Mode: 이미지 블렌드 모드 설정
Opacity

백그라운드 오버레이의 불투명도를 변경하는 것으로, 0이면 완전히 투명하게 되고, 1이면 100% 불투명합니다. 레이어 개념상 뒤에 위치한 Background 가 비춰보이게 하고 싶거나 Background Overlay의 블랜드 모드 효과등을 약하게 하고 싶을때 값을 내리면 되겠습니다.

대표적인 예로 Background 에서는 사진을 넣고, Background Overlay는 Color나 Gradient 색상을 넣은 뒤, 오버레이의 투명도를 낮춰서 백그라운드사진에 틴트효과를 줄 때 효용성이 클 것같습니다.

백그라운드 오버레이의 녹색색상을 opacity 0.63으로 낮춰서 백그라운드에 색상을 입히는 효과

조금 응용해서 아래 그림처럼 백그라운드 오버레이를 Radial 타입의 그래디언트로 지정하고 Opacity를 조금 낮춰  오른쪽 위에 빛효과를 넣어봤습니다.

백그라운드 이미지와 백그라운드 오버레이 그레디언트 이미지

그 결과는 아래처럼 나오게 됩니다.

왼쪽 위 구석이 밝고 오른쪽 아래로 향할수록 어두워지는 이미지

참고로 이런 tint 효과들은 아래에 설명할 Blend Mode 중에서 Multiply, Screen, Overlay를 이용하는게 더 효과적일 수도 있습니다.

CSS Filters

CSS에는 이미지에 효과(effects)를 적용할 수 있는 속성이 있고 이를 이용해 이미지를 흐리게한다던지 Tint 효과를 준다든지 특수한 효과를 줄 수 있습니다. 그 (사진)필터 종류를 선택하고 조정하는 옵션입니다.

이것은 대부분의 경우 단색(Color) 오버레이를 사용할 때보다는 Image로 사진을 백그라운드 오버레이로 사용할 때 효용성이 있을 겁니다.

CSS Filters 항목옆에는 연필아이콘이 자리 잡고 있는데요. 아래처럼 변경됩니다.

  • 되돌리기 화살표 아이콘: 필터 끄기
  • 회색 채워진 연필아이콘: 필터가 적용되지 않음
  • 하늘색 연필아이콘: 필터가 적용됨

연필아이콘을 눌러보면 아래와 같은 창이 뜨고 Blur와 사진 컬러보정 슬라이더가 나옵니다.

CSS 필터를 적용할 수 있는 팝업창

  • Blur: 배경 오버레이에 흐림효과 주기
  • Brightness: 배경 오버레이 밝기 조정
  • Contrast: 대비 조정
  • Saturation: 채도 조정
  • Hue: RGB 색상 기준값 쉬프트
Blend Mode

블렌드 모드는 포토샵의 레이어 블렌드모드와 그 사용개념, 방법이 같은데 종류가 좀 적을뿐인데요.

앞서 Background와 Background Overlay는 서로 레이어관계에 있다고 했는데, Background Overlay에 블렌드모드를 적용시킴으로써 그 뒤에있는 Backgroud 이미지에 블렌딩(혼합, 조화를 이룸)되도록 만드는 CSS 기능입니다.

블렌드모드를 적용한 뒤 앞서 설명한 Opacity를 줄여서 블렌드 효과의 강함을 줄여줄 수 있는 경우도 있습니다. 

Elementor에서 사용할 수 있는 블렌드 모드 목록은 아래와 같습니다.

  • Normal(노멀) – 아무런 블렌딩 모드도 적용하지 않음
  • Multiply(멀티플라이) 
  • Screen (스크린)
  • Overlay(오버레이)
  • Darken(다큰)
  • Lighten(라이튼)
  • Color Dodge(컬러 닷지)
  • Saturation(새츄레이션)
  • Color(컬러)
  • Luminosity(루미노시티)

이 중 가장 널리 쓰이고 효과도 좋은 건 Multiply, Overlay, Darken 3가지입니다. 

Multiply(멀티플라이) 모드:

이미지 픽셀 중 완전한 흰색부분은 사라지고 검은색은 온전히 남으며 나머지 색은 픽셀값에 따라 뒤의 이미지(여기서는 Background)에 녹아드는 모습이 됩니다. 완전한 흰색도 검은색도 아닌 나머지 색상들은 뒷 레이어(여기서는 background)와 겹친 색상과의 계산결과에 따라 색이 달라지면서 자연스럽게 혼합됩니다. 

그래서 바탕이 흰색인 이미지는 멀티플라이 블렌딩으로 사진합성 효과를 내기 좋습니다.

늑대 그림이 백그라운드에 녹아든 모습

 

Screen(스크린) 모드:

 위의 멀티플라이와 정확히 반대됩니다. 완전한 검은색부분은 사라지고 완전한 흰색은 그대로 남게 되어 블렌딩 됩니다. 완전한 흰색도 검은색도 아닌 나머지 색상들은 뒷 레이어(여기서는 background)와 겹친 색상과의 계산결과에 따라 색이 달라지면서 자연스럽게 혼합됩니다. 

그래서 검은색 바탕의 이미지는 스크린모드로 합성하기 좋습니다.

검은바탕에 그려진 라이트 이펙트가 백그라운드에 합성된 모습

 

Overlay(오버레이) 모드:

오버레이 모드는 두 레이어의 이미지 중 하나라도 픽셀이 그레이스케일 값에서 완전한 중간 회색(128)에 속하면 서로의 이미지에 영향을 주지 않아 그 색이 혼합되지않고 보존됩니다. 특징으로는, 중간밝기의 색상 톤을 보존하며 어두운 영역은 더 어두워지고 밝은 영역은 더 밝아지는 대비(콘트라스트)가 높아지는 효과를 줍니다.

Background와 Background Overlay 이미지를 같은 이미지로 위치와 크기를 모두 같게 맞추고 Overlay 모드를 사용하게 되면 대비가 더 높은 사진보정 효과를 얻을 수 있습니다.

대비가 더 높아진 백그라운드

 

Darken(다큰) 모드:

Darken 모드는 두 레이어에 있는 이미지에서 겹쳐진 픽셀 중 더 어두운 쪽을 그대로 남기게 되는 특징이 있습니다. 

아래 그림은 Background Overlay의 바탕색인 검은색(가장 어두운색)과 겹친 모든 Background 영역은 그보다 어두울 수 없으므로 보이지 않게 되고, 흰색(가장 밝은색)과 겹치는 부분은 흰색보다 모두 어두운색이므로 글자부분은 그대로 Background에 설정된 이미지가 투영되는 모습입니다.

 

Lighten(라이튼) 모드:

Lighten 모드는 위의 Darken 모드와는 정반대로 겹쳐진 픽셀 중 더 밝은 쪽을 그대로 남깁니다. 그래서 흰바탕과 검은글자로 아래와 같은 효과를 낼 수 있죠.

검은색 글자와 겹친부분만 나타나는 백그라운드

 

Color Dodge(컬러 닷지) 모드:

Color Dodge모드는 앞서 설명했던 Screen 모드와 용도가 같은데 그 보다 더 밝게 선명한 색을 남겨 더 극적인 색상효과를 냅니다.

검은 바탕의 빛효과가 배경에 녹아든 모습

 

Saturation, Color, Luminosity 모드:

 3가지 Saturation, Color, Luminosity 모드는 서로 비슷한 규칙으로 각 요소만 달리해서 픽셀 혼합값을 연산해내는 블렌드 모드입니다. 색의 3가지 속성(밝기, 색상, 채도)을 이해하기도 어려운데 이런 혼합방식의 결과 값을 예측하는 건 사실상 우리에겐 무리입니다. 실제 포토샵을 이용한 블렌드모드에서도 잘 쓰이지 않는 모드들이기도 합니다.

  • Saturation(새츄레이션)
    • Saturation 은 ‘채도’라는 뜻인데 이 모드는 Backgournd에 설정된 이미지의 밝기(luminocity)값과 색상(hue)값 그리고 Background Overlay의 채도(saturation)를 사용하여 혼합하는 모드입니다.
      • Backgournd 의 밝기(Luminocity)와 색상(hue) 값
      • +Background Overlay의 채도(saturation) 값
  • Color(컬러)
    • Color모드는 Background의 밝기, 그리고 Background Layer의 색상과 채도를 사용하여 혼합합니다.
      • Backgournd 의 밝기(Luminocity) 값
      • +Background Overlay의 색상(hue)과 채도(saturation) 값
  • Luminosity(루미노시티)
    • 루미노시티(밝기) 모드는 블렌딩되는 백그라드 오버레이의 밝기를 사용한 혼합모드로 아래의 요소를 이용해 이미지를 혼합합니다.
      • Backgournd의 색상(hue)과 채도(saturation) 값
      • +Background Overlay의 밝기(Luminocity) 값

 

포토샵을 사용하는 그래픽 디자이너에게도 Blend Mode는 그 결과를 예측하기가 어려울텐데요. 두 개의 레이어에 있는 색상을 혼합하는 것은 색의 세가지 속성(색상, 채도, 명도)에대한 지식뿐만 아니라 디지털 빛의 색상값(RGB 채널별 0~255)도 이해 해야하지만 경험도 있어야하고, 실제 물감과는 또 다릅니다. 거기에다 Blend Mode는 각 모드별로 일정하지만 각각다르고 복잡한 컴퓨터 연산규칙을 사용해서 두 레이어의 픽셀값을 참고하여 혼합하게됩니다. 

그런데 그 연산규칙을 이해해봤자 ‘아 이런 원리구나’라는 걸 참고할 뿐, 애초에 각 픽셀의 색상을 채널별 디지털 숫자값으로 정확히 인식하고 환산할 수 없는 인간이라서 큰 의미는 없습니다. 그냥 단지 이 모드는 이런 특징이 있구나를 참고로해서 경험을 쌓을 수 밖에 없죠. 위에 예를 들은 것도 제가 아는 매우적은 단편적인 경험일 뿐이고 그래픽 디자이너들은 여러가지를 실험하면서 블렌드모드의 더 많은 효용성을 찾기위해 노력하고 있습니다.

Elementor에서 기본 제공되는 것외의 다른 블렌드모드는 커스텀 CSS를 작성해서 사용할 수 있겠습니다. CSS의 블렌드모드는 포토샵의 블렌드모드의 매우적은 일부를 차용한 것일 뿐이므로 인터넷에서 많이 찾아볼 수 있는 포토샵의 블렌드모드 강좌를 보면 도움이 될 것입니다.

하지만 말했듯, CSS에서 사용할 수 있는 블렌드모드는 몇가지 뿐인데다가 이미지 보정, 합성, 혼합 효과는 포토샵같은 사진 편집툴에서 더 다양하게 강력하게 해낼 수 있으므로 단순히 이미지 블렌드 모드가 필요하다면 대부분의 경우 그냥 사진편집 프로그램을 사용해서 결과를 낸 이미지를 사용하는 게 더 나을 겁니다.

그리고 사실, 많은 블렌드 모드는 레이어 면적 전체에 적용보다는 일부분에만 적용할 때 (예: 포토샵 브러시로 그린 오버레이 레이어)나 다른 그래픽 편집 기능들과 섞어 쓸 때 더 쓸모있는 것들이 많더군요.

마치며…

여기까지 Elementor의 Style > Background와 Background Overlay 옵션값에대해 알아봤습니다. 앞으로도 Elementor 각 요소들을 설명할 게 많이 남아있군요. 스위프트코딩 블로그를 구독하시면 새로운 Elementor 강좌, 설명글이 발행되면 바로 알림을 받을 수 있습니다. 감사합니다.

3 댓글

댓글은 익명이나 SNS, wordpress.com 로그인 지원). 마크다운 문법 사용가능(Shift+~ 키로 특정문구 혹은 위아래 ~~~으로감싸서 여러줄을 코드블락으로 작성)