# 카테고리별 히어로 배너(이미지 + 오버레이 텍스트) 재현 시 레이아웃 시프트 방지 방법
**URL:** https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460
**Category:** Support
**Tags:** category-banners
**Created:** [8월 13, 2025, 5:09오후 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460 "2025-08-13T17:09:44Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [8월 13, 2025, 5:09오후 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460/1 "2025-08-13T17:09:44Z")
안녕하세요 — 아래 스크린샷과 같은 카테고리 배너를 만들고 있습니다:
**목표**
- 목업과 동일한 레이아웃: 카테고리별 배경 이미지와 오버레이된 제목/설명을 가진 큰 배너.
- 부드러운 로딩(플리커/리사이즈 없음), 완전한 반응형 지원.
- 배경은 **각 카테고리에 고유한 이미지** (전역 CSS 스타일이 아님)여야 합니다.
**시도해 본 것**
- 이미지와 텍스트를 주입하기 위한 사용자 정의 JavaScript. 동작은 하지만, 이미지가 먼저 로드된 후 리사이즈되어 어색한 전환/레이아웃 시프트가 발생합니다.
- **Category Banner** 컴포넌트가 근접했지만, 이 정확한 레이아웃과 카테고리별 이미지 요구사항을 충족하지 못했습니다.
**요청 사항**
- Discourse에서 이를 달성하기 위한 권장 접근 방식은 무엇인가요?
- 공간을 예약하여 CLS를 방지하기 위한 예시 또는 CSS/HTML 패턴(예: 고정 종횡비 래퍼/object-fit)이 있나요?
- 카테고리별 업로드 또는 테마 설정을 사용하여 배경 이미지를 깔끔하게 설정하는 팁이 있을까요?
감사합니다!
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [8월 13, 2025, 6:30오후 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460/2 "2025-08-13T18:30:34Z")
매우 초라한 데모입니다(토픽 카드를 사용하지 않고 있습니다) 하지만 내장된 카테고리 배경 이미지만으로도 쉽게 이걸 구현할 수 있다고 생각합니다:
카테고리 설정에 카테고리 배경만 추가하면
이미지가 body 태그에 배치됩니다. 그런 다음 취향에 맞게 CSS를 조정해 보세요(제 예시는 400px입니다):
`+ 텍스트 정렬을 조금만 다듬으면, 원하는 것과 비슷한 결과를 얻을 수 있을 것 같습니다. 다만 가장 큰 단점은 정말로 전체 폭(full-width)으로 표시되므로, 화면이 넓은 경우 양쪽으로 튀어나오는 것을 볼 수 있다는 점입니다.
완벽하지는 않지만, 속도는 빠르죠 😉
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [8월 14, 2025, 12:36오전 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460/3 "2025-08-14T00:36:21Z")
> [@Steve\_John](#):
>
> - 카테고리별 업로드 또는 테마 설정을 사용하여 배경 이미지를 깔끔하게 설정하는 팁.
제가 보기에 여러분이 찾으시는 것에 가장 가까운 테마 구성 요소는 이 것입니다:
> [@Discourse 카테고리 헤더 테마 컴포넌트](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682):
>
> This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…
일부 아이디어를 얻기 위해 해당 구성 요소를 살펴볼 수 있지만, 맞춤형 구성 요소를 직접 만들어야 할 것 같습니다. 개발자를 고용하여 도움을 받고 싶으시다면 #Marketplace 채널에 게시글을 남기실 수 있습니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [8월 14, 2025, 8:26오전 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460/4 "2025-08-14T08:26:31Z")
네, 그 테마 컴포넌트가 더 나을 것 같아요. TIL(오늘 처음 알았어요)하기 전까지는 그걸 몰랐거든요.