### Author:  [@Andro](https://meta.discourse.org/u/Andro)
#### Post date: [12월 26, 2024, 3:19오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/1 "2024-12-26T03:19:35Z")
배너의 '확대’와 ‘닫기’ 항목의 색상을 변경하고 싶습니다. CSS로 가능할 것 같은데, 배너 컴포넌트에서 어떻게 해야 할까요?
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [12월 26, 2024, 5:44오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/2 "2024-12-26T05:44:42Z")
다음과 같이 수행할 수 있습니다:
1. **검사 도구 열기** :
다양한 배너가 활성화된 웹페이지로 이동합니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 **“검사”** (Windows에서는 `Ctrl + Shift + I`, Mac에서는 `Cmd + Option + I`를 누름)를 선택합니다. 그러면 브라우저의 개발자 도구가 열립니다.
2. **배너 찾기** :
개발자 도구의 **Elements(요소) 탭**에서 코드 섹션 위에 마우스를 올려 해당 웹페이지의 영역이 강조되는 것을 확인합니다. 배너를 찾으면, 배너를 포함하는 가장 바깥쪽 \*\*``\*\*를 클릭합니다. 이렇게 하면 배너 전체와 그 안의 모든 요소를 선택하게 됩니다.
3. **요소 탐색** :
배너가 선택된 상태에서, **Elements(요소) 탭**에서 배너 구조 내부의 모든 중첩된 HTML 요소를 볼 수 있습니다. 이는 배너를 생성하는 데 사용된 HTML의 계층 구조를 보여줍니다.
4. **스타일 검사** :
개발자 도구의 **오른쪽 쪽** 에는 **Styles(스타일) 탭**이 있습니다. 여기에는 선택된 요소에 적용된 CSS 스타일이 표시됩니다. 상속된 스타일, 인라인 스타일, 외부 스타일시트의 스타일을 볼 수 있습니다.
5. **변경 사항 실험** :
배너 안의 요소를 선택하고 Styles(스타일) 탭에서 스타일을 직접 수정합니다. 예를 들어 색상, 글꼴 크기, 패딩, 여백 또는 기타 CSS 속성을 조정할 수 있습니다. 이러한 변경 사항은 임시이며 웹페이지에 즉시 표시되므로 자유롭게 실험할 수 있습니다.
6. **디자인 최종화** :
디자인 변경 사항에 만족하면 수정된 CSS 코드를 복사합니다. 이는 개별 요소나 배너 전체에 대한 변경 사항을 포함할 수 있습니다.
7. **변경 사항 적용** :
`https://yoursite.com/admin/customize/components`로 이동하여 컴포넌트를 생성한 후 **Edit HTML/CSS(HTML/CSS 편집) 섹션**에 수정된 CSS 코드를 붙여넣습니다. 스타일이 올바르게 적용되도록 적절한 배너 클래스나 ID를 지정하고, 해당 컴포넌트를 테마에 적용합니다.
8. **저장 및 검토** :
업데이트된 CSS를 저장하고 웹사이트를 새로고침해 배너가 의도한 대로 변경 사항을 반영하는지 확인합니다.
또한 다음을 참고할 수 있습니다: [Discourse에서 CSS 사용자 지정 방법](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101)
---
### Author:  [@Andro](https://meta.discourse.org/u/Andro)
#### Post date: [12월 26, 2024, 9:24오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/3 "2024-12-26T09:24:27Z")
@MihirR 아주 유용한 일반적인 설명을 주셔서 감사합니다.
조금 찾아본 결과, 웹 개발자 도구에서 Firefox가 Chrome보다 더 나은 스타일 편집기를 제공하는 것으로 보입니다.
하지만 제가 큰 어려움을 겪고 있는 구체적인 사례로 돌아가면, Expand와 Close 버튼이 호버 시 색상이 변하는데 기본 색상을 설정하는 방법을 찾는 데 실패했습니다. 해당 항목은 `span.d-button-label` 클래스인 것 같습니다.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 26, 2024, 9:42오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/4 "2024-12-26T09:42:46Z")
안녕하세요 👋
이 버튼들의 색상을 변경하는 방법에 대한 예시입니다.
```scss
.banner-box {
.button-container {
.btn {
.d-icon,
.d-button-label {
color: var(--tertiary); // 원하시는 색상으로 변경하세요
}
// 호버 및 포커스 색상
.discourse-no-touch & {
&:hover,
&:focus {
.d-icon,
.d-button-label {
color: var(--tertiary-hover); // 원하시는 색상으로 변경하세요
}
}
}
}
}
}
```
---
### Author:  [@Andro](https://meta.discourse.org/u/Andro)
#### Post date: [12월 26, 2024, 9:58오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/5 "2024-12-26T09:58:41Z")
@Dan, 이건 SCSS인가요, LESS인가요? 요즘 CSS 트렌드를 놓치고 있어서요. 제가 컴파일을 하지 않아도 Discourse에서 바로 사용할 수 있나요?
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [12월 26, 2024, 10:24오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/6 "2024-12-26T10:24:05Z")
@Andro 그건 SCSS예요 :))
---
### Author:  [@Andro](https://meta.discourse.org/u/Andro)
#### Post date: [12월 26, 2024, 10:27오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/7 "2024-12-26T10:27:35Z")
그래서 Discourse가 SCCS를 네이티브로 지원하나요?
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [12월 26, 2024, 10:30오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/8 "2024-12-26T10:30:26Z")
네, SCSS를 기본적으로 지원합니다.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [1월 25, 2025, 10:30오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353/9 "2025-01-25T10:30:53Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.