# versatile-banner에 CSS를 사용하는 방법
**URL:** https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353
**Category:** Support
**Tags:** versatile-banner
**Created:** [12월 26, 2024, 3:19오전 UTC](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353 "2024-12-26T03:19:35Z")
**Posts on this page:** 1
**Showing post:** 2
### 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)
---
_[View the full topic](https://meta.discourse.org/t/how-to-use-css-for-versatile-banner/344353)._