# 헤더 뒤에 색상 배너 추가

**URL:** https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481
**Category:** Development
**Created:** [10월 17, 2023, 5:03오전 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481 "2023-10-17T05:03:07Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [10월 17, 2023, 5:03오전 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/1 "2023-10-17T05:03:07Z")

</div>

커뮤니티 회원 여러분, 안녕하세요!

헤더 아래에 색상 배너를 추가하려고 시도하고 있지만, 아직까지 성공하지 못했습니다. 다양한 CSS와 HTML 코드를 시도했고, 심지어 커스텀 컴포넌트까지 만들어 보았지만, 배너는 항상 헤더 상단에 표시되고 있습니다. 제가 달성하고자 하는 것은 다음과 같은 것입니다:

 ![Screenshot 2023-10-16 215424](https://global.discourse-cdn.com/meta/original/4X/d/9/f/d9fed236522504b0fae9bd8706e63c2a502ac9ee.jpeg)

이 부분에 대해 경험이 있거나 조언이 있으신 분은 도움을 주시면 감사하겠습니다.

감사합니다!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [10월 17, 2023, 6:05오전 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/2 "2023-10-17T06:05:57Z")

</div>

다시 인사드립니다 @Joe_Nguyen 👋

`below-site-header` 플러그인 아웃렛을 사용하여 이렇게 처리할 수 있습니다.

1단계: 테마 또는 테마 컴포넌트의 common-head에 다음 코드를 입력하세요:

```handlebars
<script type="text/x-handlebars" data-template-name="connectors/below-site-header/header-color-bar">
  <div id="color-bar">
  </div>
</script>

```

2단계: 같은 테마 또는 테마 컴포넌트의 common-css에 다음 코드를 입력하세요:

```scss
#color-bar {
  background-color: #13d83d; 
  height: 30px;
}

```

참고: 높이를 조정하고 색상 속성을 원하는 값으로 변경할 수 있습니다.

이렇게 하면 됩니다: 🙂

 ![color-bar](https://global.discourse-cdn.com/meta/original/4X/5/6/3/563ba55035574c213bd38f7e99370a26b3dc35b4.png)

---

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [10월 17, 2023, 2:23오후 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/3 "2023-10-17T14:23:32Z")

</div>

고마워요 @Lilly! 🙂

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [10월 17, 2023, 3:33오후 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/4 "2023-10-17T15:33:05Z")

</div>

로컬 인스턴스가 아닌 저장소에서 테마 구성 요소로 설정하는 방법을 확인해 보려면, 제 저장소를 여기에서 복사할 수 있습니다:

> **[GitHub - Lillinator/header-color-bar](https://github.com/Lillinator/header-color-bar)**
>
> Contribute to Lillinator/header-color-bar development by creating an account on GitHub.

몇일 안에 저장소를 삭제할 가능성이 높다는 점을 참고해 주세요.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [11월 16, 2023, 3:33오후 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/5 "2023-11-16T15:33:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.