# CSS와 HTML로 커스텀 버튼을 만들 수 있나요?

**URL:** https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958
**Category:** Development
**Created:** [11월 17, 2022, 8:15오후 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958 "2022-11-17T20:15:27Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [11월 17, 2022, 8:15오후 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/1 "2022-11-17T20:15:27Z")

</div>

이런 버튼을 만들어 보고 싶은데, 이 버튼은 CSS와 HTML로 만들어졌다고 합니다. Discourse에서 HTML을 어디서 커스터마이즈하나요? CSS를 넣는 것과 같은 링크인가요?

[Cool Glowing Effect on Buttons using HTML & CSS | CodingNepal - YouTube](https://www.youtube.com/watch?v=txP82s1akoE)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [11월 17, 2022, 9:10오후 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/2 "2022-11-17T21:10:59Z")

</div>

시작할 곳은 [디스코urs 테마 개발 입문 가이드](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648)입니다

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [11월 17, 2022, 10:55오후 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/3 "2022-11-17T22:55:55Z")

</div>

> [@Danielabc](#):
>
> 이런 버튼 하나를 만들고 싶어요

게시글 안에 버튼을 추가하고 싶은 건가요? (이 경우 [이 주제](https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747)를 참고하세요) 아니면 Discourse 인터페이스의 기존 버튼을 커스터마이징하고 싶은 건가요?

> [@Danielabc](#):
>
> CSS를 넣었던 그 링크 같은 곳인가요?

네, 그렇습니다. 하지만 Discourse 인터페이스에 버튼을 **추가** 하는 것을 원한다면 그것은 다른 문제이며 프로그래밍이 필요합니다.

참고로, 해당 비디오는 제작자가 실제 코드에 대한 링크를 제공하지 않아서 신경 쓰입니다 ([https://codepen.io](https://codepen.io) 같은 사이트는 이런 작업을 할 때 매우 유용합니다). 꽤 고급스러운 CSS라서 비디오에서 수동으로 복사하는 것은 번거로울 것입니다.

호기심에 인터넷을 조금 검색해 보니, 코드가 [그들의 웹사이트](https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/)에 게시되어 있습니다.

* * *

Jay의 답변을 보충하여, 웹사이트 HTML 스타일 커스터마이징이 유일한 목적이라면 [Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101) 링크가 더 직관적일 수 있습니다.

마지막으로, Discourse 포럼에는 Styleguide라는 훌륭한 사전 설치 플러그인이 있습니다. 이 플러그인을 활성화하면 현재 스타일링이 적용된 포럼의 거의 모든 요소를 확인할 수 있습니다:

먼저 Styleguide 페이지를 활성화하세요:  
관리자 패널 → 플러그인 → Styleguide → ⚙설정 → **styleguide enabled** ✅ 체크.

 ![styleguide plugin](https://global.discourse-cdn.com/meta/original/4X/e/5/2/e5217b37aee4d06bd7979d58810b4304cc26fed3.png)

그 다음, Styleguide 페이지로 이동할 수 있습니다. 포럼 URL 뒤에 `/styleguide`를 붙여넣으면 확인 가능합니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/a/b/2ab1cf58f0b9c10f45b76dda191e4bc89c5db9b1.png)

CSS나 스타일링 전반에 대해 잘 모른다면, 이 버튼 프로젝트에 착수하기 전에 [기초](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)를 배우는 것을 강력히 권장합니다.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [11월 18, 2022, 8:36오전 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/4 "2022-11-18T08:36:01Z")

</div>

안녕하세요, 게시해 주셔서 감사합니다.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [11월 18, 2022, 8:37오전 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/5 "2022-11-18T08:37:22Z")

</div>

와, 이 스타일가이드를 보여줘서 정말 감사해요! 이 기능이 있다는 걸 몰랐거든요! 정말 고맙습니다! 제가 보낸 링크처럼 웹사이트 버튼 스타일을 꾸며볼 거예요! 이 경우엔 의문이 들었는데요, 영상에서는 HTML과 CSS를 사용해야 한다고 나오는데, 디스코러스(Discourse)는 CSS만 허용하는 것 같거든요! 이런 것들을 알려줘서 정말 감사합니다!
