# 셀 꾸미기
## Content
SpreadJS에서는 `decoration` 객체를 사용하여 셀 또는 셀 범위에 꾸미기를 적용할 수 있습니다. 데코레이션 객체에는 모서리 폴드나 아이콘과 같은 설정을 포함할 수 있습니다.
## **모서리 폴드 설정**
SpreadJS는 셀의 모서리에 모서리 폴드 스타일을 설정하는 기능을 제공합니다. 모서리 폴드 기능은 셀 상태를 강조할 때 유용하며, 예를 들어 셀이 유효하지 않음을 나타내고자 할 때 사용할 수 있습니다.
**[IDecoration](https://developer.mescius.com/spreadjs/api/interfaces/GC.Spread.Sheets.IDecoration)** 인터페이스는 **cornerFold** 옵션을 제공하며, 이를 통해 접힘의 크기(size), 위치(position), 색상(color)을 설정할 수 있습니다. 이 옵션은 **[ICornerFold](https://developer.mescius.com/spreadjs/api/interfaces/GC.Spread.Sheets.ICornerFold)** 인터페이스에서 상속되며, 해당 인터페이스는 `size`, `position`, `color` 등의 매개변수를 제공합니다.
아래 스냅샷은 셀 B6과 B8에 `왼쪽 상단` 위치의 주황색 corner fold 스타일이 적용된 모습을 보여줍니다.
cornerFold 옵션의 기본값은 다음과 같습니다:
| 크기 | 위치 | 색상 |
| --- | --- | --- |
| 6 | GC.Spread.Sheets.CornerPosition.leftTop | #FF3D00 |
다음 코드 구현은 **ICornerFold** 인터페이스와 **setStyle**메서드를 사용하여 corner fold 스타일을 설정하는 방법을 보여줍니다.
```JavaScript
var style = new GC.Spread.Sheets.Style();
style.decoration = {
cornerFold: {
size: 10,
position: GC.Spread.Sheets.CornerPosition.leftTop,
color: "orange"
}
}
sheet.setStyle(5, 1, style);
```
## **아이콘 설정**
SpreadJS는 **GC.Spread.Sheets.Style** 클래스의 `icons` 속성을 사용하여 셀 안 또는 셀 바깥에 아이콘을 삽입할 수 있는 아이콘 데코레이션 기능을 지원합니다.
텍스트나 값을 포함한 셀 타입에는 아이콘을 적용할 수 있지만, 체크박스나 콤보박스 같은 셀 타입에는 `icons` 속성이 지원되지 않습니다.
SpreadJS는 `src`, `width`, `height`, `position` 등 다양한 아이콘 데코레이션 옵션을 제공합니다.
아이콘의 위치를 지정하려면 다음과 같은 `IconPosition` 열거형 값을 사용할 수 있습니다:
| **이름** | **설명** |
| --- | --- |
| `left` | 셀 내부 왼쪽에 표시 |
| `right` | 셀 내부 오른쪽에 표시 |
| `leftOfText` | 텍스트 왼쪽에 표시
※ 텍스트가 없으면 아이콘이 숨겨짐 |
| `rightOfText` | 텍스트 오른쪽에 표시
※ 텍스트가 없으면 아이콘이 숨겨짐 |
| `outsideLeft` | 셀 외부 왼쪽에 표시
※ 셀이 숨겨지면 아이콘도 숨겨짐 |
| `outsideRight` | 셀 외부 오른쪽에 표시
※ 셀이 숨겨지면 아이콘도 숨겨짐 |
다음 코드 샘플은 셀에 아이콘을 스타일링하는 방법을 보여줍니다:
```javascript
//셀 왼쪽
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left
}
]
};
setIcon(1, 1, style);
```
>type=warning
> **참고:**
>
> * `leftOfText` 및 `rightOfText` 위치 값은 텍스트 셀에만 적용됩니다.
> * 현재 보기 영역을 벗어난 아이콘은 인접 열에만 영향을 줍니다.
> * 데코레이션이 여러 개의 아이콘을 지원하는 경우, 아이콘은 위치 설정과 관계없이 나란히 표시됩니다.
> * 셀 정렬 설정은 아이콘의 수직 정렬에 영향을 줍니다.
> * 스타일 데코레이션 아이콘이 있는 셀은 텍스트 오버플로우가 불가능합니다.
### 디자이너 사용
SpreadJS 디자이너를 사용하여 셀에 아이콘을 추가하려면 다음 단계를 따르세요:
1. 셀 선택합니다.
2. 셀을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 **셀 서식...(Format Cells...)** 옵션을 선택합니다.
스프레드시트에서 **셀 서식(Format Cells)** 대화 상자가 열립니다.
**꾸미기(Decoration)** 탭으로 이동하여 속성을 설정합니다.
### 아이콘 옵션 추가/업데이트
1. **추가(Add)** 버튼을 클릭하여 새 아이콘 옵션을 추가하거나, `src`, `position`, `width`, `height` 값을 선택하여 아이콘을 업데이트합니다.
2. **아이콘 선택(Select Icon)** 옵션을 클릭하여 아이콘의 위치를 탐색합니다.
3. **위치(Position)** 콤보박스(선택 사항)를 사용하여 위치를 지정할 수 있습니다.
4. **너비(Width)** 및 **높이(Height)** 스핀 버튼을 사용하여 아이콘의 너비와 높이를 조절할 수 있습니다.
### 아이콘 옵션 삭제
1. 삭제할 옵션을 선택합니다.
2. **삭제(Delete)** 버튼을 클릭하여 선택한 옵션을 제거합니다.