# 하위 범주가 있는 상자를 목록으로 변환

**URL:** https://meta.discourse.org/t/boxes-with-subcategories-into-bulleted-list/160141
**Category:** Development
**Created:** [8월 7, 2020, 5:04오후 UTC](https://meta.discourse.org/t/boxes-with-subcategories-into-bulleted-list/160141 "2020-08-07T17:04:28Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 20, 2023, 12:48오후 UTC](https://meta.discourse.org/t/boxes-with-subcategories-into-bulleted-list/160141/2 "2023-02-20T12:48:38Z")

</div>

⚠ 편집: 2023년 11월 9일 기준: 사각형 불릿(squared bullets) 이외의 카테고리 스타일은 가까운 장래에 중단되거나 사용 불가능해질 예정입니다.

* * *

> [@MichelleBarnett](#):
>
> 하위 카테고리가 있는 박스

늦게 답글을 달지만, 늦은 것이 나을 수는 없으니… 🙂

상위 카테고리에 하위 카테고리를 쌓으려면:

```css
.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/2/b/e2b9cc947f0ba9cb400afa5a81fe914da3bef7e0.png)

불릿 목록(bulleted list)의 경우, 카테고리에 사용하는 스타일에 따라 달라집니다. “bullet” 스타일을 사용한다고 가정해 보겠습니다:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/5/c/9/5c9850fbb55053a020dcd23578167920da69cf5c.png)

다음과 같이 보입니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/7/a/c7a4c26d45fb96f47e1f81f2eb26da2f16f51418.png)

상위 카테고리에는 색상 불릿을 유지하되, 하위 카테고리에는 적용하지 않으려면:

실제 불릿 문자를 사용하는 경우:

```scss
.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        &:before {
            content: "•";
            margin-right: .25em;
            font-size: 1.5em;
            line-height: 0;
        }
        .badge-category-bg {
            display: none;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/a/e/eae5cb178edc903e40bc9d684bb98a48b338cf5a.png)

더 간단하게, 현재 Discourse 카테고리 불릿의 모양을 변경하는 경우:

```css
.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .badge-category-bg {
            border-radius: 50%;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/8/0/b80d0c75b08c928f71eacf60b11d0edab6b82918.png)

---

_[View the full topic](https://meta.discourse.org/t/boxes-with-subcategories-into-bulleted-list/160141)._