그래디언트는 각 색상이 점진적으로 변하는 다색상 채우기 기능입니다. 그래디언트는 요소의 테두리 또는 채우기에 적용할 수 있습니다.
일부 브라우저에서는 테두리 그래디언트를 지원하지 않습니다.
Google Web Designer에서는 다음과 같은 두 가지 유형의 그래디언트를 만들 수 있습니다.
- 선형 그래디언트를 사용하면 두 끝점 사이의 직선을 따라 색상이 변경됩니다.
- 방사형 그래디언트를 사용하면 하나의 중심점에서 동심원형으로 색상이 변경됩니다.
그래디언트를 만드는 방법:
- 색상 믹서 상단에서 선형 그래디언트 또는 방사형 그래디언트 버튼을 선택합니다.
- 기본적으로 그래디언트에는 상단의 그래디언트 막대를 따라 2개의 색상 마커가 있습니다. 색상을 변경하려면 색상 마커를 클릭하세요.
- 막대를 따라 색상 마커를 드래그하여 전환 범위를 변경합니다.
- 색상 마커를 추가하려면 그래디언트 막대를 클릭합니다. 색상 마커를 제거하려면 색상 입력란으로 드래그하세요.
선형 그래디언트
기본적으로 선형 그래디언트는 적용되는 요소의 왼쪽 가장자리에서 오른쪽 가장자리로 확장됩니다.
선형 그래디언트 적용 방식을 변경하는 방법:
- 왼쪽의 툴바에서 그래디언트 도구 를 선택하거나 A 키를 누릅니다.
- 그래디언트를 수정하려는 요소를 선택합니다.
- 상단의 도구 옵션 막대에서 획 수정 또는 채우기 수정 을 선택합니다.
- 빨간색 제어 핸들을 드래그하여 그래디언트를 조정합니다.
-
외부 핸들을 드래그하여 그래디언트가 개체에 적용되는 방식을 변경합니다. 그래디언트는 SVG 도형의 테두리를 넘어가도록 연장할 수 없습니다(아래의 첫 번째 예시 참조).
-
내부 핸들을 드래그하여 검은색 중심점을 기준으로 그래디언트를 회전합니다. 그래디언트의 크기는 요소에 대한 비율을 유지하도록 자동으로 조절됩니다. 원하는 경우 Shift 키를 누른 상태에서 드래그하여 그래디언트가 45° 단위로 회전하도록 제한할 수 있습니다.
-
그래디언트를 기본 모양으로 재설정하려면 그래디언트 도구 버튼을 더블클릭하세요.
방사형 그래디언트
기본적으로 방사형 그래디언트는 대상 요소의 중심과 모서리로 정의되는 타원형으로 적용됩니다.
방사형 그래디언트 적용 방식을 변경하는 방법:
- 왼쪽의 툴바에서 그래디언트 도구 를 선택하거나 A 키를 누릅니다.
- 그래디언트를 수정하려는 요소를 선택합니다.
- 상단의 도구 옵션 막대에서 획 수정 또는 채우기 수정 을 선택합니다.
- 빨간색 제어 핸들을 드래그하여 그래디언트를 조정합니다.
-
외부 핸들을 드래그하여 그래디언트의 크기를 조절합니다. 원하는 경우 Ctrl(Windows) 또는 ⌘(Mac) 키를 누른 상태에서 드래그하여 그래디언트의 X 및 Y 축 크기를 같은 비율로 조절하거나 Shift 키를 누른 상태에서 드래그하여 그래디언트 도형을 원으로 제한할 수 있습니다.
-
중앙 핸들을 드래그하여 그래디언트 중심점을 이동합니다.
-
그래디언트를 기본 모양으로 재설정하려면 그래디언트 도구 버튼을 더블클릭하세요.