# 눈금선

## Content

간트 차트의 눈금선은 차트를 더 읽기 쉽게 만들어 주는 세로 및 가로선입니다. 이를 통해 간트 차트의 작업 막대와 프로젝트 테이블의 해당 작업을 쉽게 맞출 수 있습니다. 프로젝트 범위를 더 잘 반영하도록 눈금선의 모양과 간격 스타일을 변경할 수 있습니다.

## 눈금선 형식 스타일

눈금선 형식에는 두 가지 스타일이 있습니다:

* **일반 스타일(Normal style)**: 이 스타일에는 [GC.Spreadsheet.GanttSheet.GanttGridline](/spreadjs/api/v19/modules/GC.Spread.Sheets.GanttSheet#ganttgridline) 인터페이스의 `lineType` 및 `lineColor` 두 가지 속성이 있습니다.
* **간격(At Interval) 스타일**: 이 스타일은 일반 및 교차 스타일을 동시에 정의하며, **일반 스타일**의 `lineType` 및 `lineColor` 속성을 상속합니다. 또한 [GC.Spread.Sheet.GanttSheet.GanttGridlineInterval](/spreadjs/api/v19/modules/GC.Spread.Sheets.GanttSheet#ganttgridlineinterval) 인터페이스의 `interval`, `intervalLineType`, `intervalLineColor` 속성을 포함하여 간격 눈금선에 적용됩니다.

## 구성 가능한 눈금선 유형

간트 차트에는 여러 범주의 눈금선이 사용됩니다. [GC.Spread.Sheets.GanttSheet.GanttGridlines](/spreadjs/api/v19/classes/GC.Spread.Sheets.GanttSheet.GanttGridlines) 클래스의 속성을 사용하여 눈금선을 구성할 수 있습니다.

### 시간축 눈금선

이 **일반 스타일** 눈금선은 시간축 열을 구분합니다. 시간축 단계 열의 눈금선 유형과 색상을 변경하려면 `topTierColumn`, `middleTierColumn`, `bottomTierColumn`의 `lineType`과 `lineColor` 속성을 설정합니다.

> **참고**: 간트 차트 영역에서
>
> * bottomTierColumn 눈금선은 middleTierColumn 및 topTierColumn 눈금선에 의해 각각 가려집니다.
> * middleTierColumn 눈금선은 topTierColumn 눈금선에 의해 가려집니다.

아래 코드 예제는 하위 및 중간 단계 열의 눈금선을 변경하는 방법을 보여줍니다.

```javascript
// 하위 단계 열의 눈금선을 점선(dashed) 유형과 노란색으로 변경
ganttSheet.gridlines.bottomTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    lineColor: "yellow"
}
// 중간 단계 열의 눈금선을 점-점선(dash-dot) 유형과 빨간색으로 변경
ganttSheet.gridlines.middleTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "red"
}
```

위 코드의 출력 결과는 아래와 같습니다.
![gridlines_timescaleSeparator](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_timescaleSeparator.852f5a.png?width=900)

### 프로젝트 보조 눈금선

이 **일반 스타일** 눈금선은 현재 날짜 또는 시작 및 종료 날짜를 강조하여 프로젝트 범위를 명확히 보여줍니다. 프로젝트 일정 날짜의 눈금선 유형과 색상을 변경하려면 `projectStart`, `projectFinish`, `currentDate`의 `lineType`과 `lineColor` 속성을 설정합니다.

> **참고**: 간트 차트 영역에서
>
> * projectStart 눈금선은 projectFinish 및 currentDate 눈금선에 의해 각각 가려집니다.
> * projectFinish 눈금선은 currentDate 눈금선에 의해 가려집니다.
> * bottomTierColumn, middleTierColumn, topTierColumn 눈금선은 projectStart, projectFinish, currentDate 눈금선에 의해 가려집니다.

아래 코드 예제는 프로젝트 시작 및 종료 눈금선을 변경하는 방법을 보여줍니다.

```javascript
// 프로젝트 시작 눈금선을 얇은(thin) 유형과 빨간색으로 변경
ganttSheet.gridlines.projectStart = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin, 
    lineColor: "red"
};
// 프로젝트 종료 눈금선을 점선(dashed) 유형과 청록색(aqua)으로 변경
ganttSheet.gridlines.projectFinish = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed, 
    lineColor: "aqua"
};
```

위 코드의 출력 결과는 아래와 같습니다.
![gridlines_startFinishProject](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_startFinishProject.5991d1.png?width=900)

### 작업 막대 구분 눈금선

이 **간격(At Interval) 스타일** 눈금선은 작업 행을 구분합니다. 행 사이에 간격 눈금선을 추가하여 작업 행을 정렬할 수 있으며, `interval`, `intervalLineType`, `intervalLineColor` 속성을 사용해 유형과 색상을 변경할 수 있습니다.
아래 코드 예제는 간트 행의 간격 눈금선을 변경하는 방법을 보여줍니다.

```javascript
// 간트 행의 간격 눈금선을 점선(dashed) 유형과 빨간색으로 변경
ganttSheet.gridlines.ganttRows = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "blue",
    interval: 2,
    intervalLineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    intervalLineColor: "red"
}
```

위 코드의 출력 결과는 아래와 같습니다.
![gridlines_ganttrows](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_ganttrows.41c16d.png?width=900)