답변 감사합니다!
참고: 숨겨진 기능을 호출하여 중첩 카테고리를 하나 더 추가할 수 있도록 했습니다. 총 3개(기존 2개 대비).
문제를 더 잘 설명할 수 있는 예시를 하나 들겠습니다.
예를 들어, 메인 페이지:
테스트 (카테고리)
- 테스트 - 하위 1 (부모 테스트 카테고리의 하위 카테고리)
이 시나리오에서,
.category .subcategories {
display: none;
}
은 정상적으로 작동합니다.
화면에서 보시는 것처럼 중첩된 ‘테스트 - 하위 1’ 카테고리는 표시되지 않습니다.
그런데 또 다른 중첩 하위 카테고리를 추가하면 어떻게 될까요?
‘테스트 - 하위 2’ 카테고리를 추가하되, '테스트 - 하위 1’을 부모로 설정한 경우:
위 이미지에서 보시는 것처럼, CSS 코드에 따라 '테스트 - 하위 2’는 숨겨지지만, '테스트 - 하위 1’은 더 이상 숨겨지지 않습니다.
문제는 이제 두 가지입니다.
첫째, '테스트 - 하위 1’의 제목을 숨기려면 클래스를 display: none으로 설정해야 하지만, 이렇게 하면 메인 페이지의 모든 상위 카테고리도 함께 숨겨집니다.
둘째, ‘테스트 - 하위 1’ 중첩 카테고리만 따로 분리하여 숨길 수 있다 해도, 그것이 차지하는 공간은 여전히 남아 있어 문제가 됩니다. 메인 페이지에 중첩 하위 카테고리가 각각 두 개인 카테고리를 약 20개 더 추가해야 하기 때문입니다.
이상적으로는 최종 사용자가 ‘테스트’ 카테고리를 클릭하면 다른 중첩 카테고리에 접근할 수 있도록 하는 것입니다. 이는 ‘이 카테고리의 주제 위에 하위 카테고리 목록 표시’ 기능을 사용하고, 하위 카테고리 목록 스타일을 예를 들어 상자(Boxes) 등으로 설정하면 쉽게 구현할 수 있습니다.
만약 나중에 ‘테스트’ 카테고리 뒤에 다른 메인 페이지 카테고리를 배치하고 싶다면, 빈 줄(줄바꿈) 20행 등이 남아 있는 것은 원하지 않습니다.
어떤 생각이 드시나요?