배경: 단색과 그라데이션 4종

안내 문구의 배경에 은은한 색을 깔거나, 박스에 두 가지 색이 자연스럽게 이어지는 배경을 주고 싶을 때가 있습니다. 편집기의 배경색 항목은 단색과 그라데이션을 지원하고, 그라데이션은 선형, 원형, 원뿔형, 반복 네 가지 모양으로 만들 수 있습니다. 이 글에서는 제목 요소를 예로 항목의 위치와 옵션을 차근차근 살펴봅니다. 같은 항목이 컨테이너에도 있으며, 컨테이너의 배경 이미지와 영상은 별도 글에서 다룹니다.

1. 배경색은 어디에 있나요

제목이나 텍스트를 고르면 나타나는 도구 막대에서 톱니바퀴(요소 설정 열기)를 누르면 설정 창이 열리고, 여기에도 배경색 항목이 있습니다. 창 맨 아래의 전체 속성 패널 열기를 눌러 오른쪽 속성 패널을 열었다면 콘텐츠 탭의 너비 아래에서 찾을 수 있습니다. 항목은 없음, 단색, 그라데이션 세 버튼으로 시작하고, 누르는 즉시 편집 화면에 반영됩니다. 속성 패널을 여는 방법은 속성 패널 구조를 다룬 글에서 자세히 안내합니다.

2. 단색 배경

단색을 누르면 색상 줄과 투명도 슬라이더가 나타납니다. 색상 칸에 #FDE68A처럼 6자리 색 코드를 쓰거나 옆의 색상 상자를 눌러 고릅니다. 투명도 슬라이더를 왼쪽으로 줄이면 색이 옅어져 뒤의 배경이 비쳐 보입니다. 아래 그림은 제목 요소에 노란색 단색을 투명도 50%로 깐 모습입니다.

없음을 누르면 배경색이 지워집니다. 단색을 고른 요소에서 그라데이션을 누르면 단색은 빠지고 그라데이션이 대신 적용됩니다.

3. 그라데이션의 네 가지 모양

그라데이션을 누르면 아래에 하위 메뉴가 열립니다. 맨 위의 그라데이션 종류에서 선형, 원형, 원뿔형 중 하나를 고르고, 그 아래 반복 (줄무늬·동심원 패턴)을 켜면 같은 색 변화가 되풀이됩니다. 아래 그림은 왼쪽 위부터 선형, 원형, 원뿔형, 반복을 켠 선형입니다.

하위 메뉴 가운데의 색 막대는 지금 적용되는 모습을 그대로 보여 주는 미리보기입니다. 그 아래 색상 1과 색상 2에서 두 색을 정하는데, 각각 색 코드와 투명도를 따로 가집니다.

4. 선형: 방향 정하기

선형은 한쪽에서 반대쪽으로 색이 흐릅니다. 방향 목록에서 여덟 가지를 고를 수 있습니다. 가로세로는 → 오른쪽, ↓ 아래, ← 왼쪽, ↑ 위이고, 대각선은 ↘ 135°, ↗ 45°, ↙ 225°, ↖ 315°입니다.

5. 원형과 원뿔형

원형은 한 점에서 바깥으로 퍼지는 모양입니다. 모양에서 원형과 타원형을, 중심 위치에서 가운데, 위, 아래, 왼쪽, 오른쪽, 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래 아홉 곳 중 중심을 고릅니다. 원뿔형은 중심을 축으로 색이 시계 방향으로 돌아가는 모양이며, 시작 각도 슬라이더(0°부터 360°)와 같은 아홉 곳의 중심 위치를 정합니다. 종류를 바꾸면 방향과 모양, 각도는 그 종류의 기본값으로 돌아갑니다.

6. 색상 위치와 반복

맨 아래 색상 위치 막대의 동그라미 두 개는 각각 색상 1과 색상 2가 시작하고 끝나는 지점입니다. 동그라미를 끌거나 막대의 빈 곳을 누르면 가까운 동그라미가 그 자리로 옮겨 가며, 동그라미를 선택하고 방향키를 누르면 1%씩, Shift 키와 함께 누르면 10%씩 움직입니다. 두 동그라미는 서로를 넘지 못하고 최소 1% 간격을 둡니다. 값을 30%와 70%로 옮기면 양 끝은 단색으로 남고 가운데에서만 색이 바뀝니다.

반복을 켜면 색상 2의 위치가 25%로 줄어들어 바로 줄무늬가 보입니다. 끝 위치를 직접 정한 경우에는 그 값이 유지되며, 반복을 끄면 25%였던 값만 100%로 돌아갑니다.

7. 이렇게 활용해 보세요

• 소제목이나 배지처럼 쓰는 짧은 제목에 옅은 단색을 깔고 모서리 반경을 주면 강조 표시 느낌을 낼 수 있습니다.
• 컨테이너에 같은 계열의 두 색을 선형 그라데이션으로 이으면 사진 없이도 부드러운 배경이 됩니다.
• 원형 그라데이션의 중심을 왼쪽 위로 옮기면 한쪽 모서리에서 빛이 번지는 듯한 배경을 만들 수 있습니다.
• 반복은 줄무늬나 동심원 같은 패턴이 필요할 때 씁니다. 글자가 올라가는 요소에는 두 색의 차이를 작게 두면 읽기 편합니다.

8. 알아 두실 점

• 배경은 요소의 상자 전체에 칠해집니다. 글자 주변에 여유를 주고 싶다면 스타일 탭의 안쪽 여백을 함께 조절하세요.
• 배경 위에 글자가 올라가므로 글자색과 충분히 대비되는지 편집 화면에서 확인하세요.
• 바꾼 값은 위쪽 저장을 눌러야 저장됩니다. 저장한 뒤 다시 열어도 그라데이션 종류와 방향, 색상 위치가 이어서 열립니다.

컨테이너의 배경 이미지와 영상은 컨테이너 배경을 다룬 글에서, 안쪽 여백은 여백을 다룬 글에서 이어서 안내합니다.