# 문서 테마 ## Content SpreadJS의 **문서 테마** 기능을 사용하면 통합 문서 전체의 색상과 글꼴을 쉽게 통일할 수 있으며, 빠르게 업데이트할 수 있습니다. 테마는 미리 정의된 색상 및 글꼴 세트를 사용하여 일관된 외관을 제공하며, 예를 들어 **Accent1** 색상은 **Office** 테마와 **Apex** 테마에서 다르게 나타날 수 있습니다. SpreadJS에는 기본 제공 테마들이 포함되어 있으며, 수동으로 **사용자 정의 테마**를 만들어 고유한 스타일을 적용할 수도 있습니다. 또한 기존 테마의 색상과 글꼴을 사용자 지정할 수도 있습니다. | @cols=3:**테마** | | --- | --- | --- | | Default | Office | Apex | | Aspect | Concourse | Civic | | Oriel | Origin | Paper | | Solstice | Technic | Trek | | Urban | Verve | Equity | | Flow | Foundry | Median | | Metro | Module | Opulent | | Office2007 | | | 워크시트에 테마를 적용하려면 `currentTheme` 메서드를 사용합니다: ```javascript sheet.currentTheme('Apex') // 기본 제공 테마 이름 사용 sheet.currentTheme(GC.Spread.Sheets.Themes.Metro) // 테마 인스턴스 사용 ``` **예제: Apex 테마 사용** ![image.4da64a](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.4da64a.cf6975.png?width=800) **예제: Metro 테마 사용** ![image.1ae878](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.1ae878.7cb361.png?width=800) ## **문서 테마 이해하기** SpreadJS의 테마는 다음으로 구성됩니다: * **테마 색상** – 텍스트, 배경, 강조 및 하이퍼링크 등에 사용되는 미리 정의된 색상 세트 * **테마 글꼴** – 워크시트 전반에 적용되는 제목 및 본문 글꼴 조합 테마를 적용하면 워크시트 내 모든 요소가 통일된 디자인을 따릅니다. ## **테마 색상** SpreadJS는 다양한 색 구성의 기본 테마(예: Office, Apex)를 제공합니다. 각 테마에는 다음과 같은 항목이 포함됩니다: | 색상 유형 | 설명 | 색상 명 | | ----- | --- | ---- | | Text/Background | 셀 텍스트 및 배경에 사용됨 | | | Accent Colors | 주요 요소 강조 | | | Hyperlink | 기본 링크 색상 | | | Followed Hyperlink | 방문한 링크 색상 | | ## 테마 색상 밝기 변형 각 테마 색상에는 **더 어두운/더 밝은 변형**이 있으며, SpreadJS는 테마 색상에 대해 **-100부터 100까지의 밝기 스케일**을 사용합니다: * **음수 값 (-100 \~ 0)** = 어두운 변형 * **0** = 기본 테마 색상 * **양수 값 (0 \~ 100)** = 밝은 변형 >type=warning > 하이퍼링크 및 방문한 하이퍼링크 색상은 밝기 변형을 지원하지 않습니다. 테마 색상은 다음과 같이 프로그래밍 방식으로 적용할 수 있습니다: ```javascript // 어두운 변형 (음수 값) sheet.getRange("A1").backColor("Accent 1 -60"); // 60% 어두운 색 sheet.getRange("B1").backColor("Background 1 -40"); // 40% 어두운 색 // 기본 색상 (밝기 0) sheet.getRange("C1").backColor("Accent 1 0"); // 기본 색상 sheet.getRange("D1").backColor("Accent 1 0"); // 기본 색상 // 밝은 변형 (양수 값) sheet.getRange("E1").backColor("Accent 1 60"); // 60% 밝은 색 sheet.getRange("F1").backColor("Background 1 25"); // 25% 밝은 색 ``` ## 테마 글 테마에는 문서의 전체적인 외관을 일관되게 유지할 수 있도록 도와주는 두 가지 이름이 지정된 글꼴이 포함되어 있습니다. 1. 본문 글꼴 * 일반 텍스트 콘텐츠(예: 셀 값, 문단 또는 헤딩이 아닌 텍스트)에 사용됩니다. * 일반적으로 **Calibri**와 같은 깔끔하고 가독성이 좋은 글꼴을 사용합니다. * 대부분의 워크시트 셀에 자동으로 적용되며, 별도로 지정하지 않는 한 기본 글꼴로 사용됩니다.
2. 제목 글꼴 * 제목, 헤더 또는 강조된 텍스트(예: 차트 제목, 테이블 헤더)에 사용됩니다. * 보통 **Cambria**와 같은 약간 더 독특한 글꼴을 사용합니다. * 축 레이블, 범례 또는 수동으로 서식 지정한 헤딩에 적용됩니다. >type=warning > 테마 글꼴은 "글꼴 패밀리"만 정의하며, 굵기, 크기 등의 다른 폰트 속성은 포함하지 않습니다. 기본 제공 테마 별 테마 글꼴 | **테마** | **본문 글꼴** | **제목 글꼴** | | --- | ----- | ----- | | Default | Calibri | Cambria | | Office | Calibri | Calibri Light | | Office2007 | Calibri | Cambria | | Apex | Book Antiqua | Lucida Sans | | Aspect | Verdana | Verdana | | Concourse | Lucida Sans Unicode | Lucida Sans Unicode | | Civic | Georgia | Georgia | | Oriel | Century Schoolbook | Century Schoolbook | | Origin | Gill Sans MT | Bookman Old Style | | Paper | Constantia | Constantia | | Solstice | Gill Sans MT | Gill Sans MT | | Technic | Arial | Franklin Gothic Book | | Trek | Franklin Gothic Book | Franklin Gothic Medium | | Urban | Georgia | Trebuchet MS | | Verve | Century Gothic | Century Gothic | | Equity | Perpetua | Franklin Gothic Book | | Flow | Constantia | Calibri | | Foundry | Rockwell | Rockwell | | Median | Tw Cen MT | Tw Cen MT | | Metro | Corbel | Consolas | | Module | Corbel | Corbel | | Opulent | Trebuchet MS | Trebuchet MS | >type=warning > 위 표는 라틴(Latin) 글꼴만 포함되어 있습니다. #### 테마 글꼴을 코드로 적용하기 ```auto sheet.getCell(1,3).value("Apply Heading Font to Cell").themeFont("Headings"); sheet.getCell(2,3).value("Apply Body Font to Cell").themeFont("Body"); ``` 예시: Apex 테마 사용 ![image.c4746b](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.c4746b.1d7d79.png) 예시: Metro 테마 사용 ![image.aa370c](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.aa370c.a5faad.png) SpreadJS 셀 스타일링에서 "themeFont"와 "font"가 모두 존재하는 경우, 셀에 실제로 적용되는 글꼴은 "themeFont"에 해당하는 **글꼴 패밀리**와 셀의 "font" 설정에서 가져온 기타 글꼴 속성(글꼴 패밀리는 제외)의 조합입니다. 예를 들어, 내장된 Aspect 테마를 사용하고 셀 스타일을 다음과 같이 설정하면: ```auto var style = new GC.Spread.Sheets.Style(); style.themeFont = 'Body'; style.fontFamily = 'Arial'; style.fontSize = '20px'; style.fontWeight = 'bold'; style.fontStyle = 'italic'; sheet.setStyle(0, 0, style); sheet.setValue(0,0,'Cell Fonts'); ``` 결과적으로 적용되는 글꼴은 “italic bold 20px Verdana”가 됩니다. ### 문화에서 동아시아 글꼴 사용 SpreadJS는 라틴 및 동아시아 글꼴 모두에서 텍스트를 표시하고 측정하는 데 대한 폭넓은 지원을 제공하며, 문화 설정에 따라 적응합니다. 테마 시스템을 통해 SpreadJS는 [ThemeFont ](/spreadjs/api/v18/classes/GC.Spread.Sheets.ThemeFont)클래스를 이용하여 동아시아 글꼴 지원을 활성화합니다. ### 문화 기반 글꼴 선택 SpreadJS는 현재 문화를 기반으로 적절한 글꼴을 자동으로 적용합니다: * **라틴 지역**: 헤더, 셀, 열 너비 측정 등에 라틴 글꼴 사용 * **동아시아 지역**: 라틴 글꼴 설정을 무시하고 동아시아 글꼴 사용 GC.Spread.Common.CultureInfo 클래스를 사용한 fontScriptCode 구성: ```auto class GC.Spread.Common.CultureInfo { fontScriptCode?: string; } ``` >type=warning > Excel I/E(입출력)를 완벽히 지원하려면 `fontScriptCode`는 [ISO 15924](https://en.wikipedia.org/wiki/ISO_15924) 표준의 값을 사용해야 합니다. ### 기본 제공 문화 호환성 하위 호환성을 위해 기본 제공 문화에서는 `fontScriptCode`가 자동으로 적용되지 않습니다. 이를 활성화하려면: ```auto // 중국어(간체) 활성화 var cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo('zh-cn'); cultureInfo.fontScriptCode = "Hans"; GC.Spread.Common.CultureManager.culture('zh-cn'); // 일본어 활성화 cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo('ja-jp'); cultureInfo.fontScriptCode = "Jpan"; GC.Spread.Common.CultureManager.culture('ja-jp'); // 한국어 활성화 cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo('ko-kr'); cultureInfo.fontScriptCode = "Hang"; GC.Spread.Common.CultureManager.culture('ko-kr'); ``` ### 사용자 정의 문화 구성 동아시아 지원을 포함한 사용자 정의 문화 추가: ```auto var customCulture = new GC.Spread.Common.CultureInfo(); customCulture.fontScriptCode = 'Thai'; GC.Spread.Common.CultureManager.addCultureInfo('th-TH', customCulture); GC.Spread.Common.CultureManager.culture('th-TH'); ``` 구성 후, SpreadJS는 제목 또는 본문 테마 글꼴을 읽을 때 자동으로 동아시아 글꼴을 사용합니다: ```auto // 셀의 테마 글꼴을 Body로 설정 (동아시아 글꼴 사용됨) sheet.getCell(0, 0).themeFont("Body"); // themeFont가 포함된 스타일도 동아시아 글꼴 사용 var style = new GC.Spread.Sheets.Style(); style.themeFont = "Body"; sheet.setStyle(1, 1, style); ``` 동아시아 글꼴이 포함된 테마를 워크시트에 적용 ```auto var theme = sheet.currentTheme(); theme.font().headingEastAsianFont('SimSun'); // 제목용 동아시아 글꼴 설정 theme.font().bodyEastAsianFont('SimSun'); // 본문용 동아시아 글꼴 설정 sheet.currentTheme(theme); ``` ### 글꼴 우선순위 규칙 글꼴 선택은 다음과 같은 우선순위를 따릅니다: 1. 테마에 동아시아 글꼴이 명시된 경우 2. 문화의 fontScriptCode에 일치하는 글꼴 3. 기본 라틴 글꼴 예시 ```auto // 사례 1: fontScriptCode 설정 없음 (라틴 글꼴 반환) var font = theme.bodyFont(); // "Calibri" 반환 // 사례 2: fontScriptCode 설정됨, 테마에 동아시아 글꼴 없음 GC.Spread.Common.CultureManager.getCultureInfo().fontScriptCode = 'Hans'; var font = theme.bodyFont(); // culture 기반 글꼴 반환 (예: "DengXian") // 사례 3: 테마에 동아시아 글꼴 명시됨 theme.font().bodyEastAsianFont('DengXian'); var font = theme.bodyFont(); // "DengXian" 반환 ``` ### Font Script Typeface 구성 특정 script에 대해 대체 글꼴 구성 ```auto GC.Spread.Common.CultureManager.getCultureInfo().fontScriptCode = 'Hans'; theme.font().bodyFontScriptTypeface('Hans', 'SimSum'); // 위 코드는 다음과 동일 theme.font().bodyEastAsianFont('SimSum'); ``` >type=warning > Excel에서는 차트의 텍스트(예: 제목, 축, 범례, 차트 영역 등)에 대해 글꼴 선택에 특정 정책이 적용됩니다. 예를 들어, **차트 영역, 축, 범례**는 일반적으로 **테마에 설정된 라틴 글꼴**을 사용합니다. 그러나 **차트 제목**은 커서의 위치를 기준으로 적절한 글꼴을 자동으로 감지합니다. > 만약 근처에 동아시아 문자가 있을 경우, 해당 제목은 테마의 **동아시아 글꼴**을 사용하며, 그렇지 않은 경우에는 Excel이 **동아시아 로케일**에서 실행되었을 때 기본적으로 **라틴 글꼴**을 사용합니다. > 이와 유사하게, **도형 내 텍스트**도 동일한 정책을 따릅니다. > 반면, **SpreadJS**는 작동 방식이 다릅니다. SpreadJS에서는 **차트 및 도형이 하나의 글꼴만을 사용**하며, 텍스트 주변에 따라 동적으로 글꼴을 선택하는 기능은 없습니다.