# 커스텀 검색 바를 만드는 방법은?
**URL:** https://meta.discourse.org/t/how-to-make-a-custom-search-bar/167184
**Category:** Development
**Created:** [10월 14, 2020, 1:44오후 UTC](https://meta.discourse.org/t/how-to-make-a-custom-search-bar/167184 "2020-10-14T13:44:21Z")
**Posts on this page:** 11
**Page:** 1
저는 [discourse-search-banner](https://github.com/discourse/discourse-search-banner) 플러그인과 유사한 커스텀 검색 바를 만들어 보고 있습니다. 해당 플러그인은 제 테마의 외관에 간섭을 일으키기 때문에 사용하지 않으려고 합니다.
제가 원하는 `` 요소에 그 기능을 어떻게 재현할 수 있을까요?
플러그인의 소스 코드를 살펴보고 제 HTML 요소에만 사용하도록 수정해 보려 했으나 방법을 찾지 못했습니다. 조언을 주시면 감사하겠습니다!
---
이 #customization:theme-component에 대해 말씀하시는 건가요?
> [@Advanced Search Banner](https://meta.discourse.org/t/search-banner-theme-component/122939):
>
> warning This theme component is deprecated and should no longer be used. Its features are now in Discourse Core — see our documentation for details on setting up a welcome banner: → [Creating a banner to display at the top of your site](https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1)discourse2Summary Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/search-banner)hammer_and_wrenchReposito…
---
늦게 답변드려서 죄송합니다.
플러그인인지 테마 컴포넌트인지에 대해 크게 신경 쓰지 않습니다. 원하는 기능을 구현할 수만 있으면 됩니다. 기본적으로 필요한 것은 기본 검색(상단 바의 아이콘)의 동작을 제가 원하는 텍스트 입력 필드에 그대로 적용하는 것입니다.
어떻게 하면 될까요?
---
> [@pkundr](#):
>
> 제 테마의 외관을 해치기 때문이에요
많은 문제는 CSS로 해결할 수 있습니다.
CSS를 직접 검사하고 수정하는 것이 왜 불가능한가요? 그쪽이 훨씬 빠른 해결책이 될 텐데요.
최악의 경우, TC를 포크한 뒤 CSS를 수정하는 방법도 있습니다.
---
정확히 말하면 CSS 문제라기보다는, 컴포넌트가 어디에 삽입되는지와 그것이 내 HTML 구조에 어떻게 맞물리는지가 더 중요한 문제입니다. 컴포넌트가 삽입되는 위치를 수정하는 방법을 알 수만 있다면 해결책을 찾을 수 있을 것 같습니다. 어떤 방향으로 접근해 보면 좋을까요?
---
사이트에서 테마 컴포넌트가 활성화되어 있는 경우, 브라우저로 코드를 검사하여 해당 컴포넌트가 어디에 배치되어 있는지 확인하세요. 브라우저에서 위치를 조정하여 더 편한 자리를 찾은 후, 그 내용을 참고하여 TC의 포크를 업데이트/편집하면 됩니다. 이렇게 하면 정상적으로 작동할 것입니다.
---
헤더용에도 바로 사용할 수 있는 옵션이 있습니다:
> [@Pavilion Header Search Theme Component](https://meta.discourse.org/t/header-search-theme/67959?u=merefield):
>
> warning This theme component is no longer maintained. See [below](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/70) for more information Alternatives include [Advanced Header Search](https://meta.discourse.org/t/header-search/194093) and [Advanced Search Banner](https://meta.discourse.org/t/search-banner/122939) Repository: [GitHub - paviliondev/discourse-header-search-theme · GitHub](https://github.com/angusmcleod/discourse-header-search-theme)[Preview on Theme Creator](https://theme-creator.discourse.org/theme/awesomerobot/header-search) This is a re-packaging of the [Header Search Plugin](https://meta.discourse.org/t/header-search-plugin/36435) so it can be used as a theme. The functionality is the same as the plugin. See further: [https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional…](https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/15043/16)
어느 쪽도 마음에 들지 않고 CSS 수정만으로는 부족하다면, [위젯 코드를 직접 다뤄야](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347) 합니다 🙂
---