가이드/웹사이트 편집/스타일을 사용하여 사이트 색상 변경

스타일을 사용하여 사이트 색상 변경

선택하는 색상은 사이트 디자인의 주요 부분을 나타냅니다. 이 가이드에서는 사이트의 색상 팔레트를 관리하는 방법을 설명합니다.

비디오 개요

색상 설정 찾기

사이트에서 사이트 편집기가 지원되는 테마를 사용하는 경우 스타일을 사용하여 사이트의 색상을 변경할 수 있습니다. 사이트에서 사이트 편집기가 사용되는지 알아보는 빠른 방법은 알림판의 디자인에서 확인하는 것입니다. 여기에 편집기가 표시되면 다음 단계에 따라 사이트의 색상을 변경할 수 있습니다.

  1. 알림판에서 디자인 → 편집기로 이동합니다.
  2. 왼쪽에 있는 스타일 아이콘을 클릭하거나 여기에 표시된 스타일 아이콘을 선택합니다. 아이콘은 흑백의 원 모양입니다.
  3. 색상을 선택합니다.
  4. 팔레트를 선택하여 사이트의 기본 색상을 선택하거나 사이트의 다음 요소 중에서 선택합니다.
    • 텍스트
    • 배경
    • 링크
    • 캡션
    • 버튼
    • 제목

이 가이드의 나머지 부분에서는 각 항목에 대해 자세히 설명합니다.

사이트 편집기의 스타일 버튼을 가리키는 화살표.

색상 팔레트 정의

사이트의 색상 팔레트를 통해 사이트 전체에서 사용되는 기본 색상이 설정됩니다. 특정 요소의 색상을 제어할 수는 있지만, 색상 팔레트를 정의하면 웹사이트 전체에 일관된 색 구성표가 확보됩니다.

여기에서 테마, 기본사용자 정의 색상을 편집할 수 있습니다.

  • 테마: 테마 디자이너가 테마를 생성할 때 설정한 색상으로, 테마의 디자인 전반에서 사용됩니다.
  • 기본값: 페이지와 글을 편집할 때 블록 색상 설정에 표시되는 색상입니다.
  • 사용자 정의: 색상 팔레트에서 사용할 추가 색상을 정의하고 이름을 지정합니다.

테마 색상

테마 색상을 업데이트하려면 아래의 지침을 따릅니다.

  1. 팔레트 아래의 상자 안의 아무 곳이나 클릭합니다.
사이트 편집기의 색상 팔레트.
  1. 테마 옆에 있는 점 3개를 클릭한 다음 세부 정보 표시를 선택하여 팔레트의 색상 영역 목록을 펼칩니다.
  2. 각 테마는 자체 색상 영역을 정의합니다. 이 예에서는 1차, 2차, 전경, 배경 또는 3차 중에 선택하여 해당 색상을 편집할 수 있습니다.
사이트 편집기에서 색상 팔레트 편집하기.
사이트 편집기의 스타일 섹션에서 테마기본 색상을 업데이트하기 위한 단계
  1. 표시되는 색상 선택기를 사용하여 원하는 색상을 선택합니다.
  2. 완료를 클릭하여 선택한 색상을 설정합니다.
  3. 오른쪽 상단 모서리의 저장을 클릭하여 변경 사항을 저장합니다.

사용자 정의 색상

사이트의 팔레트에 여러 가지 사용자 정의 색상을 추가할 수도 있습니다. 이 색상은 저장되며 블록의 색상 설정에서 선택할 수 있습니다.

사용자 정의 색상을 추가하려면 다음과 같은 추가 단계를 따르세요.

  1. 사용자 정의에서 + 버튼을 클릭합니다.
  2. 색상 선택기에서 색상을 선택하거나 16진수, RGB 또는 HSL 색상 값을 입력합니다.
  3. 색상 이름(기본적으로 “색상 1″로 설정됨)을 클릭하고 새 색상 이름을 입력합니다.
  4. 완료를 클릭합니다.

다음 비디오에서 위 단계를 볼 수 있습니다.

요소 색상 사용자 정의

색상 설정의 팔레트 바로 아래에 다양한 사이트 요소의 색상을 편집하는 옵션이 표시됩니다. 해당 요소는 다음과 같습니다.

  • 텍스트: 링크, 캡션, 버튼 텍스트 또는 제목을 제외한 사이트 전체의 일반 기본 텍스트에 사용할 색상을 선택합니다.
  • 배경: 사이트 배경을 단색 또는 그라데이션으로 설정합니다. 사이트 배경 사용자 정의 설명서에서 자세히 알아보세요.
  • 링크: 사이트에 있는 모든 링크의 색상을 선택합니다. 여기에서 모든 링크에 대해 표시되는 기본 색상은 물론 링크 위에 마우스 커서를 놓을 때 표시되는 마우스 오버 색상도 선택할 수 있습니다.
블록 편집기를 사용하여 링크의 사용자 정의 기본 색상 및 마우스 오버 색상을 설정합니다.
  • 캡션: 이미지 블록 캡션에 사용되는 텍스트 색상을 선택합니다.
  • 버튼: 버튼 블록에서 사용되는 색상을 설정합니다. 텍스트 색상을 선택하고 버튼 배경을 단색 또는 그라데이션으로 설정할 수 있습니다.
    • 버튼의 마우스 오버 색상 제어는 현재 사용할 수 없습니다. CSS 코드를 사용하여 버튼에 마우스 오버 색상을 적용할 수 있습니다.
  • 제목: 사이트 전체의 제목 블록의 색상을 설정합니다. 텍스트 색상을 선택하고 제목 배경을 단색 또는 그라디언트로 설정할 수 있습니다.
    • 각 제목 수준(H1~H6)별로 다른 색상을 선택하려면 색상 옆의 점 3개를 클릭하여 옵션을 펼치고 원하는 제목 수준을 클릭합니다. 체크 표시가 제목 수준 옆에 나타나면 옵션을 닫아 해당 제목 수준의 색상 설정에 접근할 수 있습니다.

모든 요소가 아닌 하나의 특정 텍스트에 대해서만 색상을 재정의하려면 해당 또는 페이지의 개별 블록 색상 설정 내에서 다른 색상을 설정할 수 있습니다.

Copied to clipboard!