# 화면 구석에 버튼을 배치하는 방법은?
**URL:** https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488
**Category:** Development
**Created:** [8월 30, 2020, 7:29오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488 "2020-08-30T19:29:29Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@verilog15](https://meta.discourse.org/u/verilog15)
#### Post date: [8월 30, 2020, 7:29오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/1 "2020-08-30T19:29:29Z")
커뮤니티 여러분 안녕하세요!
Discourse에서 플러그인을 만드는 방법을 공부하고 있습니다. 현재 화면 구석에 버튼을 배치하고, 클릭 시 요청을 처리하는 방법을 알아보고 있습니다. 어떻게 해야 할까요? 아주 기본적인 내용인데, 어떻게 해야 할지 도저히 모르겠습니다.
또한 일부 플러그인에서 `includePostAttributes`나 `decorateWidget` 같은 호출을 보았습니다. Discourse에서 사용할 수 있는 모든 메서드 목록을 어디서 확인할 수 있을까요?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [8월 31, 2020, 1:52오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/2 "2020-08-31T13:52:15Z")
> [@verilog15](#):
>
> 디스코스에서 플러그인을 만드는 방법을 공부하고 있습니다. 현재 화면 구석에 버튼을 배치하는 방법과 클릭 시 실행되는 동작을 파악하려 하고 있습니다.
버튼을 추가하려는 위치와 클릭 시 원하는 동작에 대한 스크린샷을 올려주시겠어요?
> [@verilog15](#):
>
> 디스코스에서 사용할 수 있는 모든 메서드 목록을 어디서 볼 수 있나요?
플러그인 API를 말씀하시는 것 같습니다. 해당 API의 모든 메서드와 일부 예제는 여기에서 찾을 수 있습니다.
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js)
해당 API에서 가장 인기 있는 메서드 중 일부에 대한 더 자세한 설명은 여기에서 찾을 수 있습니다.
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…
---
### Author:  [@verilog15](https://meta.discourse.org/u/verilog15)
#### Post date: [9월 1, 2020, 2:09오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/3 "2020-09-01T14:09:45Z")
감사합니다. 메서드 목록을 확인해 보겠습니다.
스크린샷:
보시다시피, 버튼 역할을 하는 작은 원을 구석에 추가했습니다. 이 버튼은 공중에 떠야 합니다(즉, 아래로 스크롤해도 여전히 구석에 머물러 있어야 합니다). 클릭 시 실행될 로직은 제가 직접 추가해 보려 하지만, 더 명확하게 이해하기 위해 현재는 경고창이 어떻게 열리는지 알아보고 있습니다(단순 연습 목적).
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [9월 1, 2020, 7:44오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/4 "2020-09-01T19:44:59Z")
> [@verilog15](#):
>
> 보시다시피 버튼을 나타내는 작은 원 하나를 모서리에 추가했습니다. 버튼은 공중에 떠 있어야 합니다(즉, 아래로 스크롤해도
찾고 계신 것은 `position: fixed`이며, 이는 CSS 속성입니다. CSS 포지셔닝에 대해 더 자세히 알고 싶으시면 여기서 읽어보실 수 있습니다.
> **[position CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position)**
>
> The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can...
`position: fixed`는 아래로 스크롤해도 요소가 같은 위치(뷰포트 기준)에 유지되도록 합니다.
> [@verilog15](#):
>
> 클릭 시 실행될 로직은 제가 직접 추가해 보겠지만, 명확히 하기 위해 현재는 어떻게 알럿 박스가 열리는지 이해하려고 하고 있습니다.
여기서 정확히 무엇을 이루고자 하는지 잘 모르겠지만, 버튼을 클릭할 때 알럿 박스가 열리기만 하려면 이벤트 리스너가 필요합니다. 이벤트 리스너에 대해 더 자세히 알고 싶으시면 여기서 읽어보실 수 있습니다.
> **[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)**
>
> The addEventListener() method of the EventTarget interface
> sets up a function that will be called whenever the specified event is delivered to the target.
도와드릴 수 있는 구체적인 문제가 있으신가요?
---
### Author:  [@verilog15](https://meta.discourse.org/u/verilog15)
#### Post date: [9월 1, 2020, 7:57오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/5 "2020-09-01T19:57:41Z")
정보를 다시 한번 감사드립니다. 말씀하신 내용은 이미 알고 있습니다. 제 문제는 CSS 파일을 어디에 두어야 하는지 이해하지 못한다는 것입니다. Ruby 파일과 JS 파일은 있는데, CSS/Sass 파일은 어디에 두어야 하나요?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [9월 1, 2020, 8:16오후 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/6 "2020-09-01T20:16:26Z")
> [@verilog15](#):
>
> 나에게는 ruby 파일과 js 파일이 있습니다.
좋아요 👍
ruby 파일이 이미 있다고 언급하셨으니, 플러그인을 개발 중이시라고 추측해 봅니다.
질문에 대한 답변을 드리자면
> [@verilog15](#):
>
> css/sass 파일은 어디에 두어야 하나요?
다음과 같은 기존 공식 플러그인 중 몇 가지의 폴더 구조를 참고해 보시는 것을 추천합니다.
> **[GitHub - discourse/discourse-math: Official MathJax support for Discourse](https://github.com/discourse/discourse-math)**
>
> Official MathJax support for Discourse
또는 이 플러그인
> **[GitHub - discourse/discourse-assign: Plugin for assigning users to a topic](https://github.com/discourse/discourse-assign)**
>
> Plugin for assigning users to a topic
위 링크들을 살펴보면, SCSS 스타일시트는 항상
`_ROOT_/assets/stylesheets/`
폴더에 위치해 있는 것을 알 수 있습니다. 플러그인을 만드는 경우라면 SCSS 파일도 이 위치에 두어야 합니다.