# 관리자 GNB 색상 변경하기

## 📌 요구사항 정의 및 분석

* 상점의 아이덴티티를 나타내는 색상이 존재하여, 해당 색상을 상점 관리자의 GNB에 적용하고 싶음.
* 고도몰 상점 관리자 GNB 영역은 수정이 가능한 부분임을 확인하여 해당 부분 색상을 수정하고자 함.

## 📝 개선안 정리

* 색상을 변경하고자 하는 GNB 범위 선정

<figure><img src="https://3829245599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDr6HwDXRgyoJINAE95Gb%2Fuploads%2FQxlKnFURY67UF5cZ14ha%2Fimage.png?alt=media&#x26;token=da4ff0fd-0380-4613-ac1e-174657cd1a11" alt=""><figcaption></figcaption></figure>

* 영역 별로 다른 색상을 적용하며, ➀번은 <mark style="background-color:blue;">#213D54</mark>으로 ➁번은 <mark style="color:blue;">#5A86CB</mark> 으로 변경

## 🛠️ 커스터마이징 진행

* `admin/header.php` 파일에서 수정하고자 하는 영역의 클래스를 확인합니다.
* 관리자페이지 CSS를 추가할 수 있는 `admin/css/admin-custom.css` 파일을 엽니다.

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

/**
 * custom css 입니다. 추가적인 css는 여기에 작성을 해주세요.
 */
```

{% endcode %}

* ➀번 클래스의 background-color를 <mark style="background-color:blue;">#213D54</mark> 로 지정합니다.&#x20;

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

#header .navbar {
    background-color: #213D54;
}

```

{% endcode %}

* ➁번 클래스의 background-color를  <mark style="color:blue;">#5A86CB</mark> 로 지정합니다.

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

#header .nav.navbar-nav.reform {
    background-color: #5A86CB;
}
```

{% endcode %}

## 🔖 결과 확인

<figure><img src="https://3829245599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDr6HwDXRgyoJINAE95Gb%2Fuploads%2Fu8NqGow5xXycfRIFQTKy%2Fimage.png?alt=media&#x26;token=017048f5-5ecb-4cba-a067-e1465620c352" alt=""><figcaption></figcaption></figure>