# 카테고리 전용 보기, 2열로 재구성
**URL:** https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625
**Category:** UX
**Created:** [2월 14, 2020, 4:58오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625 "2020-02-14T16:58:55Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2월 14, 2020, 4:58오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/1 "2020-02-14T16:58:55Z")
[How to style the `/categories` page?](https://meta.discourse.org/t/how-to-style-the-categories-page/49030/3) 토론을 이어갑니다:
이전 토론과 관련된 질문이 있습니다.
아래와 같은 효과를 달성하는 것이 얼마나 간단한 작업인지 궁금합니다:
제가 만든 가장 가까운 결과는 다음과 같습니다:
테이블을 감싸는 DIV에 `column-count: 2`를 적용하고 테이블 요소에 `display: block`을 적용했습니다.
하지만 헤더를 전체 줄에 걸쳐 확장하도록 강제하는 방법을 모르겠습니다 😅
수정.
기능적으로 볼 때, 이 헤더 행을 중복하거나, 'Categories’만 남기거나, 아니면 아예 모두 숨겨야 할 것 같습니다…
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2월 14, 2020, 5:14오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/2 "2020-02-14T17:14:54Z")
`tbody`에 `display: block`과 `column-count: 2`를 적용하면 더 쉬울 것 같아요. 그러면 `thead`는 여전히 전체 너비를 차지하게 됩니다.
하지만 그 시점에는 "Category"를 제외한 나머지는 숨기는 것이 좋겠죠.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 14, 2020, 5:16오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/3 "2020-02-14T17:16:03Z")
flexbox를 활용한 대안:
```css
.category-list tbody {
display: flex;
flex-wrap: wrap;
}
.category-list tbody tr {
width: 50%;
display: flex;
}
.category-list tbody .category {
flex: 1;
}
```
아직 몇 가지 세부 조정이 필요합니다.
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2월 14, 2020, 5:18오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/4 "2020-02-14T17:18:26Z")
> [@Canapin](#):
>
> flexbox를 활용한 대안:
그 와중에 가로 정렬이 유지되는 것이 좋겠다는 걸 잊고 있었습니다.
정말 훌륭합니다 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 14, 2020, 11:19오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/5 "2020-02-14T23:19:21Z")
이 CSS를 사용하면 카테고리 목록이 다음과 같이 표시되지 않습니다:
```plaintext
1 - 4
2 - 5
3 - 6
```
대신 다음과 같이 표시됩니다:
```plaintext
1 - 2
3 - 4
5 - 6
```
또한 작은 화면에서 스타일을 변경하기 위해 미디어 쿼리를 추가해야 합니다.
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2월 18, 2020, 9:18오전 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/6 "2020-02-18T09:18:14Z")
두 가지 옵션을 조금씩 테스트해 봤는데, 카테고리 테이블을 순차적으로 나열하는 것보다 절반으로 나누는 방식이 우리의 목적에 더 적합해 보입니다.
다만, 어디서 분리할지를 제어하는 것이 까다롭습니다.
브라우저에서는 다음과 같이 구현할 수 있었습니다:
하지만 이는 왼쪽에 있는 카테고리를 div에 인위적으로 배치했을 때만 가능했습니다(너무 일찍 분리되는 것을 방지하기 위한 조치로, 그렇지 않으면 Measure 루트 카테고리가 오른쪽 열로 이동합니다):
특정 카테고리 ID가 포함된 행을 DIV에 '패킹’하는 방법이 있을까요? 테마 API를 통해 가능한지 궁금합니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 18, 2020, 10:23오전 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/7 "2020-02-18T10:23:39Z")
요청하신 내용은 까다로울 수 있으며 일부 JS 마법이 필요할 수도 있습니다.
CSS column 속성을 사용하면, flexbox와 달리(고정 높이를 설정하지 않는 한) 카테고리들이 수평으로 정렬되지 않을 것이라고 확신합니다. 그렇게 하면 모양이 매우 안 좋습니다.
원하시는 것을 구현했지만, 약간 해킹적인 방식입니다:
저는 제 [이전 CSS](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/3?u=canapin)를 사용했고, 빈 ``을 추가했으며(이것은 JS 한 줄로 할 수 있다고 생각합니다) `order` 속성을 설정하여 div의 순서를 변경했습니다. 후자는 각 `data-category-id` HTML 값을 대상으로 하여 CSS만으로 가능합니다. 결과는 다음과 같습니다:
빈 `
`의 모습입니다:
카테고리를 추가하거나 제거할 때마다 CSS와/또는 JS를 변경해야 할 가능성이 높다는 점을 유의하세요.
수정: 추가적인 빈 요소가 하나나 두 개만 필요하시다면, `
`을 추가하기 위해 JS를 사용할 필요가 없습니다. 다음과 같이 `:after`와/또는 `:before`를 사용할 수도 있습니다:
```css
.category-list tbody:after {
width: 1px;
content: "";
}
```
이는 동일하게 작동하는 1px 크기의 빈 요소를 추가합니다.
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2월 18, 2020, 12:38오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/8 "2020-02-18T12:38:54Z")
감사합니다, 꽤 잘 해결되었습니다 🙂 카테고리를 직접 세세하게 관리하는 건 괜찮으니 문제없습니다.
최종 결과는 저희 포럼에서 확인하실 수 있습니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 18, 2020, 1:27오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/9 "2020-02-18T13:27:45Z")
포럼 URL을 공유해 주시겠어요?
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2월 18, 2020, 1:29오후 UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/10 "2020-02-18T13:29:52Z")
> [@Canapin](#):
>
> 포럼 URL
네, 제 프로필에 이미 있고 직접 광고하고 싶지 않았거든요 😃
> **[UiPath Community Forum](https://forum.uipath.com/)**
>
> Find the solution, ask questions, help others and stay up to date about our products and community initiatives.