# 테두리, 대각선, 눈금선

## Content

SpreadJS는 셀, 열 또는 행 주위에 테두리를 설정하는 기능을 지원합니다. 위젯은 기본적으로 눈금선(gridline)을 표시하며, 셀, 열 또는 행 주위의 테두리 색상이나 선 스타일을 설정할 수 있습니다. 눈금선의 색상과 표시 여부도 지정할 수 있으며, 셀 또는 셀 범위에 대각선도 설정할 수 있습니다.

### 테두리 색상 설정

SpreadJS는 셀의 각 면에 대해 테두리 색상을 설정하여 테두리를 사용자 정의할 수 있도록 지원합니다.
[setBorder](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#setBorder) 메서드를 사용하여 테두리를 설정할 수 있습니다. 또한 [borderBottom](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#borderBottom), [borderTop](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#borderTop), [borderRight](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#borderRight), [borderLeft](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#borderLeft) 메서드를 사용하여 셀 테두리를 설정할 수도 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/cborder.png)

아래 코드 샘플은 셀의 테두리 색상을 설정하는 방법을 보여줍니다.

```javascript
activeSheet.getRange(2, 2, 2, 2, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#8A2BE2", GC.Spread.Sheets.LineStyle.medium), {all:true});
activeSheet.getRange(-1,5, -1, 1).borderTop(new GC.Spread.Sheets.LineBorder("#F0FFFF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderLeft(new GC.Spread.Sheets.LineBorder("#F5F5DC",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderRight(new GC.Spread.Sheets.LineBorder("#FF02FF", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(-1, 5, -1, 1).borderBottom(new GC.Spread.Sheets.LineBorder("#FFE4C4",GC.Spread.Sheets.LineStyle.thin));
activeSheet.getRange(5, -1, 1, -1).borderTop(new GC.Spread.Sheets.LineBorder("#A52A2A",GC.Spread.Sheets.LineStyle.mediumDashed));
activeSheet.getRange(5, -1, 1, -1).borderLeft(new GC.Spread.Sheets.LineBorder("#FF02FF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(5, -1, 1, -1).borderRight(new GC.Spread.Sheets.LineBorder("#5F9EA0", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(5, -1, 1, -1).borderBottom(new GC.Spread.Sheets.LineBorder("#6495ED",GC.Spread.Sheets.LineStyle.dotted));
```

### **테두리 선 스타일 설정**

SpreadJS의 대각선 테두리 기능은 모든 유형의 선 스타일을 지원합니다. 지원되는 선 스타일은 다음과 같습니다:

* `dashDot`
* `dashDotDot`
* `dashed`
* `dotted`
* `double`
* `empty`
* `hair`
* `medium`
* `mediumDashDot`
* `mediumDashDotDot`
* `mediumDashed`
* `SlantedDashDot`
* `thick`
* `thin`

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/diagonal_all.d80e4b.png)

아래 이미지는 각 셀의 면마다 서로 다른 선 스타일과 색상이 설정된 예를 보여줍니다.
![codecellbord.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/codecellbord.240a8b.png)

```javascript
window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
  
   // Set border lines to cell(1,1).
   var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
   cell.borderLeft(new GC.Spread.Sheets.LineBorder("Red", GC.Spread.Sheets.LineStyle.thick));
   cell.borderTop(new GC.Spread.Sheets.LineBorder("Blue", GC.Spread.Sheets.LineStyle.double));
   cell.borderRight(new GC.Spread.Sheets.LineBorder
   ("Green", GC.Spread.Sheets.LineStyle.dashDot));
   cell.borderBottom(new GC.Spread.Sheets.LineBorder
   ("Yellow", GC.Spread.Sheets.LineStyle.mediumDashed));
}
```

> 위에 언급된 선 스타일 외에도, 대각선 테두리는 JSON 직렬화/역직렬화, Excel I/O, PDF 내보내기(인쇄용)를 지원합니다.

### **셀에 대각선 설정하기**

복잡한 데이터 헤더를 구성할 때, 셀에 대각선 테두리를 설정하여 시각적으로 구분할 수 있습니다.
셀 또는 셀 범위에 대각선을 설정하려면 [diagonalUp](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#diagonalUp) 메서드와 [diagonalDown](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#diagonalDown) 메서드를 사용할 수 있습니다.

* [diagonalUp](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#diagonalUp) 메서드는 셀의 오른쪽 위에서 왼쪽 아래 방향으로 선을 나타냅니다. (아래 그림의 노란 선 참조)
* [diagonalDown](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#diagonalDown) 메서드는 셀의 왼쪽 위에서 오른쪽 아래 방향으로 선을 나타냅니다. (아래 그림의 녹색 선 참조)

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/digonal_basic.png)

다음 코드 샘플은 셀에 대각선을 설정하는 방법을 보여줍니다.

```javascript
var sheet = spread.getActiveSheet();
var cell = sheet.getCell(1, 1);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.thick));
cell = sheet.getCell(1, 3);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("green" ,GC.Spread.Sheets.LineStyle.double));
cell.diagonalUp(new GC.Spread.Sheets.LineBorder("yellow",GC.Spread.Sheets.LineStyle.double));
```

### 눈금선 옵션 설정

SpreadJS는 **options.gridline** 속성을 통해 눈금선의 색상을 설정하고, 위젯에서 수평 또는 수직 눈금선을 표시할지를 지정할 수 있습니다. 기본적으로 시트는 수직 및 수평 눈금선을 모두 표시하며, 기본 눈금선 색상은 #d0d7e5입니다.
다음 코드 샘플은 눈금선의 표시 여부와 색상을 설정하는 방법을 보여줍니다.

```javascript
worksheet.options.gridline = {color:"#FF2235", showVerticalGridline: true, showHorizontalGridline: false};
```