# 대각선 셀
## Content
SpreadJS의 대각선 셀 타입은 셀 내부에 대각선을 삽입할 수 있도록 해주는 셀 타입입니다. 이 셀 타입은 테이블 헤더를 디자인하거나 보고서에서 데이터 영역을 구분할 때 유용하게 사용할 수 있습니다.
대각선 셀은 대각선으로 구분된 여러 개의 텍스트 항목을 표시할 수 있습니다. 셀의 값은 이러한 항목들이 어떻게 표시될지를 결정합니다. 특정 셀에 대각선 셀 타입을 설정하려면 `GC.Spread.Sheets.CellTypes.Diagonal()` 메서드를 사용하면 됩니다. Excel로 내보낼 때, 대각선 셀은 이미지로 변환됩니다.
## 대각선 셀 서식
아래 섹션에서는 대각선 셀에 필요한 다양한 설정에 대해 설명합니다.
### 분기 방향
분기 방향은 대각선이 시작되어 끝나는 방향을 정의합니다. 분기 방향이 무엇이든 간에, 항목들은 항상 **시계 방향**으로, **상단부터 하단까지** 순서로 배열됩니다. 셀 내부의 대각선을 어떤 방향으로 설정할지를 정의하려면 `DivergeDirection` 열거형의 속성을 사용합니다.
아래 표는 `["Year", "Product", "Region"]` 항목을 표시할 때, 서로 다른 분기 방향에 따라 어떻게 표시되는지를 보여줍니다.
| **분기 방향** | **샘플 이미지** |
| ----- | ------ |
| TopLeftToBottomRight |  |
| BottomLeftToTopRight |  |
### 셀 값 유형
`divergeDirection` 설정에 따라 대각선의 분기 방향이 달라집니다. 대각선에 표시되는 값은 시트에서 해당 셀의 **값(value)** 에 따라 결정됩니다. `setValue` 메서드를 사용하여 셀의 값을 설정할 수 있습니다.
| **값 유형** | **설** |
| ---- | --- |
| String | 셀 값이 문자열일 경우, 항목을 쉼표(`,`)로 구분합니다. 단, 이 경우 결과 항목에는 쉼표가 포함되지 않습니다.
**예시**:
셀 값: `"Year, Product, Region"`
결과 항목: `["Year", "Product", "Region"]`
쉼표 앞이나 뒤에 빈 문자열이 있더라도 유효한 항목으로 간주됩니다.
**예시**:
셀 값: `"Year, Product, Region,"`
결과 항목: `["Year", "Product", "Region", " "]`
 |
| Array | 입력 항목에 쉼표를 포함하고 싶을 경우, 문자열 배열을 셀 값으로 설정합니다. 배열 항목이 문자열이 아닌 경우 자동으로 문자열로 변환됩니다.
**예시**:
셀 값: `sheet.setValue(0, 0, ["Year, Month", "Product", "Region, City"])`
결과 항목: `["Year, Month", "Product", "Region, City"]`
 |
| CalcArray | 셀 값이 CalcArray인 경우, 해당 CalcArray는 단일 배열로 평탄화(flatten)되어 배열로 처리됩니다. |
| 기타 | 기타 모든 값 유형은 문자열로 변환되어 처리됩니다. |
>type=warning
> **참고**: 셀 값이 문자열일 경우, 사용자는 해당 셀을 더블 클릭하거나 API를 통해 편집 모드로 진입하여 대각선 셀을 편집할 수 있습니다. 편집 모드에서는 입력 필드 및 수식 텍스트박스에 셀의 텍스트 값이 표시되며, 쉼표로 구분된 문자열을 입력하여 값을 수정할 수 있습니다.
> 단, 셀 값이 배열일 경우 셀 내에서 직접 편집할 수 없습니다.
### 항목 표시 규칙
| **항목 수 (Item counts)** | **표시 규칙 (Display rules)** |
| ------------------ | --------------------- |
| 항목 ≤ 1 | 일반 텍스트 셀처럼 동작함 |
| 항목 = 2 | 셀을 대각선으로 나눔 |
| 항목 = 3 | 대각선 끝점을 셀 길이나 높이의 1/3 지점에 고정 |
| 항목 > 3 | 항목 수에 따라 셀을 동일한 영역으로 나눔 |
| 항목 ≥ 10 | 인덱스 10까지만 표시되며, 그 이상의 항목은 무시됨 |
### 대각선 스타일
대각선 셀 타입은 대각선을 그릴 때 기본적으로 `GC.Spread.Sheets.LineBorder('black',GC.Spread.Sheets.LineStyle.thin)` 같은 스타일을 사용합니다:
`lineBorder` 메서드를 사용하여 대각선의 외형을 변경할 수 있으며, 이 대각선의 스타일은 일반 셀 테두리의 스타일과 동일하게 동작합니다.
대각선 셀 타입에 적용할 수 있는 스타일은 다음과 같습니다:
* 배경색
* 전경색
* 글꼴
* 글꼴 스타일
* 글꼴 크기
* 글꼴 두께
### 텍스트 방향
항목 수에 따라 텍스트의 그려지는 위치와 방향이 달라질 수 있습니다. 항목이 2개 또는 3개일 경우, 첫 번째와 마지막 항목은 수평으로 표시되며, 중간 항목은 대각선을 따라 기울여 표시됩니다. 하지만 항목이 3개를 초과하면 모든 항목이 대각선을 따라 기울여 표시됩니다.
### 텍스트 줄바꿈 및 클리핑
대각선 셀(Diagonal Cell)은 너비와 높이 모두 자동 맞춤을 지원합니다. **너비 자동 맞춤**은 대각선 셀의 다양한 영역에서 모든 텍스트를 수평으로 표시할 수 있도록 조정하며, **높이 자동 맞춤**은 텍스트가 한 줄에 들어가지 않을 경우 삼각형 영역 안에서 텍스트를 줄바꿈하여 표시합니다.
수평 항목의 경우, 텍스트가 셀 영역을 초과하면 먼저 줄바꿈을 시도하고, 그 후 남는 텍스트는 잘려서표시됩니다.
기울어진 항목의 경우, 텍스트가 셀 영역을 초과하면 바로 잘려서 표시됩니다.
> **참고**: `\n` 또는 `\r\n`과 같은 하드 줄바꿈은 대각선 셀에서는 지원되지 않습니다.
### 오른쪽에서 왼쪽 레이아웃
워크시트가 오른쪽에서 왼쪽 방향으로 설정된 경우, 대각선 방향은 다음과 같이 반대로 적용됩니다:
| **분기 방향** | **왼쪽에서 오른쪽** | **오른쪽에서 왼쪽** |
| ----- | -------- | -------- |
| TopLeftToBottomRight |  |  |
| BottomLeftToTopRight |  |  |
다음 코드 샘플을 참조하여 대각선 셀 유형을 설정할 수 있습니다.
```javascript
sheet.setRowHeight(1, 150);
sheet.setRowHeight(2, 120);
sheet.setColumnWidth(1, 140);
var diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
diagonalCellType.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.topLeftToButtomRight);
var style = new GC.Spread.Sheets.Style();
style.cellType = diagonalCellType;
style.foreColor = "green";
style.backColor = "#ddebf7";
style.font = "italic normal 15px Mangal";
sheet.setStyle(1, 1, style);
sheet.setValue(1, 1, ["Year", "Month", "Product", "Region, City"]);
var dialognalCellType2 = new GC.Spread.Sheets.CellTypes.Diagonal();
dialognalCellType2.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight)
var lineStyle = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.thick);
dialognalCellType2.lineBorder(lineStyle);
var style1 = new GC.Spread.Sheets.Style();
style1.cellType = dialognalCellType2;
sheet.setStyle(2, 1, style1);
sheet.setValue(2, 1, "Bottom Left,To,Top Right");
```
## SpreadJS 디자이너 사용하기
SpreadJS 디자이너에서도 대각선 셀 유형을 설정할 수 있습니다. **홈(HOME) 탭**의 **스타일(Style1s)** 그룹에서 **셀 편집기(Cell Editors) > 셀 형식(Cell Type) > 대각선(Diagonal)** 옵션을 선택하면 됩니다.
**대각선 셀 유형(Diagonal CellType)** 대화상자의 **값(Value)** 탭을 사용하면 셀 값 유형 설정, 항목 텍스트 표시, 시작점(Diverge Direction)을 설정할 수 있습니다.
또한, **대각선 셀 유형(Diagonal CellType)** 대화상자의 **대각선 스타일(Diagonal Style)** 탭에서는 필요에 따라 대각선의 스타일을 변경할 수 있습니다.
