# 사용자 페이지의 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="/files/EkaaTZ12L9pW9Fs8oNjv" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/lVvS3wSRRvtwvrD0up7W" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/ha2chtV4jAxrlVQ5HsXp" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/UpcvD1SoDmjPMpVmNif3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/si155eEpVQlwW4TqSWCS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2uEI86U4Bfnbo4tl3Cck" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/lPbuFv7d7Wnwl6o0vVY9" alt=""><figcaption></figcaption></figure>

* 사용자 페이지의 표시 예

<figure><img src="/files/SR6RbWQISiW8x6Cvo0Lc" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.directcloud.net/admin_manual/custom_settings/header_color.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.