# 보고서 스타일시트

## Content

## 소개

`보고서 스타일시트` 기능은 [보고서 항목](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/custom-init-templates) 구성 프로세스를 간소화하고 표준화하여 모양 설정을 관리하고 적용하는 중앙 집중식 방법을 제공함으로써 여러 보고서에서 일관된 디자인을 보장합니다.
`스타일시트`는 미리 정의된 스타일들의 모음입니다. 각 `스타일`은 텍스트 색상, 글꼴 종류, 여백, 테두리 설정 등 보고서 항목에 대한 특정 시각적 속성을 정의합니다. 이러한 스타일을 만들고 구성하여 보고서의 통일된 모양과 느낌을 만들 수 있습니다.
보고서에 스타일시트를 첨부하면 보고서 항목의 `스타일 이름(Style Name)` 속성을 통해 스타일시트의 스타일을 선택할 수 있게 됩니다. 개별 속성을 수동으로 구성하는 대신 스타일을 참조하면 다음과 같은 이점을 얻을 수 있습니다.

* 보고서 디자인 전반에 걸쳐 일관성을 유지합니다. 
* 설정을 중복하는 대신 스타일을 재사용하여 시간을 절약합니다. 
* 각 보고서 항목을 개별적으로 편집하는 대신 스타일시트를 수정하여 업데이트를 간소화합니다.

## 스타일시트 보존(Stylesheet Preserving)

스타일시트는 JSON 형식을 사용하므로 사람이 읽기 쉽고 프로그래밍 방식으로 관리하기도 간편합니다. 스타일시트를 저장하는 주요 방법은 두 가지입니다.

* **외부 저장소** - 스타일시트를 별도의 JSON 파일로 저장하거나 데이터베이스에 저장하여 여러 보고서에서 재사용하고 유지 관리를 간소화할 수 있습니다.
* **보고서 템플릿에 포함** - 스타일시트를 보고서 템플릿에 직접 포함시킬 수 있습니다. 이 방법을 사용하면 스타일시트가 보고서에 포함되어 휴대성이 향상되고 배포가 간편해집니다.

각 방법에는 장점이 있습니다. 외부 저장소는 여러 보고서에서 공유되는 스타일에 적합하고, 내장 스타일은 자체적인 스타일이 필요한 독립형 보고서에 유용합니다. 
다음 섹션에서는 스타일시트를 정의하고, 보고서에 첨부하고, 스타일을 효과적으로 사용하는 방법을 설명합니다.

## 스타일시트 생성

새로운 `외부 스타일시트`를 만들려면 [독립 실행형 보고서 디자이너](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 실행하고 `파일-새로 만들기-Stylesheet` 메뉴 항목을 선택하십시오.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.802bd4.png)
내장 스타일시트를 추가하려면 [보고서 속성](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties)의 내장 스타일시트 컬렉션에 새 항목을 추가하면 됩니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.bf1dc0.png)
두 작업 모두 `스타일시트 편집기` 대화 상자를 엽니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.3b2338.png)

## 기존 스타일시트 편집

`파일 > 열기` 메뉴를 선택하고 파일 확장자 필터에서 `ActiveReportsJS Stylesheet`를 선택하여 기존 외부 스타일시트를 열어 수정할 수도 있습니다.
내장 스타일시트의 경우, `내장 스타일시트` 컬렉션 편집기를 사용하여 `스타일시트 편집기`를 실행하고 수정할 수 있습니다.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.2c1546.png)

## 스타일시트 편집기 사용

### 새로운 스타일 만들기

새 스타일을 추가하려면 편집기의 `새 스타일` 섹션을 사용하세요.

1. `새 스타일 이름` 필드에 스타일 이름을 입력합니다. 기본 스타일 이름을 사용하려면 비워 두세요.
2. 속성을 상속할 상위 스타일을 선택합니다(선택 사항).
3. `+ 스타일 추가` 버튼을 클릭합니다. 새 스타일이 편집기의 스타일 목록에 추가됩니다.

### 기존 스타일 제거하기

기존 스타일을 삭제하려면 목록에서 해당 스타일을 선택하고 옆에 있는 삭제 아이콘을 클릭합니다. 이렇게 하면 스타일시트에서 해당 스타일이 영구적으로 제거됩니다.

### 스타일 속성 수정

편집기에서 선택한 스타일의 시각적 속성을 사용자 지정할 수 있습니다. 지원되는 속성 목록은 [일반 보고서 항목 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties) 문서를 참조하십시오.

### 스타일시트 저장

스타일시트를 사용할 때 저장 옵션은 스타일시트가 외부 스타일시트인지 내장 스타일시트인지에 따라 다릅니다.

* **외부 스타일시트** - `저장` 버튼을 클릭하면 `파일 저장 대화 상자`가 열려 스타일시트를 외부 파일로 저장할 수 있습니다. 이 파일은 여러 보고서에서 재사용할 수 있습니다. 
* **내장 스타일시트** - `저장` 버튼을 클릭하면 보고서 템플릿 내의 내장 스타일시트가 수정되어 템플릿에 로컬로 변경 사항이 저장됩니다.

또한, 내장 스타일시트 편집기의 저장 버튼 드롭다운 메뉴에서 내보내기 옵션을 선택하여 내장 스타일시트를 외부 파일로 내보낼 수 있습니다. 이는 다른 보고서에서 스타일을 공유하거나 재사용하는 데 유용합니다.

## 보고서에 스타일시트 첨부하기

보고서를 스타일시트에 연결하려면 [보고서 속성](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties)에서 `스타일시트`를 사용하십시오.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.cce67b.png)

* **Source** — 스타일시트가 내장형인지 공유형인지 지정합니다. 
    * `Embedded`은 보고서 내에 저장된 스타일시트를 의미합니다.
    * `Shared`은 보고서 템플릿 외부에 저장된 외부 스타일시트를 의미합니다.
* **Value** — 다음과 같이 평가되는 표현식입니다.
    * `Source`가 `Embedded`로 설정된 경우 내장된 스타일시트 이름입니다.
    * `Source`가 `Shared`로 설정된 경우 외부 리소스 이름 또는 URL입니다.

기본적으로 내장 리소스 로케이터는 외부 스타일시트 값을 상대 URL로 처리하여 현재 페이지 URL을 기준으로 해석합니다. 또는 [리소스 로케이터 사용](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Loading-Reports/ResourceLocator) 문서에 설명된 대로 사용자 지정 리소스 로케이터를 구현하여 스타일시트 검색을 관리할 수 있습니다.

## 보고서 항목에 스타일 적용

스타일시트가 첨부되면 아래와 같이 보고서 항목의 `스타일 이름` 속성을 사용하여 미리 정의된 모양을 선택할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.162eb7.png)
`스타일 이름`은 고정 값으로 설정하거나 스타일 이름으로 해석되는 [표현식](/activereportsjs/docs/ReportAuthorGuide/Expressions)으로 구성할 수 있습니다.
또한 배경색이나 테두리와 같은 특정 시각적 속성을 수동으로 재정의하여 적용된 스타일을 변경할 수도 있습니다.