그래디언트 사용하기

그래디언트 도구 개요

그래디언트는 각 색상이 점진적으로 변하는 다색상 채우기 기능입니다. 그래디언트는 요소의 테두리 또는 채우기에 적용할 수 있습니다.

일부 브라우저에서는 테두리 그래디언트를 지원하지 않습니다.

 

Google Web Designer에서는 다음과 같은 두 가지 유형의 그래디언트를 만들 수 있습니다.

  • 선형 그래디언트를 사용하면 두 끝점 사이의 직선을 따라 색상이 변경됩니다.
  • 방사형 그래디언트를 사용하면 하나의 중심점에서 동심원형으로 색상이 변경됩니다.

그래디언트를 만드는 방법:

  1. 색상 믹서 상단에서 선형 그래디언트 또는 방사형 그래디언트 버튼을 선택합니다.
  2. 기본적으로 그래디언트에는 상단의 그래디언트 막대를 따라 2개의 색상 마커가 있습니다. 색상을 변경하려면 색상 마커를 클릭하세요.
  3. 막대를 따라 색상 마커를 드래그하여 전환 범위를 변경합니다.
  4. 색상 마커를 추가하려면 그래디언트 막대를 클릭합니다. 색상 마커를 제거하려면 색상 입력란으로 드래그하세요.

선형 그래디언트

기본적으로 선형 그래디언트는 적용되는 요소의 왼쪽 가장자리에서 오른쪽 가장자리로 확장됩니다.

선형 그래디언트 적용 방식을 변경하는 방법:

  1. 왼쪽의 툴바에서 그래디언트 도구 를 선택하거나 A 키를 누릅니다.
  2. 그래디언트를 수정하려는 요소를 선택합니다.
  3. 상단의 도구 옵션 막대에서 획 수정 또는 채우기 수정 을 선택합니다.
  4. 빨간색 제어 핸들을 드래그하여 그래디언트를 조정합니다.
    • 외부 핸들을 드래그하여 그래디언트가 개체에 적용되는 방식을 변경합니다. 그래디언트는 SVG 도형의 테두리를 넘어가도록 연장할 수 없습니다(아래의 첫 번째 예시 참조).

    • 내부 핸들을 드래그하여 검은색 중심점을 기준으로 그래디언트를 회전합니다. 그래디언트의 크기는 요소에 대한 비율을 유지하도록 자동으로 조절됩니다. 원하는 경우 Shift 키를 누른 상태에서 드래그하여 그래디언트가 45° 단위로 회전하도록 제한할 수 있습니다.

그래디언트를 기본 모양으로 재설정하려면 그래디언트 도구 버튼을 더블클릭하세요.

방사형 그래디언트

기본적으로 방사형 그래디언트는 대상 요소의 중심과 모서리로 정의되는 타원형으로 적용됩니다.

방사형 그래디언트 적용 방식을 변경하는 방법:

  1. 왼쪽의 툴바에서 그래디언트 도구 를 선택하거나 A 키를 누릅니다.
  2. 그래디언트를 수정하려는 요소를 선택합니다.
  3. 상단의 도구 옵션 막대에서 획 수정 또는 채우기 수정 을 선택합니다.
  4. 빨간색 제어 핸들을 드래그하여 그래디언트를 조정합니다.
    • 외부 핸들을 드래그하여 그래디언트의 크기를 조절합니다. 원하는 경우 Ctrl(Windows) 또는 (Mac) 키를 누른 상태에서 드래그하여 그래디언트의 X 및 Y 축 크기를 같은 비율로 조절하거나 Shift 키를 누른 상태에서 드래그하여 그래디언트 도형을 원으로 제한할 수 있습니다.

    • 중앙 핸들을 드래그하여 그래디언트 중심점을 이동합니다.

그래디언트를 기본 모양으로 재설정하려면 그래디언트 도구 버튼을 더블클릭하세요.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?

도움이 더 필요하신가요?

다음 단계를 시도해 보세요.

검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
8122845785945915715
true
도움말 센터 검색
true
true
true
true
true
5050422
false
false