색상 배합
테마 설정에서 서로 다른 색상 구성표를 정의하고 색상 구성표 선택기를 사용하여 온라인 스토어 전체에서 서로 다른 섹션에 색상 구성표를 적용할 수 있습니다. 색상 구성표는 색상의 집합입니다. 테마에는 테마 편집기에서 언제든지 변경할 수 있는 일련의 기본 색상 구성표가 적용되어 있습니다. 브랜드 색상을 추가하여 온라인 스토어 전체에 색상 팔레트를 조화롭게 적용할 수 있습니다.
이 페이지의 정보
색상 구성표 테마 설정
색상 구성표는 시각적으로 대표적인 방식으로 요소와 각 색상을 그룹화하는 테마 설정입니다. 색상 구성표 선택기를 사용할 수 있는 테마 전체에 적용할 수 있는 조화로운 색상 구성표로 다양한 요소에 다른 색상을 할당할 수 있습니다. 색상 구성표는 최대 21개까지 사용할 수 있습니다. 또한 구성표의 미리 보기에서 색상이 표시되는 방법을 미리 볼 수 있습니다.
| 설정 | 설명 |
|---|---|
| 배경 | 일부 섹션의 배경과 윤곽선 버튼 배경에 색상이 적용됩니다. |
| 배경 그라데이션 | 일부 섹션의 배경에 색상 그라데이션이 적용됩니다. 가능한 경우 배경 그라데이션이 배경을 대체합니다. |
| 텍스트 | 섹션 또는 블록 텍스트에 색상이 적용됩니다. |
| 단색 버튼 배경 | 기본 버튼 배경에 색상이 적용됩니다. |
| 단색 버튼 레이블 | 기본 버튼 텍스트에 색상이 적용됩니다. |
| 윤곽선 버튼 | 보조 버튼 텍스트와 테두리에 색상이 적용됩니다. |
| 그림자 | 그림자에 색상이 적용됩니다. |
색상 배합 관리
스토어의 색상 구성표 및 색상 옵션은 테마 설정 내에서 설정됩니다. 단색의 경우 색상 선택기를 사용하여 새로운 색상을 선택하거나 텍스트 필드에 색상 값을 입력합니다. 색상 필드에는 다음과 같은 색상 이름 및 값을 사용할 수 있습니다.
- 다음과 같은 색상 이름:
red,black,blue - RGB 색상 코드
- 16진수 색상 값
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 톱니바퀴 아이콘을 클릭한 다음 색상을 클릭합니다.
- 구성표 섹션에서 기존 구성표를 클릭하거나 구성표 추가를 클릭하여 새 색상 구성표를 추가합니다.
- 변경하려는 콘텐츠 유형 색상의 색상 견본을 클릭합니다.
- 색상을 설정하려면 16진수 색상 코드를 입력하거나 색상 선택기에서 색상을 선택합니다. 색상을 투명으로 설정하려면 텍스트 필드에서 16진수 코드를 삭제합니다.
- 저장을 클릭합니다.
색상 구성표 적용
테마 설정에서 색상 구성표를 정의한 다음 테마의 섹션 및 블록에서 색상 구성표 선택기를 사용하여 색상 구성표를 할당할 수 있습니다. 색상 구성표 선택기는 특정 섹션, 블록 및 일반 테마 설정에서만 사용할 수 있습니다.
그라데이션
일부 테마에서는 시각적으로 흥미로운 배경 옵션을 위해 색상 그라데이션을 설정할 수 있습니다. color_background 설정은 CSS 배경 속성을 사용자 정의하는 데 사용됩니다.
그라데이션 선택기를 사용하면 색상, 그라데이션 스타일, 각도, 위치, 그라데이션 투명도를 선택할 수 있습니다. 그라데이션 선택기에서 선택한 옵션은 테마 편집기에서 실시간으로 미리 볼 수 있습니다. 또한, CSS 코드를 사용하면 배경 그라데이션을 만들 수 있으며, 여기에는 유효성 검사기도 포함됩니다.
그라데이션 설정
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 톱니바퀴 아이콘을 클릭한 다음 색상을 클릭합니다.
- 구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
- 배경 그라데이션과 같은 그라데이션 색상 견본 옵션을 클릭합니다.
- 이전에 그라데이션을 설정하지 않았다면 선택할 수 있는 몇 가지 사전 설정된 옵션이 표시됩니다. 사전 설정된 그라데이션을 선택하면 옵션 패널이 열립니다.
- 다음과 같은 그라데이션 옵션을 선택합니다.
- 선형 또는 방사형 그라데이션 중에서 선택합니다. 버튼을 사용하여 원하는 그라데이션 스타일을 선택합니다.
- 위쪽 및 아래쪽 화살표를 사용하여 그라데이션 각도를 설정합니다. 위쪽 또는 아래쪽 화살표를 클릭하면 각도가 5%씩 증가하거나 감소합니다.
- 그라데이션 위치는 슬라이더를 사용하거나 필드에 숫자 값을 입력하여 선택할 수 있습니다.
- 특정 색상 16진수 코드를 입력하거나 색상 슬라이더를 사용하여 색상을 선택합니다. 최근에 선택한 색상이 그라데이션 옵션 패널 아래쪽에 표시됩니다.
- 그라데이션을 불투명하게 만들려면 오른쪽의 슬라이더를 사용하여 그라데이션의 투명도를 선택합니다. 16진수 색상 코드 옆의 필드에 백분율을 입력할 수도 있습니다.
- 저장을 클릭합니다.
CSS를 사용한 그라데이션 설정
대부분의 CSS background 속성 값을 사용해서 배경색을 설정할 수 있습니다. 단색(예를 들어 #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) 및 hsla(0, 0%, 0%, 1)는 모두 단일 검정색 배경 생성) 또는 그라데이션(예: linear-gradient(red, green), radial-gradient(red, green) 또는 conic-gradient(red, green))에 대해 이 필드를 사용할 수 있습니다. 그라데이션을 반복할 수도 있습니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 톱니바퀴 아이콘을 클릭한 다음 색상을 클릭합니다.
- 구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
- 편집할 그라데이션을 클릭합니다.
- 그라데이션 옆의 화살표를 클릭한 다음 CSS를 선택합니다.
- CSS 코드 필드에 그라데이션 코드를 입력하거나 붙여넣습니다. 테마 편집기 미리보기에서 적합한 위치에 그라데이션이 표시됩니다.
- 저장을 클릭합니다.
그라데이션 제거
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 톱니바퀴 아이콘을 클릭한 다음 색상을 클릭합니다.
- 구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
- 제거할 그라데이션을 클릭합니다.
- 그라데이션 제거를 클릭합니다.
- 저장을 클릭합니다.