CSS 가상 요소를 사용해 사이트의 어디에나 텍스트나 이미지를 삽입하세요

Discourse · 10월 11, 2018, 11:12오전

Discourse 사이트에 텍스트나 이미지를 삽입하고 싶으신가요?

텍스트의 경우 대부분의 경우 /admin/customize/site_texts에서 수정하는 것으로 충분합니다.
그러나 때로는 기존 요소 중 하나를 수정하는 대신, 서로 다른 두 블록 사이에 문장을 추가하는 것이 더 바람직할 수 있습니다.

CSS3의 :before와 :after 속성을 사용하여 이를 어떻게 수행하는지 살펴보겠습니다.

기본 단계

작업을 수행하려면 주요 브라우저에 있는 개발자 콘솔을 사용해야 합니다. 열려면 F12 키를 누르세요.

image1911×879 101 KB
텍스트를 추가하려는 before 또는 after 위치에 해당하는 요소를 선택하세요.

보시는 바와 같이, 마우스가 요소를 지날 때마다 해당 요소가 강조되고 오른쪽의 HTML과 CSS에서 해당하는 클래스가 자동으로 선택됩니다. Discourse 스타일시트를 편집하기 전에 라이브 테스트를 수행하십시오. 작업을 수행할 요소를 선택한 후 단순히 아이콘을 클릭하세요. 이렇게 하면 필요에 따라 수정할 수 있는 새로운 규칙이 CSS에 추가됩니다.
편집을 시작합니다. 클래스에 :before 또는 :after 접미사를 추가하고 content 속성을 사용하여 텍스트를 추가하세요.

CSS를 잘 모른다면 이미지를 추가하는 것은 약간 더 복잡할 수 있지만, 유사한 패턴을 따르는 것이 좋은 관행입니다:
```
background-image: url("url-goes-here");
background-repeat: no-repeat;
background-size: your-value;
content: "";
width: your-value;
height: your-value;
display: inline-block;
```
Before:

image1920×885 98.3 KB

And after:

image1920×887 99.4 KB

선택한 특정 클래스가 사용되는 모든 위치에 텍스트가 표시된다는 점을 기억하세요. 때로는 새 텍스트가 표시되기를 원하는 요소를 지정해야 하며, 이를 위해 CSS에 부모 요소를 추가해야 합니다.

커스터마이징을 수행합니다. CSS에 대해 조금만 알면 원하는 대로 텍스트 스타일을 쉽게 커스터마이징할 수 있습니다.

.fancy-title::after {
  content: "ANOTHER TEXT " "\f072";
  color: violet;
  font-family: Fontawesome;
  background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%);
  font-size: 18px;
  padding: 2px 4px;
  border: 1px solid;
}

만족스러운 결과를 얻으면 테마 컴포넌트를 생성하여 변경 사항을 사이트의 CSS에 추가하세요.

다음은 몇 가지 실용적인 예시입니다:

토픽 제목 (Topic Title)

일부 사이트에서는 제목 또는 각 게시물 앞(before) 또는 **뒤(after)**에 이미지, 배너 또는 개인화된 광고를 추가하는 것이 유용할 수 있습니다.

#topic-title::before {
  background-image: url(your-URL-here);
  background-repeat: no-repeat;
  background-size: 750px 335px;
  width: 750px;
  height: 335px;
  display: inline-block;
  content: "";
}

#topic-title::after {
  background-image: url(your-URL-here);
  background-repeat: no-repeat;
  background-size: 800px 295px;
  width: 800px;
  height: 295px;
  display: inline-block;
  content: "";
}

토픽 본문 (Topic Body)

.topic-body.clearfix::before {
  background-image: url(your-URL-here);
  max-height: 2.8571em;
  width: 690px;
  height: 184px;
  background-size: auto 2.8571em;
  background-repeat: no-repeat;
  margin-left: 11px;
  margin-bottom: 0.25em;
}

또는 **뒤(after)**에:

.topic-body.clearfix::before를 .topic-body.clearfix::after로 변경하기만 하면 됩니다.
동일한 방식으로, before 또는 after 위치에 일반 텍스트를 추가할 수도 있습니다:

.topic-body.clearfix::before {
  content: "DISCOURSE ROCKS!";
  color: red;
  font-weight: bold;
  padding-left: 11px;
}

게시물 버튼 (Post Buttons)

.nav.post-controls .actions::before {
  color: red;
  content: "Hello from Discourse";
}

타임라인 (Timeline)

.topic-timeline::before {
  color: red;
  content: "Hello World";
}

.topic-timeline::after {
  color: red;
  content: "Hello again";
}

.timeline-scroller-content::before {
  color: violet;
  content: "Hey,";
}

.timeline-scroller-content::after {
  color: violet;
  content: "It's me again!";
}

.timeline-container .topic-timeline .start-date::before {
  color: goldenrod;
  content: "Start Date ";
}

timeline-container .topic-timeline .start-date::after {
  color: goldenrod;
  content: " \f060";
  font-family: Fontawesome;
}

.widget-link.now-date::before {
  content: "\f061 ";
  color: burlywood;
  font-family: Fontawesome;
}

.widget-link.now-date::after {
  color: burlywood;
  content: " Now Date";
}

푸터 버튼 (Footer Buttons)

image958×257 9.77 KB
```
#topic-footer-buttons::before {
  content: "THESE ARE FOOTER BUTTONS";
  color: indianred;
  border: 2px solid;
  padding: 3px;
}

#topic-footer-buttons::after {
  color: indianred;
  content: "CONTENT AFTER GO HERE";
  border: 2px solid;
}
```
후자의 경우, :after 콘텐츠는 텍스트 뒤에 삽입된다는 점을 주목해야 합니다. 특별한 커스터마이징이 필요하지 않다면 CSS를 편집하는 대신 /admin/customize/site_texts를 통해 원래 텍스트를 변경하는 것이 권장됩니다.

추천 토픽 (Suggested Topics)

#suggested-topics::before {
  content: "";
  background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
  width: 690px;
  height: 184px;
  background-size: 690px 184px;
  background-repeat: no-repeat;
  display: inline-block;
}

#suggested-topics::after {
  content: "";
  background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
  width: 690px;
  height: 184px;
  background-size: 690px 184px;
  background-repeat: no-repeat;
  display: inline-block;
}

토픽 액션 (Topic Actions)

.widget-button.btn-flat.share.no-text.btn-icon::after {
  content: " Share";
}

.widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
  content: " Like";
}

참조: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

참고: ::before와 ::after로 생성된 의사 요소(pseudo-elements)는 요소의 포맷팅 박스에 포함되므로, <img>나 <br>와 같은 _교체 요소(replaced elements)_에는 적용되지 않습니다. 출처: ::after CSS pseudo-element - CSS | MDN

즉, 자식 요소를 가질 수 없는 “셀프 클로즈드(self-closed)” 요소에는 이 방법이 작동하지 않습니다. 의사 요소가 다음과 같은 구조인 것처럼 직관적으로 생각하기 쉽습니다:

{::before is here}<tag>text content</tag>{::after is here}

하지만 실제로는 다음과 같습니다:

<tag>{::before is here}text content{::after is here}</tag>

이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안해 주세요.

글		댓글	조회수
Adding code beneath the Timeline Product Support	2	898	4월 11, 2019
Add custom content on anywhere on discourse Development	1	677	6월 28, 2022
Customize posts' contents with your own styles Developer Guides css	8	3710	3월 17, 2023
Add elements or nodes Development	4	1133	10월 18, 2016
How to add customer HTML after "post_1" Product Support	4	2457	7월 17, 2019

CSS 가상 요소를 사용해 사이트의 어디에나 텍스트나 이미지를 삽입하세요

기본 단계

Related topics