다음과 같이 수행할 수 있습니다:
-
검사 도구 열기:
다양한 배너가 활성화된 웹페이지로 이동합니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 “검사”(Windows에서는Ctrl + Shift + I, Mac에서는Cmd + Option + I를 누름)를 선택합니다. 그러면 브라우저의 개발자 도구가 열립니다. -
배너 찾기:
개발자 도구의 Elements(요소) 탭에서 코드 섹션 위에 마우스를 올려 해당 웹페이지의 영역이 강조되는 것을 확인합니다. 배너를 찾으면, 배너를 포함하는 가장 바깥쪽 **<div>**를 클릭합니다. 이렇게 하면 배너 전체와 그 안의 모든 요소를 선택하게 됩니다. -
요소 탐색:
배너가 선택된 상태에서, Elements(요소) 탭에서 배너 구조 내부의 모든 중첩된 HTML 요소를 볼 수 있습니다. 이는 배너를 생성하는 데 사용된 HTML의 계층 구조를 보여줍니다. -
스타일 검사:
개발자 도구의 오른쪽 쪽에는 Styles(스타일) 탭이 있습니다. 여기에는 선택된 요소에 적용된 CSS 스타일이 표시됩니다. 상속된 스타일, 인라인 스타일, 외부 스타일시트의 스타일을 볼 수 있습니다. -
변경 사항 실험:
배너 안의 요소를 선택하고 Styles(스타일) 탭에서 스타일을 직접 수정합니다. 예를 들어 색상, 글꼴 크기, 패딩, 여백 또는 기타 CSS 속성을 조정할 수 있습니다. 이러한 변경 사항은 임시이며 웹페이지에 즉시 표시되므로 자유롭게 실험할 수 있습니다. -
디자인 최종화:
디자인 변경 사항에 만족하면 수정된 CSS 코드를 복사합니다. 이는 개별 요소나 배너 전체에 대한 변경 사항을 포함할 수 있습니다. -
변경 사항 적용:
https://yoursite.com/admin/customize/components로 이동하여 컴포넌트를 생성한 후 Edit HTML/CSS(HTML/CSS 편집) 섹션에 수정된 CSS 코드를 붙여넣습니다. 스타일이 올바르게 적용되도록 적절한 배너 클래스나 ID를 지정하고, 해당 컴포넌트를 테마에 적용합니다. -
저장 및 검토:
업데이트된 CSS를 저장하고 웹사이트를 새로고침해 배너가 의도한 대로 변경 사항을 반영하는지 확인합니다.
또한 다음을 참고할 수 있습니다: Discourse에서 CSS 사용자 지정 방법