> For the complete documentation index, see [llms.txt](https://help.directcloud.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.directcloud.net/admin_manual/custom_settings/header_color.md).

# 사용자 페이지의 Header 배경 색상, 아이콘 메뉴 색상을 설정하는 방법

### 개요 <a href="#a03" id="a03"></a>

이 매뉴얼에서는 web 브라우저의 Header 부분에 커스텀 색상을 설정하는 방법을 설명합니다.\
아래 항목에 대해 커스텀 색상을 설정할 수 있습니다.

・Header의 배경 및 하단 라인\
・메뉴 아이콘 및 메뉴 아이콘에 마우스를 올렸을 때의 배경\
・검색 조건을 저장했을 때 표시되는 아이콘의 문자 및 배경

***

### 제한·보충사항 <a href="#a04" id="a04"></a>

* 관리자 권한이 부여된 사용자는 관리자 페이지의 '공유 설정' 메뉴를 사용할 수 있습니다.
* web 브라우저의 컬러 설정에서 사용하지 않음을 선택하면 기본 색상으로 표시됩니다.
* 커스텀 색상을 설정하고 저장 버튼을 클릭하면 컬러 설정이 저장됩니다.
* 사용하지 않음으로 전환한 뒤 다시 사용함을 선택하더라도, 저장되어 있는 컬러 설정이 그대로 표시됩니다.
* 존재하지 않는 컬러 코드를 입력한 경우, 텍스트 박스 아래에 입력값이 올바르지 않습니다. 라는 오류가 표시됩니다.
* 아래 항목을 Header 배경과 동일한 색상으로 설정하는 경우 구분할 수 없게 되므로 주의해야 합니다.
  * 메뉴 아이콘
  * 검색 조건 아이콘

***

### 절차 <a href="#a05" id="a05"></a>

{% hint style="warning" %}
**색상 설정**
{% endhint %}

1. '공유 설정' > '맞춤형 설정' 메뉴를 클릭합니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2FZ9LNPcBbxwRTnpNKhU5n%2Fimage.png?alt=media&amp;token=c3063f5e-37da-4ddf-b41b-e82aad4c17ee" alt=""><figcaption></figcaption></figure>

2. 색상 설정에서 'Web 색상 설정'에서 '사용'을 선택합니다. 커스텀 색상 설정이 표시됩니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2F9ogQEDvjTYU7HdQH9NDl%2Fimage.png?alt=media&amp;token=09812fe6-6361-4b1d-8fb6-871cba7ad819" alt=""><figcaption></figcaption></figure>

3. 커스텀 색상을 설정할 수 있는 항목을 검토하고 색 구성표를 디자인합니다.

| 항목                   | 설명                                             |
| -------------------- | ---------------------------------------------- |
| Header 배경 색상         | 헤더 배경색                                         |
| 아이콘 메뉴 색상            | 헤더의 오른쪽에 표시되는 메뉴 아이콘의 색상                       |
| Quick Search 폰트 색상   | 검색 기준 아이콘에 표시되는 문자 색상                          |
| Quick Search 배경 색상 외 | 검색 조건 아이콘 배경, 머리글 밑줄, 메뉴 아이콘을 호버할 때 표시되는 배경 색상 |

4. 다음 방법 중 하나를 사용하여 각 항목의 색상을 설정합니다.

❶ ▼ 버튼을 클릭하여 표시된 표준 64색 중에서 설정할 색상을 선택합니다.\
선택한 색상과 색상 코드가 자동으로 변경됩니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2F4sNSgR59binrKSoHqMfK%2Fimage.png?alt=media&amp;token=0dd1d182-93d6-4981-8fd2-af40cf805ef3" alt=""><figcaption></figcaption></figure>

❷ ▼ 버튼을 클릭하여 색상 선택기로 설정하려는 색상을 설정하고 \[선택] 버튼을 클릭합니다.\
선택한 색상과 색상 코드가 자동으로 변경됩니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2FMeDpe76FHb9zC5jo7SRw%2Fimage.png?alt=media&amp;token=9b9525ca-3252-4870-831f-0afc23963089" alt=""><figcaption></figcaption></figure>

❸ 텍스트 상자에 설정할 색상 코드를 입력하고 입력 상자 이외의 위치를 ​​클릭합니다.\
입력 상자에서 Enter 키를 클릭하면 커스텀 색상 설정이 저장됩니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2FpESrDBH9PMNXHeXhwtsK%2Fimage.png?alt=media&amp;token=d4f4c98f-3b48-4193-ad7c-889b2e2567ed" alt=""><figcaption></figcaption></figure>

5. 저장 버튼을 클릭합니다.

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2F9KsQ2uB27N3IQODnNVr1%2Fimage.png?alt=media&amp;token=f35b8d01-58cf-42bc-97a7-5ebf0fb54beb" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**커스텀 색상 표시 예**
{% endhint %}

다음은 커스텀 색상의 설정 예와 표시 예를 보여줍니다.

* '커스텀 색상'의 설정 예

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2Fgff0TylFByE3coEFwW09%2Fimage.png?alt=media&amp;token=4166c892-3896-4725-85b5-62d7fb659547" alt=""><figcaption></figcaption></figure>

* 사용자 페이지의 표시 예

<figure><img src="https://1610041171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFRc8hBWqHCHYh3E0AhFb%2Fuploads%2FbUgdxeWupvKuqqg5pz08%2Fimage.png?alt=media&amp;token=c27ddbbe-4b82-427d-a355-821780dfc6bf" alt=""><figcaption></figcaption></figure>