사이트를 처음 설정하는 중인데, 상단 헤더 섹션에 이미지를 추가하려고 합니다.
'Settings > Branding’의 설명에는 다음과 같이 적혀 있습니다.
높이가 120이고 종횡비가 3:1보다 큰 넓은 직사각형 이미지를 사용하세요
그래서 120px x 2000px 크기의 png 이미지를 사용했는데, 왼쪽에 정렬되어 헤더 영역을 완전히 채울 것으로 예상했지만 그렇지 않습니다!! 제가 무엇을 잘못한 걸까요?
스크린샷을 보면 이미지가 왼쪽에 올바르게 설정된 것으로 보입니다. Discourse 헤더는 폭이 제한된 wrap div 안에 표시됩니다. 이것이 로고가 화면의 가장 왼쪽까지 닿지 않는 이유입니다.
설치 지침에서는 높이가 120px인 이미지를 업로드하도록 안내하지만, 해당 이미지가 Discourse에서 표시될 때 높이는 약 31px로 줄어듭니다. 이는 업로드한 이미지의 폭이 사이트에 표시될 때 4로 나뉘어 적용된다는 것을 의미합니다. 스크린샷의 로고는 약 660px로 보이며, 제 생각에는 올바르게 표시되고 있는 것으로 보입니다.
더 폭이 좁은 로고가 있다면, 그것을 시도해 보고 어떻게 보이는지 확인해 보시는 것이 좋을 수 있습니다.
시몬, 감사합니다. 로고가 헤더를 완전히 채우도록 하고 싶은데, 가능한가요?
이미지 너비를 줄여도 높이가 여전히 31px로 제한되어서 보기 좋지 않습니다.
이론적으로 헤더의 대부분을 채우는 것은 가능하지만, 올바르게 설정하려면 시행착오가 필요할 수 있습니다. 이를 위해 사이트의 CSS를 조정해야 할 수도 있습니다. 관심 있으시다면 디스코urse 테마 사용 입문가 가이드와 디스코urse 테마 개발자 가이드를 참고해 보세요.
logo 설정에 대한 우리의 설명을 살펴보면, 최적의 종횡비를 제공해야 한다고 생각합니다. 스크린샷에 있는 로고는 종횡비가 3:1보다 크지만, 제 생각에는 로고가 너무 넓어 보입니다. 디스코urse 메타 포럼에서 사용되는 로고를 보면 약 150 x 40px로 표시되는 것을 알 수 있습니다. 저에게 이상적인 종횡비는 4:1보다 약간 작은 것 같습니다.
원하는 효과를 얻으려면 CSS를 사용하는 것이 좋습니다.
예:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
제가 원하는 목적을 이해하지 못하신 것 같습니다. 효과가 아니라, 현재 높이가 31px으로 제한되어 있는 헤더 박스에 이미지를 채우는 것이 핵심입니다.
여기에 이미지를 링크해 주시겠어요?
문제를 이해했습니다. 다만, 원하는 것을 이미지로 구현하기가 어렵다면, 그라데이션 없이 로고를 업로드한 뒤 CSS로 그라데이션을 추가하는 것은 어떨까요? 저에게는 더 쉽고 직관적인 방법처럼 보입니다. 
하지만 최종 이미지는 CSS로는 구현할 수 없을 수도 있겠네요?
네, 맞습니다.
제가 방금 이 포럼을 발견했는데, 제가 원하는 것을 구현하는 것 같습니다.
더 찾아보니 그들이 사용한 CSS를 찾았지만, 저는 이곳에 처음 오고 아직 이런 변경 사항을 위해 CSS를 추가하는 방법을 파악하는 중입니다.
네, 그것이 앞으로 나아갈 방향인 것 같습니다 
이제 그 CSS를 어떻게 추가해야 하는지 이해해야 합니다.
‘Shades of blue’ 테마를 사용 중입니다.
Discourse 가이드를 차근차근 살펴보고 있지만, 더 읽어야 할 것 같습니다.
감사합니다. 위 튜토리얼을 따라 해보았고, 거의 다 해냈습니다!
Discourse가 어떻게 작동하는지 조금 더 이해할 수 있게 도와주셔서 감사합니다.
오늘 밤 시간을 내어 조금 더 공부해 보겠습니다.
다시 한번 도움 주셔서 감사합니다.
reference to the talksurf header에 대한 참고 사항;
배경 이미지가 어디에서 유래하는지는 알 수 있지만, 배경 이미지 위에 떠 있는 왼쪽의 ‘talksurf’ 이미지는 어디서 오는지 알 수 없습니다.
설정 > 브랜딩 > 로고에서 ‘talksurf’를 이미지로 추가하면, Discourse가 원래 높이 120px를 31px로 축소하기 때문에 이미지가 훨씬 작아집니다. Talksurf는 31px보다 훨씬 높습니다.
Talksurf 로고는 관리자 브랜드 섹션에 업로드된 일반 로고입니다.
저는 완전히 동일한 로고를 업로드했는데, 커스터마이징 없이 40px 높이의 로고가 적용되었습니다:
따라서 해당 포럼에서 로고가 31px로 표시되는 이유를 이해할 수 없습니다. HTML과 CSS를 확인해볼 수 있도록 링크를 공유해 주시겠어요?
또한, 헤더가 어떻게 커스터마이징되었는지 확인하는 방법은 다음과 같습니다:
- https://forum.talksurf.com/를 엽니다.
- 브라우저(예: Chrome)에서 F12 키를 눌러 개발자 도구를 표시합니다.
- 선택 화살표를 클릭합니다:
- 헤더를 클릭합니다:
- 개발자 도구 오른쪽의 CSS를 확인합니다:
가장 첫 번째 규칙들은 기본 규칙이 아니라 커스텀 규칙입니다. 이를 명확하게 구분하는 쉬운 방법은 없으며, 셀렉터, SCSS 파일 이름 등을 살펴보는 등 경험적으로 파악하게 됩니다…
도와주셔서 감사합니다. URL은 https://yas-cfr.discourse.group/ 입니다. 보시다시피, 같은 로고를 사용해도 높이가 35px로 나와서 yours(40px)와 다릅니다.
talksurf 이미지의 크기는 322 x 63px입니다.
