# 셀 스타일 변경

## Content

리포트를 생성할 때, 리포트의 UI를 향상시키기 위해 일부 셀에 배경색이나 테두리를 설정하는 것이 중요합니다. 리포트 시트에서는 셀의 스타일이 해당 템플릿 셀의 스타일과 일치합니다. 강조해야 하는 콘텐츠에 대해 템플릿 시트에서 셀 스타일을 설정할 수 있으며, 확장된 셀이든 확장되지 않은 셀이든 설정이 가능합니다.

>type=warning
> **참고:**
>
> * 템플릿 시트에서 **확장되지 않은 셀**에 스타일을 설정하면, 리포트 시트의 `DataEntryPreview` 렌더 모드에서는 스타일이 적용된 영역의 범위는 변경되지 않지만, 스타일이 표시되는 위치는 오프셋됩니다.
> * 템플릿 시트에서 **확장된 셀**에 스타일을 설정하면, 리포트 시트의 `DataEntryPreview` 렌더 모드에서는 스타일이 적용되는 영역의 범위가 변경되며, 스타일이 표시되는 위치도 오프셋됩니다.

다음 코드 샘플은 서로 다른 셀 스타일을 설정하는 방법을 보여줍니다:

```auto
// 헤더 스타일
const headerStyle = new GC.Spread.Sheets.Style();
headerStyle.backColor = '#bfdbd8';
headerStyle.foreColor = '#424242';
headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.vAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.font = '12px Maine';

// Column 1 스타일
const style1 = new GC.Spread.Sheets.Style();
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.backColor = "lightgrey";

// Column 2 스타일
const style2 = new GC.Spread.Sheets.Style();
style2.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style2.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style2.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.font = '12px Maine';
style2.backColor = '#edebeb';

// Column 3 스타일
const style3 = new GC.Spread.Sheets.Style();
style3.backColor = 'whitesmoke';
style3.borderLeft = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderRight = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);

// 스타일 설정
templateSheet.getRange('A1:C1').setStyle(headerStyle);

// 템플릿 시트에서 설정한 스타일은 현재 셀의 확장과 함께 적용됨
templateSheet.getRange('A2').setStyle(style1);
templateSheet.getRange('B2').setStyle(style2);
templateSheet.getRange('C2').setStyle(style3);
```

위 코드의 출력은 아래와 같습니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.1ff43f.png?width=668)