CSS로 주제 목록에 카테고리 계층 구조를 표시하는 방법

모두 안녕하세요, 읽어주셔서 감사합니다. 포럼을 몇 시간 동안 검색해 보았고, ChatGPT와 테스트 포럼에서도 조금 시도해 봤지만, 여기에서 도움이 필요합니다.

저희 NGO에서는 부서별로 고유한 카테고리를 만들고, 각 카테고리에 3개의 하위 카테고리를 배치하도록 구조를 재편성하고 싶습니다:

대략적으로 다음과 같은 일반적인 구조입니다:

  • 상위 카테고리 = 부서 이름
  • 하위 카테고리:
    • 뉴스
    • 질문
    • 내부

뉴스를 작성하는 부서가 10개 이상 있다고 상상해 보세요. 결과 목록에서는 실제 (하위) 카테고리만 표시되므로, 누가 그 뉴스를 작성했는지 알 수 없습니다.
여기에는 'faq’라는 이름의 서로 다른 하위 카테고리에 게시물을 작성한 테스트 인스턴스의 예시가 있습니다:

서로 다른 색상의 버블이 표시되어 하위 그룹임을 알 수 있지만, 여전히 한눈에 어떤 부서의 것인지 알 수 없습니다.

결과 목록에는 다음과 같은 요소가 있습니다:

link-bottom-line

이것이 다음과 같은 형태로 보일 수 있다면 완벽할 것입니다:

ember 80 ember-view topic-category

스레드 뷰(ThreadView)에서처럼요.

또한 검색 결과에서는 필요한 대로 표시됩니다. 제가 무슨 말인지 이해하시도록 참고해 주세요:

CSS를 모르기 때문에 어떻게 해야 할지 감이 잡히지 않습니다. 무언가를 숨기는 것보다 더 복잡한 작업인 것 같습니다.

여기서 누군가가 시간을 내어 이 문제에 대해 도와주셨으면 좋겠습니다. 매우 도움이 될 것이며, 포럼 재편성을 계속 진행할 수 있을 것입니다.

질문이 있으시면 알려주세요.

정말 감사드리며, 좋은 하루 보내세요

멋지네요, 즉각적인 도움과 해결책 주셔서 정말 감사합니다 :heart: