카테고리 상자를 맨 위로 이동하는 방법

새로운 Meta 디자인에서 영감을 받아, Meta Branded Theme의 하위 카테고리 박스 디스플레이와 유사한 것을 만들어 보기 위해 실험을 해 보았습니다.

결국 이렇게 되었습니다:


태그 드롭다운이 실제로는 정렬되어 있음을 확인했습니다 :sweat_smile:

이것을 어떻게 구현할 수 있을까요? CSS나 JavaScript로 가능한가요? 직접 테마 컴포넌트를 배포할 수 있으며, 이에 대해 배우고 싶습니다.

상단 내비게이션 바는 하위 카테고리가 아니라 주제(topics)에 가깝게 위치해야 하므로, 저에게는 이 변경 사항이 단순한 시각적 배치 문제가 아니라 UX와 관련된 것입니다.

이것은 아마도 CSS로 구현할 수 없는 것일 수 있지만, 처음에 이 홈페이지를 어떻게 구현했는지에 따라 완전히 달라집니다. 홈페이지를 재설계할 때 특정 컴포넌트를 사용하셨나요?

홈페이지가 아니라 카테고리 페이지입니다. 저는 아직 학습 중이라, 적절한 홈페이지를 생성하는 방법을 아직 배우지 못했습니다. 이는 제 미완성 과제 중 하나입니다 :slight_smile:

자바스크립트를 사용하면 가능할 수도 있습니다. 테마 컴포넌트를 통해 구현할 수 있는 것들이 정말 많다는 것에 놀랐고, 기술적 전문지식이 없더라도 이 부분에 대한 가능성이 있을 것 같다고 상상해 봅니다.

Meta 홈 페이지는 custom_homepage 테마 수정자 + 새로운 Blocks API로 구축되어 있으므로, 이를 재현하는 데는 이 방식이 권장됩니다.

CSS만으로 구현하려면, 부모 래퍼에 그리드나 플렉스를 적용할 수 있다면 순서를 변경할 수는 있지만, 이는 단순히 외형적인 변경일 뿐이며 아마도 난감한 상황이 될 것입니다.

다시 한번 감사드립니다! 이 문제를 다시 살펴본 결과, 새로운 홈페이지 디자인의 문제가 아니라 핵심 동작 방식의 문제인 것 같습니다. 핵심 동작 방식은 광범위하게 재고될 수 있다고 이해하고 있습니다.

하위 카테고리 박스들은 내비게이션 바 위에 있는 것이 훨씬 보기 좋습니다. 어떤 사용자들에게는 단순한 외관상의 문제일 수 있지만, 저는 하위 카테고리 박스들이 일상적인 사용자 경험(UX)에 방해가 된다고 생각합니다.

이 부분에 대해 어떻게 생각하시나요? 제 CSS 트릭으로는 해결할 수 없으며, 이 방식으로는 불가능하다는 점을 이해하고 있습니다.