요구 사항
이 팁과 트릭을 사용하려면 자체 호스팅 Discourse 인스턴스 또는 Basic보다 높은 Discourse 호스팅 플랜의 관리자가여야 합니다.
소개
Discourse는 게시물의 내용을 포맷팅하고 커스터마이징하는 여러 방법을 지원합니다. 목록은 여기서 확인할 수 있습니다:
하지만 때로는 버튼처럼 보이는 링크와 같이 더 구체적인 것이 필요할 수 있습니다.
이 가이드에서는 이러한 종류의 수정 사항을 배웁니다.
논리 구조
뒤에 있는 논리를 간략히 설명하겠습니다. 다음 단계로 건너뛰어 실용적인 예제를 바로 살펴볼 수도 있습니다. 
Discourse는 게시물 콘텐츠에서 data-로 시작하는 모든 HTML 속성을 허용합니다.
이러한 속성들은 CSS를 통해 콘텐츠를 커스터마이징할 때 대상이 됩니다.
이 튜토리얼에서는 이를 data- 속성이라고 부르겠습니다.
이러한 속성을 가진 요소를 만드는 방법 중 하나는 BBcode와 유사한 태그인 [wrap]를 사용하는 것입니다. 여기에 원하는 값을 추가합니다. 여기서는 "button"을 선택했습니다(이것은 무엇이든 될 수 있으며, 심지어 당신의 강아지 이름일 수도 있습니다 
):
[wrap=button]some text[/wrap]
이것은 다음 속성을 가진 HTML 요소를 출력합니다: data-wrap="button".
첫 번째 예제: 분홍색 배경
실용적인 예제로 시작해 보겠습니다. 분홍색 배경을 가진 텍스트를 만들어 보겠습니다.
블록 요소로
게시물에서 빈 줄에 다음을 입력하세요:
[wrap=pink]pink text[/wrap]
이것은 data-wrap="pink" 속성을 가진 div 요소를 생성합니다.
그런 다음, 다음 CSS를 테마에 추가하세요.
관리자 패널 → 커스터마이징 → 테마 → 내 테마 → CSS/HTML 편집 → CSS 로 이동합니다.
다음과 같은 CSS 코드를 입력하세요:
[data-wrap="pink"] {
background: pink;
}
그런 다음 저장 버튼을 클릭하세요.
게시물로 돌아가서 결과를 확인해 보세요:
네, 이미 아름답습니다. 
배경이 게시물의 전체 폭을 덮는 것을 알 수 있을 것입니다. 우리의 wrap이 해당 줄의 유일한 요소이기 때문에 블록 요소로 출력됩니다.
블록과 인라인 HTML 요소의 차이에 대해서는 여기서 더 자세히 배울 수 있습니다: HTML Block and Inline Elements.
여러 줄에 걸쳐 분홍색 배경을 원한다면(여전히 블록으로), [wrap] 태그가 같은 줄에 다른 콘텐츠나 텍스트가 없어야 합니다:
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
이것은 다음과 같이 보입니다:
인라인 요소로
이제, [wrap] 앞에, 뒤에, 또는 양쪽에 텍스트를 추가해 보겠습니다. 
예를 들어:
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
다음은 결과입니다:
텍스트나 다른 요소가 [wrap] 태그 중 하나와 같은 줄에 있으면, 그것은 인라인 요소로 출력됩니다.
두 번째 예제: 버튼 모양의 링크
[wrap] 태그를 다룰 때 맥락에 따라 블록 또는 인라인 요소가 될 수 있기 때문에, 다양한 이유로 원치 않는 결과가 나올 수 있습니다.
따라서 동일한 결과를 달성하는 두 가지 다른 방법을 설명하겠습니다. 가장 마음에 드는 방법을 선택할 수 있습니다. 
[wrap]를 사용한 인라인 버튼 링크
마크다운을 사용하여 링크를 만드는 문법은 다음과 같습니다: [some text](https://some-link.etc).
텍스트를 커스터마이징하여 버튼처럼 보이게 하려면, 대괄호 안에 wrap을 삽입합니다. 다음은 예제입니다:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
이 코드가 무엇을 출력하는지에 대해 언급하지 않겠습니다. [wrap=button]을 작성했으므로 CSS에서 [data-wrap="button"]을 대상으로 해야 한다는 것을 알고 있기 때문입니다.
자, 가자, 멋있는 CSS를 추가하여 예쁘게 만들어 보겠습니다! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
여기서는 CSS 규칙을 자세히 설명하지 않겠습니다. 인터넷에는 많은 CSS 리소스가 있으므로, 더 구체적인 수정을 하려면 먼저 학습이 필요합니다.
결과 
:
좋아 보이죠?
일반 HTML 콘텐츠를 사용한 인라인 버튼 링크
Discourse가 HTML 코드를 허용하므로, [wrap] 태그를 사용하지 않고 data- 속성을 가진 HTML을 사용할 수 있습니다. 이 예제에서는 링크에 대한 일반 마크다운 문법을 사용하고 <span> 태그로 감싸겠습니다.
<a> 태그는 예외 사항이므로 data- 속성을 허용하지 않아 직접 사용할 수 없습니다.
다음과 같이 입력하세요:
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
이것은 data-button 속성을 가진 <span> 태그 안쪽에 링크를 출력하므로, CSS가 약간 더 복잡해집니다. data-button과 링크 모두를 대상으로 해야 합니다:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
그리고 이것이 결과입니다!
더 나아가기
[wrap]를 사용한 커스터마이징된 목록
[wrap] 태그와 data- 속성은 많은 컨텍스트에서 사용할 수 있으며, 더 고급 콘텐츠를 커스터마이징할 수 있습니다. 한계는 주로 CSS 지식(그리고 HTML은 그보다 적은 정도)입니다.
설명 없이 하나의 예제만 제시하겠습니다. 각 요소 앞에 고양이 이모지가 붙는 목록을 커스터마이징하는 것입니다:
텍스트:
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
결과:
사용자 정의 테마 색상 변수 사용
사용자가 다른 테마나 색상을 사용할 수 있도록 허용한 경우, 특히 라이트와 다크 컬러 스키마를 선택할 수 있는 경우, 수정 사항이 모든 테마에서 잘 보이지 않을 수 있습니다.
좋은 관행은 red, #FF0000 또는 rgb(255,0,0)와 같이 "하드코딩"된 색상 대신 Discourse의 색상 변수를 사용하는 것입니다.
다음은 버튼의 배경색이 현재 팔레트의 기본 색상을 사용하고, 텍스트가 보조 색상을 사용하는 예제입니다:
텍스트:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Solarized Light 컬러 스키마를 사용하는 사용자에게는 다음과 같이 보입니다:
그리고 Solarized Dark 컬러 스키마를 사용하는 경우:
결론
이제 [wrap] 요소와 data- 속성을 사용하여 사용자 정의 요소를 만드는 기본기를 갖추었습니다.
더 고급스러운 커스터마이징을 하려면 CSS 학습이 필수적입니다. 인터넷에서 많은 튜토리얼을 찾을 수 있습니다.
다음과 같은 Discourse 가이드도 도움이 될 수 있습니다: Making custom CSS changes on your site.
인터넷 브라우저의 개발자 도구를 사용하면 Discourse의 색상 변수 목록과 각 변수의 모습을 쉽게 확인할 수 있습니다:
이 가이드에 대한 수정 사항을 제안하는 것을 주저하지 마세요!
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안하세요.
