# 셀 색상

## Content

셀, 열, 행, 머리글, 위젯에 대해 배경색과 전경색을 설정할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/cellcolor.png)

셀, 열, 머리글 또는 행에 대해 **backColor** 또는 **foreColor** 메서드를 설정하세요. 위젯에 대해서는 [backColor](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#backColor) 메서드나 테마를 사용할 수 있습니다. 회색 영역에는 **options.grayAreaBackColor** 속성을 사용할 수 있습니다.
테마에 대한 자세한 내용은 [테마 구성](/spreadjs/docs/v18/features/styletheme/themes) 문서를 참고하시기 바랍니다. 셀 색상을 설정할 때는 스타일을 사용할 수도 있습니다. 자세한 내용은 [Styles](/spreadjs/docs/v18/features/cells/styles)문서에서 확인할 수 있습니다.
다음 코드 샘플은 셀 B2의 [foreColor](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#foreColor) 와 [backColor](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#backColor) 를 설정하는 방법을 보여줍니다.

```javascript
// 셀의 배경색과 전경색 설정
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.backColor("Blue");
cell.foreColor("Red");
cell.value("Color");
```

아래 코드 샘플과 같이 머리글의 `foreColor`와 `backColor`를 설정할 수 있습니다.

```javascript
//전체 열 헤더에 대한 배경색과 전경색 설정
var row = activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
row.backColor("Red");
row.foreColor("White");

//두번째 행 헤더에 대한 전경색 설정
activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");
```

또한 이벤트를 바인딩하여 활성 셀의 색상도 변경할 수 있습니다.

```javascript
window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var sheet = spread.getActiveSheet();
   sheet.getCell(0, 0).backColor("pink");
   sheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, infos) {
   
   // 이동 전 셀의 전경색 리셋
   infos.sheet.getCell(infos.row, infos.col).backColor(undefined);
   });
  
   sheet.bind(GC.Spread.Sheets.Events.EnterCell, function (event, infos) {
           
    // 대상 셀(현재 활성 셀)의 배경색을 설정
      infos.sheet.getCell(infos.row, infos.col).backColor("pink");
   });
}
```