# 배너가 포함된 카테고리 목록
**URL:** https://meta.discourse.org/t/category-list-with-banners/201280
**Category:** Theme component
**Tags:** unmaintained
**Created:** [8월 21, 2021, 7:11오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280 "2021-08-21T19:11:39Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [8월 21, 2021, 7:11오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/1 "2021-08-21T19:11:39Z")
이 컴포넌트는 기본 카테고리 페이지 스타일인 _Categories Only_ 및 _Categories With Featured Topics_에 선택적인 배너를 추가합니다:
컴포넌트 설정에서 배너 바로 아래에 카테고리를 지정하고, 배너 색상 및 제목 텍스트를 정의하여 배너를 추가할 수 있습니다. 기본 색상 테두리를 숨기는 옵션도 있습니다:
스타일을 추가하려면 일반 클래스를 선택하거나, 카테고리 ID별로 특정 배너를 선택할 수 있습니다:
```plaintext
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
```
예를 들어 카테고리를 색상 코드로 구분할 수 있습니다:
또는 배경 이미지를 추가할 수 있습니다:
> ⚠ 이 컴포넌트는 카테고리 페이지에 레이아웃 요소만 추가합니다. 따라서 사이트의 다른 곳에서 이러한 제목을 참조할 수 없습니다. 주의할 점: 모바일에는 _Categories Only_라는 기본 페이지 스타일이 없습니다. 항상 추천 주제(Featured Topics)도 함께 표시됩니다.
> 👍 **크레딧:** 이 컴포넌트는 [Cfx.re Community](https://forum.cfx.re)의 디자인과 @godgutten이 [How do I add category banners?](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10)에서 공유한 해당 룩을 구현하기 위한 원래 솔루션에서 영감을 받았습니다.
| | | |
| --- | --- | --- |
| 🛠 | **저장소** | [GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists. · GitHub](https://github.com/nolosb/discourse-category-list-banners) |
| ❓ | **설치 가이드** | [테마 또는 테마 컴포넌트 설치 방법](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
---
### Author:  [@tot](https://meta.discourse.org/u/tot)
#### Post date: [8월 30, 2021, 1:38오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/4 "2021-08-30T13:38:36Z")
Nolo에게 감사합니다. 정말 멋집니다! 여러분의 컴포넌트가 우리 커뮤니티를 향상시켰습니다.
---
### Author:  [@tot](https://meta.discourse.org/u/tot)
#### Post date: [8월 30, 2021, 4:46오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/5 "2021-08-30T16:46:19Z")
Nolo, 포럼 스타일을 나이트 모드로 전환할 때 또 다른 문제를 발견했어요. 수정해 주시면 완벽할 것 같아요!
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [8월 30, 2021, 5:14오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/6 "2021-08-30T17:14:20Z")
그것은 예상된 동작으로 보입니다. 색상 슬롯은 CSS에서 background-color로 사용할 수 있는 어떤 값이든 받아들입니다. 따라서 16진수(hex) 값을 지정하면 다른 모드와 테마에서도 동일한 색상이 유지됩니다.
실제로 배경색을 원하지 않는다면 `none` 또는 `transparent`를 지정해야 합니다.
모드에 따라 변하는 배경색을 원한다면 _CSS 커스텀 프로퍼티_로 지정해야 합니다. `var(--secondary-high)`와 같은 Discourse의 미리 정의된 변수 중 하나를 사용할 수 있습니다. 또는 [https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595에서](https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595%EC%97%90%EC%84%9C) 설명한 대로 직접 정의할 수도 있습니다.
---
### Author:  [@tot](https://meta.discourse.org/u/tot)
#### Post date: [8월 31, 2021, 2:28오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/7 "2021-08-31T14:28:28Z")
노로, 고마워요, 그거 도움이 됐어요!
---
### Author:  [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [12월 26, 2021, 11:27오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/8 "2021-12-26T11:27:30Z")
안녕하세요. 당신이 만든 걸 볼 수 있어서 정말 좋아요. 하지만 나한테도 크레딧을 줘야 하지, 단순히 내 작업만 가져다 쓰면서 나만 이용하지는 말았으면 좋겠어요……
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [12월 26, 2021, 12:33오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/9 "2021-12-26T12:33:08Z")
컴포넌트를 마음에 들어하셨다니 기쁩니다! 다만, 제 작업에 여러분이 만든 것을 무단으로 사용했다고 비난하시는 이유는 잘 모르겠네요..?
이 컴포넌트를 만들게 된 계기는 다음 주제에서 영감을 얻었습니다:
> [@더 나은 레이아웃 만들기](https://meta.discourse.org/t/creating-a-nicer-layout/200681/):
>
> Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? just a basic HTML/CSS edit or do I need to use a plugin?
OP에게 여러분의 솔루션을 언급해 주었지만, 이후 템플릿을 하드코딩하지 않고 scss 내부의 설정 목록에서 값을 분해(de-constructing)하는 방식으로 이 문제를 해결하는 방법에 대해 관심이 생겼습니다. 따라서 컴포넌트 코드는 기본적으로 이 솔루션에 관한 것입니다:
[https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo](https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo)
어쨌든, 여러분의 작업을 일부 사용했고 크레딧을 표기하지 못한 부분이 있다면 알려주시면 첫 번째 게시물을 업데이트하겠습니다 👌
---
### Author:  [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [12월 28, 2021, 11:39오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/10 "2021-12-28T23:39:21Z")
> [@manuel](#):
>
> 하지만 어쨌든: 만약 제가 당신의 작업 일부를 사용했는데 크레딧을 부여하는 것을 놓쳤다고 느끼신다면, 알려주시면 첫 번째 게시글을 업데이트하겠습니다 👌
네, 최소한의 크레딧이라도 받고 싶습니다. 하지만 전적으로 당신에게 맡기겠습니다. 그 외에는 잘 되어 있고, 이 주제 구성 요소를 제 게시글에서 추천할 계획입니다. 왜냐하면 이것이 신규 사용자에게 더 쉽게 다가갈 수 있게 해주니까요.
> [@카테고리 배너를 추가하는 방법은?](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10?u=godgutten):
>
> So now I have got it fixed for my self at least So first of all download this file [discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem \> .category-list { &:before { content: 'FiveM'; } background-image…
---
### Author:  [@Cozdabuch](https://meta.discourse.org/u/Cozdabuch)
#### Post date: [4월 18, 2022, 8:37오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/11 "2022-04-18T20:37:07Z")
@ Nolo
TC에서, 또는 테마의 CSS를 사용하여 두 번째 예시처럼 제목 텍스트를 왼쪽으로 정렬할 수 있는 방법이 있을까요?
또한 배너 이미지를 사용하지 않을 경우, 헤더 높이를 텍스트 한 줄 두께만큼만 줄일 수 있는 방법이 있을까요?
가능하다면, 텍스트 크기를 조금 더 작게 조정할 수도 있을까요?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [4월 19, 2022, 7:01오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/12 "2022-04-19T19:01:06Z")
네, 맞아요. 이 클래스들을 사용해 배너를 스타일링할 수 있습니다:
> [@manuel](#):
>
> 스타일을 추가하려면 일반 클래스뿐 아니라 카테고리 ID별로 특정 배너를 선택할 수 있습니다:
>
> ```plaintext
> .category list .category-list-banner {
> &.category-5 { [특정 배너 스타일링] }
> &:after { [제목 스타일링]}
> }
>
> ```
**기존** 일반 클래스의 선언을 덮어쓰려면 `!important` 속성을 사용해야 합니다. 예를 들어, 언급하신 스타일의 경우:
```plaintext
.category-list .category-list-banner {
justify-content: flex-start !important;
min-height: unset !important;
&:after {
font-size: var(--font-up-3) !important;
}
}
```
이는 해당 스타일이 실제로 특정 배너에 선언되어 있기 때문입니다. 컴포넌트에서 이 부분을 개선할 수는 있겠지만, 당분간은 `important`를 사용해 덮어써야 합니다.
---
### Author:  [@lisandro\_iaffar](https://meta.discourse.org/u/lisandro_iaffar)
#### Post date: [7월 3, 2022, 11:38오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/13 "2022-07-03T23:38:00Z")
이 컴포넌트를 정말 많이 도와주셔서 감사합니다!! 저는 정치 관련 포럼을 개발 중인데, 이러한 형태의 분리를 적용할 수 있다는 점이 매우 중요합니다.
이미 제 포럼에는 큰 개선이지만, 헤더를 URL로 참조할 수 있다면 완전히 다른 차원의 경험이 될 것입니다. 그렇게 하면 포럼 상단에 버튼을 만들어 사용자가 같은 페이지 내에서 쉽게 탐색할 수 있게 되거든요. 포럼이 (기대하듯) 크게 성장한다면 매우 민첩한 기능이 될 것입니다. 현재 이것이 가능한가요?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [7월 5, 2022, 9:34오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/14 "2022-07-05T09:34:33Z")
@lisandro\_iaffar님의 제안에 감사드립니다. 다만 이 컴포넌트는 HTML 템플릿을 변경하지 않는 경량 솔루션을 제공하는 것이기 때문에, 섹션을 참조하려면 [https://github.com/jordanvidrine/discourse-category-group-boxes에서](https://github.com/jordanvidrine/discourse-category-group-boxes%EC%97%90%EC%84%9C) 제공하는 방식을 사용해야 합니다.
---
### Author:  [@lisandro\_iaffar](https://meta.discourse.org/u/lisandro_iaffar)
#### Post date: [7월 5, 2022, 12:33오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/15 "2022-07-05T12:33:34Z")
답변해 주셔서 감사합니다. 그리고 이렇게 안내해 주셔서 감사합니다 🙂
이 컴포넌트를 다시 한번 정말 감사합니다. 덕분에 포럼 레이아웃이 훨씬 좋아졌어요 😃
---
### Author:  [@cogdog](https://meta.discourse.org/u/cogdog)
#### Post date: [10월 11, 2022, 9:52오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/16 "2022-10-11T21:52:05Z")
이 기능을 사용해 보고 싶어요. 카테고리를 너무 많이 만들었거든요. 이제 그룹으로 정리할 수 있으니 큰 도움이 될 것 같아요.
직접 써봐야 알겠지만, 이렇게 하면 사용 빈도가 낮은 오래된 카테고리를 앞페이지에서 제외할 수도 있겠죠? 새 사이드바를 통해 여전히 접근할 수 있을 테니까요.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [10월 17, 2022, 11:35오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/17 "2022-10-17T11:35:14Z")
네, 물론이죠 👍 사실 저는 다른 페이지 요소들(사이드바, 헤더, 내비게이션 바, 카테고리 페이지 등)에서 카테고리 선택을 거의 항상 수행합니다. 웹사이트 구조와 비슷한 개념이죠. 잘 정리되어 있는 것이 중요하지만, UI 표시 방식을 결정할 필요는 없습니다.
---
### Author:  [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [10월 25, 2023, 4:46오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/18 "2023-10-25T04:46:16Z")
안녕하세요 @manuel, 음성 업데이트 이후에도 이 훌륭한 컴포넌트가 여전히 작동하는지 알고 싶습니다. 설치했는데 제 환경에서는 작동하지 않네요. 미리 감사합니다.
---
### Author:  [@duncanell](https://meta.discourse.org/u/duncanell)
#### Post date: [2월 24, 2024, 12:03오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/19 "2024-02-24T00:03:07Z")
배경 이미지를 어떻게 추가하나요?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2월 24, 2024, 1:00오전 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/20 "2024-02-24T01:00:05Z")
안녕하세요, 환영합니다 👋
테마에서 CSS를 추가하거나, 별도의 테마 컴포넌트를 만들 수 있습니다:
> [@manuel](#):
>
> 스타일을 추가하려면 일반 클래스와 함께 카테고리 ID로 특정 배너를 선택할 수 있습니다:
>
> ```plaintext
> .category list .category-list-banner {
> &.category-5 { [특정 배너 스타일 적용] }
> &:after { [제목 스타일 적용]}
> }
>
> ```
예를 들어, 카테고리 ID 4에 이미지를 추가하고 싶다면 다음과 같이 하면 됩니다:
```css
.category-list .category-list-banner {
&.category-4 {
background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
background-size: cover;
}
}
```
이것은 단순한 예시입니다. 더 자세한 정보는 [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) CSS 속성을 참고할 수 있습니다.
도움이 되는 링크들 👍 :
> [@사이트에서 사용자 지정 CSS 변경하기](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark 이 가이드는 CSS 소개, Discourse에서 CSS를 추가하는 위치, 그리고 브라우저 검사 도구를 사용하여 올바른 선택자를 찾는 방법 등을 포함하여 Discourse 사이트에서 CSS를 변경하는 방법을 설명합니다. person_raising_hand 필요한 사용자 권한: 관리자 요약 이 가이드에서는 다음 내용을 다룹니다: CSS 및 핵심 개념에 대한 간단한 소개 테마 구성 요소를 사용하여 Discourse 사이트에 CSS를 추가하는 방법 브라우저 검사 도구를 사용하여 올바른 CSS 선택자를 찾는 방법 CSS 기초 이해하기 CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 약자입니다. 이해해야 할 세 가지 핵심 개념은 다음과 같습니다: 구조: CSS 규칙은 선택자, 속성, 값으로 구성됩니다. p { color: red; } 선택자: p (모든 HTML \ 태그를 대상으로 함) 속성: color …
> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6월 14, 2024, 4:36오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/21 "2024-06-14T16:36:07Z")
게시글이 새 주제로 분리되었습니다: [카테고리 박스에 추가 정보 추가](https://meta.discourse.org/t/add-extra-info-to-category-box/312119)
---
### Author:  [@Orioni](https://meta.discourse.org/u/Orioni)
#### Post date: [8월 7, 2026, 4:29오후 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/22 "2026-08-07T16:29:10Z")
Category List Banner 컴포넌트에서 현재 다음과 같은 경고가 표시됩니다.
> **[관리자 알림]** 테마 ['Category List Banners’](https://eurth.org/admin/customize/themes/7?safe_mode=no_themes)에는 업데이트가 필요한 코드가 포함되어 있습니다. (id:discourse.hbs-extension) (_[자세히 보기](https://meta.discourse.org/t/398896?ref=eurth.org)_)
이것은 2026년 3월에 발표된 공지 사항과 관련이 있습니다.
> [@테마 및 플러그인에서 .hbs 파일 확장명 비추천](https://meta.discourse.org/t/deprecating-hbs-file-extension-in-themes-and-plugins/398896/20?u=orioni):
>
> Any remaining uses of .hbs files will now trigger a warning banner for admins. Depending on real-world-telemetry, we plan to remove support during the 2026.8.0-latest cycle. 2026.7 ESR will be the last release with hbs support.
[Next page](https://meta.discourse.org/t/category-list-with-banners/201280.md?page=2)