[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

문서 테마

SpreadJS의 문서 테마 기능을 사용하면 통합 문서 전체의 색상과 글꼴을 쉽게 통일할 수 있으며, 빠르게 업데이트할 수 있습니다. 테마는 미리 정의된 색상 및 글꼴 세트를 사용하여 일관된 외관을 제공하며, 예를 들어 Accent1 색상은 Office 테마와 Apex 테마에서 다르게 나타날 수 있습니다.

SpreadJS에는 기본 제공 테마들이 포함되어 있으며, 수동으로 사용자 정의 테마를 만들어 고유한 스타일을 적용할 수도 있습니다. 또한 기존 테마의 색상과 글꼴을 사용자 지정할 수도 있습니다.

테마

Default

Office

Apex

Aspect

Concourse

Civic

Oriel

Origin

Paper

Solstice

Technic

Trek

Urban

Verve

Equity

Flow

Foundry

Median

Metro

Module

Opulent

Office2007



워크시트에 테마를 적용하려면 currentTheme 메서드를 사용합니다:

sheet.currentTheme('Apex') // 기본 제공 테마 이름 사용
sheet.currentTheme(GC.Spread.Sheets.Themes.Metro) // 테마 인스턴스 사용

예제: Apex 테마 사용

image.4da64a

예제: Metro 테마 사용

image.1ae878

문서 테마 이해하기

SpreadJS의 테마는 다음으로 구성됩니다:

  • 테마 색상 – 텍스트, 배경, 강조 및 하이퍼링크 등에 사용되는 미리 정의된 색상 세트

  • 테마 글꼴 – 워크시트 전반에 적용되는 제목 및 본문 글꼴 조합

테마를 적용하면 워크시트 내 모든 요소가 통일된 디자인을 따릅니다.

테마 색상

SpreadJS는 다양한 색 구성의 기본 테마(예: Office, Apex)를 제공합니다. 각 테마에는 다음과 같은 항목이 포함됩니다:

색상 유형

설명

색상 명

Text/Background

셀 텍스트 및 배경에 사용됨

  • Text 1

  • Text 2

  • Background 1

  • Background 2

Accent Colors

주요 요소 강조

  • Accent 1

  • Accent 2

  • Accent 3

  • Accent 4

  • Accent 5

Hyperlink

기본 링크 색상

  • Hyperlink

Followed Hyperlink

방문한 링크 색상

  • FollowedHyperlink

테마 색상 밝기 변형

각 테마 색상에는 더 어두운/더 밝은 변형이 있으며, SpreadJS는 테마 색상에 대해 -100부터 100까지의 밝기 스케일을 사용합니다:

  • 음수 값 (-100 ~ 0) = 어두운 변형

  • 0 = 기본 테마 색상

  • 양수 값 (0 ~ 100) = 밝은 변형

하이퍼링크 및 방문한 하이퍼링크 색상은 밝기 변형을 지원하지 않습니다.

테마 색상은 다음과 같이 프로그래밍 방식으로 적용할 수 있습니다:

// 어두운 변형 (음수 값)
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와 같은 약간 더 독특한 글꼴을 사용합니다.

    • 축 레이블, 범례 또는 수동으로 서식 지정한 헤딩에 적용됩니다.

테마 글꼴은 "글꼴 패밀리"만 정의하며, 굵기, 크기 등의 다른 폰트 속성은 포함하지 않습니다.

기본 제공 테마 별 테마 글꼴

테마

본문 글꼴

제목 글꼴

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

위 표는 라틴(Latin) 글꼴만 포함되어 있습니다.

테마 글꼴을 코드로 적용하기

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

예시: Metro 테마 사용

image.aa370c

SpreadJS 셀 스타일링에서 "themeFont"와 "font"가 모두 존재하는 경우, 셀에 실제로 적용되는 글꼴은 "themeFont"에 해당하는 글꼴 패밀리와 셀의 "font" 설정에서 가져온 기타 글꼴 속성(글꼴 패밀리는 제외)의 조합입니다.

예를 들어, 내장된 Aspect 테마를 사용하고 셀 스타일을 다음과 같이 설정하면:

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는 현재 문화를 기반으로 적절한 글꼴을 자동으로 적용합니다:

  • 라틴 지역: 헤더, 셀, 열 너비 측정 등에 라틴 글꼴 사용

  • 동아시아 지역: 라틴 글꼴 설정을 무시하고 동아시아 글꼴 사용

GC.Spread.Common.CultureInfo 클래스를 사용한 fontScriptCode 구성:

class GC.Spread.Common.CultureInfo {
  fontScriptCode?: string;
}

Excel I/E(입출력)를 완벽히 지원하려면 fontScriptCode는 ISO 15924 표준의 값을 사용해야 합니다.

기본 제공 문화 호환성

하위 호환성을 위해 기본 제공 문화에서는 fontScriptCode가 자동으로 적용되지 않습니다. 이를 활성화하려면:

// 중국어(간체) 활성화
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');


사용자 정의 문화 구성

동아시아 지원을 포함한 사용자 정의 문화 추가:

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는 제목 또는 본문 테마 글꼴을 읽을 때 자동으로 동아시아 글꼴을 사용합니다:

// 셀의 테마 글꼴을 Body로 설정 (동아시아 글꼴 사용됨)
sheet.getCell(0, 0).themeFont("Body");

// themeFont가 포함된 스타일도 동아시아 글꼴 사용
var style = new GC.Spread.Sheets.Style();
style.themeFont = "Body";
sheet.setStyle(1, 1, style);

동아시아 글꼴이 포함된 테마를 워크시트에 적용

var theme = sheet.currentTheme();
theme.font().headingEastAsianFont('SimSun'); // 제목용 동아시아 글꼴 설정
theme.font().bodyEastAsianFont('SimSun');    // 본문용 동아시아 글꼴 설정
sheet.currentTheme(theme);

글꼴 우선순위 규칙

글꼴 선택은 다음과 같은 우선순위를 따릅니다:

  1. 테마에 동아시아 글꼴이 명시된 경우

  2. 문화의 fontScriptCode에 일치하는 글꼴

  3. 기본 라틴 글꼴

예시

// 사례 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에 대해 대체 글꼴 구성

GC.Spread.Common.CultureManager.getCultureInfo().fontScriptCode = 'Hans';
theme.font().bodyFontScriptTypeface('Hans', 'SimSum');

// 위 코드는 다음과 동일
theme.font().bodyEastAsianFont('SimSum');

Excel에서는 차트의 텍스트(예: 제목, 축, 범례, 차트 영역 등)에 대해 글꼴 선택에 특정 정책이 적용됩니다. 예를 들어, 차트 영역, 축, 범례는 일반적으로 테마에 설정된 라틴 글꼴을 사용합니다. 그러나 차트 제목은 커서의 위치를 기준으로 적절한 글꼴을 자동으로 감지합니다.

만약 근처에 동아시아 문자가 있을 경우, 해당 제목은 테마의 동아시아 글꼴을 사용하며, 그렇지 않은 경우에는 Excel이 동아시아 로케일에서 실행되었을 때 기본적으로 라틴 글꼴을 사용합니다.

이와 유사하게, 도형 내 텍스트도 동일한 정책을 따릅니다.

반면, SpreadJS는 작동 방식이 다릅니다. SpreadJS에서는 차트 및 도형이 하나의 글꼴만을 사용하며, 텍스트 주변에 따라 동적으로 글꼴을 선택하는 기능은 없습니다.