사이트의 색상 팔레트를 선택한 후, 특정 요소의 색상을 사용자 지정합니다.

흑백 테마를 선호하든 대담한 색상 조합을 선호하든, 색상 팔레트와 색상 테마를 사용하여 사이트 전반의 색상을 스타일링하세요.

이러한 색상 옵션은 버전 7.1 사이트에서 사용할 수 있습니다. 버전 7.0 사이트에는 다른 색상 설정이 있습니다.

사이트 색상 변경 방법에 관한 비디오

사이트의 색상 팔레트와 색상 테마를 둘러보려면 이 비디오를 시청하세요.

사이트 전체 색상 팔레트로 색상 변경

모든 Squarespace 사이트는 일관된 시각적 스타일링을 위해 다섯 가지 색상으로 구성된 팔레트를 사용합니다. 팔레트를 사용자 지정하거나 새 팔레트를 선택하여 사이트의 색상을 즉시 변경할 수 있으며, 이 경우 팔레트의 색상이 사이트 전체에 적용됩니다.

현재 색상 팔레트 편집

선택한 색상 팔레트를 편집하는 방법은 다음과 같습니다.

1. 사이트 스타일 패널을 여세요.
2. 색상 옆의 ＞를 클릭합니다.
3. 팔레트 편집을 클릭합니다. 팔레트는 5가지 색상을 사용하며, 대부분 텍스트에 사용되는 검정색과 흰색을 포함합니다.
4. 팔레트의 색상 중 하나를 클릭한 다음 색상 선택기에서 슬라이더를 클릭하고 드래그하여 변경합니다. 사용하려는 색상의 코드가 있는 경우 아래 필드에 16진수, RGB 또는 HSL 코드를 입력할 수 있습니다.
5. 팔레트의 각 색상에 대해 이 단계를 반복한 다음 저장을 클릭합니다.

새 색상 팔레트 설정

새 색상 팔레트를 설정하는 방법은 다음과 같습니다.

1. 사이트 스타일 패널을 여세요.
2. 색상 옆의 ＞를 클릭합니다.
3. 팔레트 편집을 클릭한 다음, 다음 중에서 선택합니다.
   • 사전 설정 - 선별된 색상으로 구성된 사전 설정 팔레트 세트에서 선택합니다.
   • 이미지에서 - 이미지를 업로드하여 이미지의 세 가지 가장 두드러진 색상을 기반으로 팔레트를 생성합니다.
   • 색상에서 - 색상 선택기를 사용하여 기본 색상을 선택하고 그 색상을 보완하는 팔레트를 생성합니다.
4. 저장을 클릭하세요.

테마로 섹션 색상 변경하기

색상 팔레트는 사이트의 색상을 설정하며, 사이트의 색상 테마는 이러한 색상을 다양한 조합으로 사용합니다. 모든 팔레트에는 10개의 색상 테마가 있으므로, 서로 잘 어울리면서도 섹션마다 고유한 외관을 만들 수 있습니다.

텍스트와 버튼 색상이 배경색과의 대비를 높이기 위해 기본적으로 흰색 또는 검은색으로 설정되는 경우도 있습니다. 색상을 선택할 때 접근성 모범 사례를 검토하세요.

섹션 테마 설정

섹션의 색상 테마를 선택하는 방법:

1. 페이지 패널을 엽니다.
2. 편집할 페이지를 클릭한 다음 왼쪽 상단의 편집을 클릭합니다.
3. 변경하려는 섹션에서 섹션 편집을 클릭합니다.
4. 색상을 클릭한 다음, 색상 테마를 클릭합니다.
5. 저장을 클릭하세요.

참고. 새 색상 테마를 선택하면 텍스트 블록 도구 모음에서 변경한 텍스트 색상을 포함하여 섹션의 모든 색상이 변경됩니다.

페이지 섹션에서 사용하는 테마를 어떻게 확인할 수 있나요?

섹션에서 사용하는 색상 테마를 확인하는 방법:

1. 페이지 패널을 엽니다.
2. 편집하려는 페이지를 클릭합니다.
3. 사이트 미리 보기를 스크롤하여 각 섹션의 오른쪽 상단 모서리에 표시되는 색상 테마 라벨을 확인합니다.

색상 테마 라벨이 비어 있는 이유는 무엇인가요?

테마 라벨 대신 빈 상자가 표시되는 경우, 글꼴 색상과 배경색이 같아 텍스트가 보이지 않을 수 있습니다. 테마 라벨을 표시하는 방법은 다음과 같습니다.

1. 사이트 스타일 패널을 여세요.
2. 색상 옆의 ＞를 클릭합니다.
3. 색상 메뉴에서 비어 있는 테마를 클릭합니다.
4. 표제 요소(대형)를 클릭하고 색상을 변경합니다.
5. 저장을 클릭하세요.

다른 사이트 영역에서는 어떤 테마를 사용합니까?

사이트의 다른 영역에는 다음과 같은 특정 색상 테마 설정이 있습니다.

• 공지사항 표시줄 - 사이트 머리말에 색상 테마가 있는 경우 공지사항 표시줄도 동일한 테마를 따릅니다. 그렇지 않은 경우 기본 색상 테마를 따릅니다.
• 내장 페이지 - 기본 404 페이지나 장바구니 페이지와 같은 내장 사이트 페이지는 템플릿의 기본 색상 테마를 따릅니다.
• 모바일 오버레이 메뉴 버튼 - 사이트 머리말을 편집할 때 모바일 오버레이의 색상 테마를 설정하세요.
• 사이트 머리말 - 사이트 머리말의 색상 테마를 설정하거나 사용자 지정 색상을 설정하세요.

특정 사이트 요소의 색상 변경

모든 색상 테마에서 특정 요소의 색상 세부 설정을 사용자 지정할 수 있습니다.. 테마의 색상에 대한 모든 변경 사항은 해당 테마를 사용하는 사이트의 모든 영역에 적용됩니다.

테마를 편집하는 방법은 다음과 같습니다.

1. 사이트 스타일 패널을 여세요.
2. 색상 옆의 ＞를 클릭합니다.
3. 편집하고자 하는 테마를 클릭합니다. 어떤 테마를 편집해야 할지 확신이 서지 않는 경우, 변경하고자 하는 섹션에서 색상 테마 라벨을 확인합니다.
4. 변경하고자 하는 세부 설정을 클릭한 다음 새 색상을 선택합니다. 팔레트 탭에서 사전 설정된 색상을 사용하거나 사용자 지정을 클릭하여 색상 선택기를 사용할 수 있습니다.
5. 저장하기 전에 변경 사항을 취소하려면 패널 상단에 있는 실행 취소 아이콘을 클릭하거나 특정 변경 항목 옆에 있는 점 을 클릭합니다.
6. 변경 사항은 다른 페이지 콘텐츠를 편집하는 동안에도 그대로 유지됩니다. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 종료를 클릭한 후 저장을 클릭하여 편집기를 닫습니다.

색상 선택기를 사용하여 사용자 지정 색상을 선택하세요.

모든 색상 조정에는 레이블 옆에 해당 요소의 현재 색상을 나타내는 원이 있습니다. 일반적으로 이러한 색상은 사이트의 팔레트에서 가져옵니다.

색상 선택기를 사용하여 사용자 지정 색상을 선택하는 방법:

1. 변경하고자 하는 세부 설정을 클릭합니다.
2. 사용자 지정을 클릭하여 색상 선택기를 엽니다.
3. 하단 슬라이더를 클릭하여 색상을 선택한 후 위의 사각형을 클릭하여 색조를 선택하거나 값 필드를 사용하여 특정 색상 코드를 입력합니다.
4. 조정 항목에 불투명도 슬라이더가 있는 경우 이를 사용하여 투명도를 변경할 수 있습니다.

색상 코드로 특정 색상 선택

원하는 색상의 값을 알고 있는 경우 색상 선택기 아래의 값 필드를 클릭하여 입력할 수 있습니다. 특정 색상 값을 찾는 데 도움이 필요한 경우 color-hex.com 또는 imagecolorpicker.com 같은 외부 사이트를 방문하실 수 있습니다.

값 필드는 다음 형식 중 하나를 허용합니다.

• HEX - 예: #FFFFFF
• RGB 또는 RGBa - 예: rgba(255, 0, 149, 1)
• HSL/HSLA - 예: hsla(325, 100%, 50%, 1)
• HTML(소문자여야 함) - 예: white

팁. 색상 슬라이더를 사용하여 색상을 찾으실 때 값 필드에 색상 코드가 자동으로 표시됩니다. 이 코드를 복사하여 붙여 넣으면 테마의 다른 조정 사항에 동일한 색상을 추가할 수 있습니다.

색상의 투명도 변경

사용자 지정 색상의 투명도를 변경하려면 색상 선택기 아래의 원을 드래그하여 불투명도 슬라이더를 사용합니다. 불투명도 슬라이더는 이미지 위에 표시되는 오버레이 색상에 특히 유용합니다. 모든 조정에 불투명도 슬라이더가 포함되어 있는 것은 아닙니다.

팁: 불투명도 슬라이더를 사용하여 섹션의 배경색을 투명하게 만들면, 템플릿의 기본 색상 테마의 배경색이 비쳐 보일 수 있습니다.

기본 색상 테마란 무엇인가요?

모든 7.1 버전 사이트에는 기본 색상 테마가 있습니다. 기본 색상 테마는 사이트의 다음 기본 제공 페이지 및 영역에 자동으로 적용됩니다.

• 액세스 거부 화면
• 공지사항 표시줄
• 기본 제공 검색 페이지
• 기본 404 페이지
• 배경 이미지 또는 비디오 위에 동적인 머리말
• 주문 확인 페이지
• 페이지 가장자리를 넘어 가로로 스크롤할 때 발생하는 페이지 간격
• 제품 빠른 보기 페이지
• 장바구니 페이지

사이트의 기본 색상 테마는 어떻게 찾나요?

템플릿의 기본 테마를 찾는 방법:

1. 페이지 패널을 엽니다.
2. 페이지에서 편집을 클릭한 후 섹션 추가를 클릭합니다.
3. + 빈 항목 추가를 클릭한 다음 섹션을 클릭합니다. 새 섹션은 기본 테마로 시작됩니다.
4. 페인트브러시 아이콘을 클릭하여 사이트 스타일 패널을 연 다음, 색상 옆에 있는 ＞를 클릭합니다.
5. 새 섹션에서 테마 라벨을 찾습니다.

사이트의 기본 테마를 변경할 수 있나요?

아니요. 사이트에 새 기본 테마를 지정할 수는 없습니다. 하지만 현재 설정된 기본 테마를 알고 있다면 색상 팔레트를 변경하거나 테마의 개별 색상 세부 설정을 변경하여 기본 제공 페이지와 기본 테마를 사용하는 다른 섹션을 사용자 정의할 수 있습니다.

페이지 섹션과 바닥글 사이의 색상은 어떻게 변경하나요?

페이지의 마지막 섹션과 바닥글 사이 또는 바닥글 아래에 간격이 생길 수 있습니다. 이러한 간격에는 기본 테마의 섹션 배경색이 적용됩니다. 섹션과 바닥글이 기본 테마와 다른 색상 테마를 사용하는 경우 이러한 간격이 더 눈에 띌 수 있습니다.

간격의 색상을 페이지 섹션 또는 바닥글과 일치시키는 방법은 다음과 같습니다.

1. 사이트 스타일 패널을 엽니다.
2. 색상 옆의 ＞를 클릭합니다.
3. 기본 테마를 클릭합니다.
4. 배경색을 클릭하고 페이지 섹션 또는 바닥글의 색상 테마에서 섹션 배경색과 일치하도록 변경합니다.

팁: 기본 테마의 섹션 배경색을 페이지 배경색과 동일하게 일치시키면 페이지가 로드될 때 일관된 모습을 유지할 수 있습니다. 배경색은 이미지보다 먼저 로드되기 때문입니다.

블록 배경색 변경

일부 블록에 배경색을 추가할 수 있습니다. 이것은 블록을 돋보이게 하거나 플루이드 엔진에서 겹치는 블록을 더 잘 보이게 하는 좋은 방법입니다.

다음 블록에 배경색을 추가할 수 있습니다.

• 아코디언 블록
• 양식 블록
• 뉴스레터 블록
• 인용 블록
• 요약 블록
• 텍스트 블록