# 아이콘 집합 규칙

## Content

아이콘 집합 규칙은 값에 따라 아이콘을 표시합니다. 셀에 아이콘만 표시할지, 아이콘과 데이터를 함께 표시할지 지정할 수 있습니다. 아래 이미지는 아이콘과 값을 함께 보여주는 예시입니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/iconset.png)
[iconSetType](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule#iconSetType) 메서드와 [IconSetType](/spreadjs/api/enums/GC.Spread.Sheets.ConditionalFormatting.IconSetType) 열거형을 사용하여 다양한 종류의 아이콘 집합을 지정할 수 있습니다. [reverseIconOrder](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule#reverseIconOrder) 메서드를 사용하여 아이콘 순서를 반대로 지정할 수 있으며, [showIconOnly](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule#showIconOnly) 메서드를 사용하면 아이콘만 표시할지 또는 아이콘과 데이터를 함께 표시할지 선택할 수 있습니다.
또한, [IconSetRule](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule) 클래스의 [icons](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule#icons) 메서드를 사용하여 아이콘 집합 규칙에 사용자 지정 아이콘을 설정할 수 있습니다. `icons` 메서드는 [IconCriterion](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconCriterion) 클래스의 각 아이콘 기준에 대해 커스텀 아이콘을 설정할 수 있도록 하며, `IIconInfo` 객체로 구성된 배열 형태로 아이콘 정보를 제공합니다.
여러 개의 커스텀 아이콘을 한 번에 설정하려면, `IIconInfo` 객체 배열을 `icons` 메서드에 전달하면 됩니다. 특정 아이콘 기준에 어떤 아이콘을 사용할지 결정하려면 아이콘 정보 항목을 수정하면 됩니다.
다음 코드 샘플은 아이콘 집합 규칙을 생성하는 예시입니다.

```javascript
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);
var iconSetRule = new GC.Spread.Sheets.ConditionalFormatting.IconSetRule();
iconSetRule.ranges([new GC.Spread.Sheets.Range(0,0,4,1)]);
iconSetRule.iconSetType(GC.Spread.Sheets.ConditionalFormatting.IconSetType.FourTrafficLights);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 1);
iconCriteria[1] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 10);
iconCriteria[2] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
activeSheet.conditionalFormats.addRule(iconSetRule);
```

다음 코드 샘플은 아이콘 집합 규칙을 사용할 때 사용자 지정 아이콘을 설정하는 방법을 보여줍니다.

```javascript
var sheet = spread.getActiveSheet();
sheet.setValue(0,0,1,3);
sheet.setValue(1,0,15,3);
sheet.setValue(2,0,25,3);
sheet.setValue(3,0,-1,3);
 
var iconSetRule = new GC.Spread.Sheets.ConditionalFormatting.IconSetRule();
iconSetRule.ranges([new GC.Spread.Sheets.Range(0,0,4,1)]);
iconSetRule.iconSetType(GC.Spread.Sheets.ConditionalFormatting.IconSetType.fourTrafficLights);

var icons = iconSetRule.icons();
icons[0] = {iconSetType: GC.Spread.Sheets.ConditionalFormatting.IconSetType.fiveArrowsColored, iconIndex: 1};
icons[1] = {iconSetType: GC.Spread.Sheets.ConditionalFormatting.IconSetType.fiveArrowsColored, iconIndex: 2};
icons[2] = {iconSetType: GC.Spread.Sheets.ConditionalFormatting.IconSetType.noIcons, iconIndex: 0};
sheet.conditionalFormats.addRule(iconSetRule);
```

>type=warning
> **참고**: 아이콘 기준(Icon Criterion)에 사용자 지정 아이콘을 설정할 때는 [IconSetType](/spreadjs/api/enums/GC.Spread.Sheets.ConditionalFormatting.IconSetType) 이 열거형 범위 내에서 선택되었는지 반드시 확인해야 합니다. 또한 선택한 `IconSetType`에 대해 유효한 `iconIndex`를 설정해야 합니다.
> 예를 들어: `IconSetType`으로 `threeTrafficLights`를 선택했다면, 해당 집합에는 세 개의 아이콘만 존재하므로 `iconIndex`는 0\~2 범위 내여야 합니다.
> `IconSetType`이나 `iconIndex`가 범위를 벗어나는 경우, 시트는 사용자가 설정한 아이콘 기준에 대해 아이콘을 렌더링하지 않으며, 셀에는 아이콘 자리에 빈 공간만 표시됩니다.