# 사용자 지정 범위 그룹

## Content

SpreadJS는 워크시트의 외관을 향상시키고 사용자가 데이터를 효율적으로 구성하고 조작할 수 있도록 범위 그룹(range groups)의 사용자 지정을 지원합니다.
다음 이미지와 같이 범위 그룹에 대해 배경색, 테두리 색상, 개요 영역 색상, 아이콘 배경색, 숫자 및 +/-의 글꼴 색상, 숫자 및 +/-의 배경 이미지, 버튼의 테두리 색상, 선 색상, 선 굵기 및 점(dot) 색상 등을 사용자 정의할 수 있습니다:

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/custom-range-group.png)
다음 표는 사용자 지정 가능한 범위 그룹 속성과 해당 CSS 클래스, CSS 속성을 보여줍니다:

| 범위 그룹 속성 | CSS 클래스 이름 | CSS 속성 | 추가 설명 |
| -------- | ---------- | ------ | ----- |
| 개요 영역의 배경색 | `gc-group` | `background-color` |  |
| 개요 영역의 테두리 색상 | `gc-group` | `color` |  |
| 아이콘의 배경색 | `gc-group-box` | `background-color` |  |
| 숫자 및 +/-의 글꼴 색상 | `gc-group-box` | `color` |  |
| 버튼 테두리 색상 | `gc-group-box` | `border-color` | CSS의 `border-top-color`만 사용되며, 다른 테두리 색상은 무시됩니다. |
| 숫자 및 + 기호의 배경 이미지 | `gc-group-box-expand` | `background-image` | 사용자가 `background-image`를 설정하면 기본 테두리 색상 및 배경색은 투명해집니다.<br>설정하지 않으면 기본적으로 `gc-group-box`의 스타일을 사용합니다.<br>CSS에 여러 개의 `background-image`가 정의된 경우, 첫 번째 이미지만 적용됩니다. |
| 숫자 및 - 기호의 배경 이미지 | `gc-group-box-collapsed` | `background-image` | 위와 동일 |
| 선 색상 | `gc-group-line` | `border-color` | CSS의 `border-top-color`만 사용되며, 다른 테두리 색상은 무시됩니다. |
| 선 굵기 | `gc-group-line` | `border-width` | CSS의 `border-top-width`만 사용되며, 다른 테두리 두께는 무시됩니다. |
| 점(dot) 색상 | `gc-group-dot` | `color` |  |

다음 코드는 스프레드시트에서 범위 그룹의 속성을 사용자 정의하는 예시입니다:

```css
    .gc-group {
        background-color: rgb(180, 211, 230);
        color: #999999;
        border-width: 0px;
        border-style:solid;
    }
    .gc-group-box {
        background-color: #fff;
        color: rgb(8, 154, 245);
        border-color:rgb(32, 158, 241);
    }
    .gc-group-line{
        border-width:2px;
        border-style:solid;
        border-color:rgb(137, 199, 243);
    }
    .gc-group-dot{
        color:blue;
    }
```

>type=warning
> **참고:** 한 페이지 내에서 스프레드시트 요소마다 서로 다른 CSS를 다수로 사용자 지정하는 것은 불가능합니다.