# 테이블 테마

## Content

간트 시트는 시트의 기본 모양을 제어하기 위해 [GC.Spread.Sheets.Tables.TableTheme](/spreadjs/api/v19/classes/GC.Spread.Sheets.Tables.TableTheme)를 적용할 수 있습니다.`applyTableTheme`를 사용하여 테마를 적용하면 간트 시트는 테마 스타일을 가져와 여러 UI 영역에 분산 적용합니다.

>type=note
> 테마 스타일은 기본 스타일(base style)로 동작합니다. 작업 막대 스타일 규칙 또는 비작업 시간 설정과 같은 명시적인 간트 시트 설정은 적용된 테마보다 우선 적용됩니다.

![theme-20260323.7deb5f.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/theme-20260323.7deb5f-20260528.2695ae.gif?width=600)

## 테마 적용 범위

간트 시트는 다음 세 가지 시각적 영역으로 구성됩니다.

* 테이블 영역(작업 목록)
* 타임스케일(타임라인 헤더)
* 간트 차트 영역(타임라인 본문 및 작업 표시줄)

각 영역은 `TableTheme`의 서로 다른 스타일 집합을 사용합니다.
![image-20260417.23d10a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260417.23d10a-20260528.84b69e.png?width=600)
다음 섹션에서는 각 영역이 테마를 적용하는 방식을 설명합니다.

## 테이블 영역

테이블 영역은 `TableTheme` 스타일 전체를 사용합니다.다음 스타일이 적용됩니다.

* `wholeTableStyle`
* `headerRowStyle`
* `firstRowStripStyle`
* `secondRowStripStyle`
* 테두리
* 글꼴 및 텍스트 색
* 줄무늬 행 스타일

테마에 정의된 줄무늬 행 스타일은 간트 시트에서 지원됩니다.

### 작업 계층 구조 렌더링

테마의 글꼴 설정은 기본 제공 계층 구조 규칙과 결합되어 작업 유형을 시각적으로 구분합니다.

| 작업 유형 | 글꼴 굵기 | 글꼴 크기 |
| ----- | ----- | ----- |
| 프로젝트 요약 | 굵게 | 12pt |
| 요약 작업 | 굵게 | 11pt |
| 일반 작업 | 보통 | 11pt |

테마는 다음을 제공합니다.

* 글꼴 패밀리
* 기본 글꼴 색

간트 시트는 계층 구조를 강조하기 위해 미리 정의된 크기 및 굵기 조정을 적용합니다.이를 통해 다음을 보장합니다.

* 프로젝트 요약 작업이 가장 두드러지게 표시됨
* 요약 작업이 시각적으로 구분됨
* 일반 작업은 중립적으로 유지됨

## 타임스케일

타임스케일은 타임라인의 헤더 영역입니다.시각적 스타일은 테이블 영역의 열 머리글과 일치합니다.
![timescale-20260417.242701.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/timescale-20260417.242701-20260528.e549a1.png?width=600)
타임스케일은 테마의 헤더 관련 스타일을 사용합니다.

* 배경색
* 헤더 텍스트 글꼴
* 헤더 텍스트 색
* 가로 눈금선 색
* 세로 눈금선 색

눈금선 렌더링에는 테두리 색만 사용됩니다.

>type=note
> **참고:**
> 눈금선 그리기는 간트 시트 눈금선 설정에 따라 달라집니다.
> 눈금선 스타일이 정의되지 않은 경우 테마가 적용되어 있어도 선은 렌더링되지 않습니다.

## 간트 차트 영역

간트 차트 영역에는 다음이 포함됩니다.

* 타임라인 배경
* 눈금선
* 작업 표시줄
* 연결선
* 비작업 시간 배경

`TableTheme`에 해당 정의가 있는 요소만 테마 스타일을 사용할 수 있습니다.

### TableTheme에 의해 스타일이 지정되는 요소

![ganttchart-20260417.e61427.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/ganttchart-20260417.e61427-20260528.128d2c.png?width=600)
다음 요소는 테마 스타일을 사용합니다.

* 배경색
* 가로 눈금선 색
* 세로 눈금선 색
* 작업 표시줄 텍스트 글꼴
* 작업 표시줄 텍스트 색

작업 표시줄 텍스트 스타일은 작업 스타일 규칙과 결합됩니다.둘 다 텍스트 스타일을 정의하는 경우 작업 스타일 규칙이 우선 적용됩니다.
눈금선 렌더링은 다음 규칙을 따릅니다.

* 눈금선에 특정 색이 정의되어 있으면 해당 색을 사용합니다.
* 눈금선에 선 스타일은 정의되어 있지만 색이 없는 경우 해당 테마의 테두리 색을 사용합니다.
* 선 스타일이 정의되지 않은 경우 눈금선은 렌더링되지 않습니다.

### TableTheme로 제어되지 않는 요소

![unsupport-20260417.b29422.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/unsupport-20260417.b29422-20260528.3fb5a0.png?width=600)
다음 요소는 `TableTheme`의 영향을 받지 않습니다.

* 작업 표시줄 본문 채우기 및 테두리
* 작업 표시줄 연결선
* 비작업 시간 배경
* 마지막 열의 특수 스타일

이러한 요소를 사용자 지정하려면 해당 간트 시트 API를 사용하세요.

## 스타일 우선순위

여러 스타일 지정 메커니즘을 사용하는 경우 실제 우선순위는 다음과 같습니다.

```auto
TaskBar styleRule / Component-level settings
    > GanttSheet-specific APIs
        > TableTheme
```

적용된 `TableTheme`는 기본 레이어만 제공합니다.

## 예제

### 테마 적용

```javascript
ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.medium2
);
```

`TableTheme`를 적용하면 다음 영역의 기본 모양이 업데이트됩니다.

* 테이블 영역
* 타임스케일
* 간트 차트 배경 및 눈금선
* 작업 표시줄 텍스트

## 테마 적용 및 눈금선 활성화

눈금선 색은 적용된 테마에서 가져올 수 있습니다.

```javascript
// 테마 적용
ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.medium3
);

// 가로 및 세로 눈금선 활성화
ganttSheet.options.gridline = {
    horizontal: { lineStyle: 1 },
    vertical: { lineStyle: 1 }
};
```

눈금선에 선 스타일이 정의되어 있지만 색이 명시적으로 지정되지 않은 경우 색은 적용된 `TableTheme`에서 가져옵니다.

### 현재 테마 가져오기

```javascript
var theme = ganttSheet.getTableTheme();
```

이 메서드를 사용하여 현재 적용된 `TableTheme` 인스턴스를 가져올 수 있습니다.

### 테마 스타일 재정의

테마 스타일은 기본 레이어로 동작합니다. 컴포넌트 수준 설정은 적용된 테마보다 우선 적용됩니다.

```javascript
// 기본 제공 테이블 테마 적용
ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.light2
);

// 작업 표시줄 모양 재정의(TableTheme보다 높은 우선순위)
var rule = ganttSheet.project.taskStyleRules.getRule('task');

rule.style.taskbarStyle.middleColor = 'Accent 1';
rule.style.taskbarStyle.topText = 'name';

var index = ganttSheet.project.taskStyleRules.getIndexByItem(rule);
ganttSheet.project.taskStyleRules.setItemAt(index, rule);
```

작업 스타일 규칙은 `TableTheme` 스타일보다 우선 적용됩니다.

## 참고 항목

* [문서 테마](/spreadjs/docs/v19/features/styletheme/themes)
* [작업 표시줄 스타일](/spreadjs/docs/v19/features/ganttsheet/taskbar-styles)
* [작업 레이아웃](/spreadjs/docs/v19/features/ganttsheet/task-layout)
* [눈금선](/spreadjs/docs/v19/features/ganttsheet/gridlines)