# 일반적인 보고서 항목 속성

## Content



ActiveReportsJS의 모든 보고서 항목은 다음 유형 중 하나인 공통 속성을 공유합니다.

### 스칼라

가장 기본적인 속성 유형은 ```문자열```, ```숫자``` 및 ```부울```입니다. 디자인 타임에 스칼라 속성의 값을 설정한 후에는 런타임에 변경할 수 없습니다. 

[속성 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)에는 ```문자열``` 값을 입력하기 위한 텍스트 입력란, ```부울``` 값 설정을 위한 토글 스위치와 ```숫자``` 값 설정을 위한 숫자 위쪽/아래쪽 화살표가 있습니다.

### 열거

```열거``` 속성은 미리 정의된 목록에서 값을 선택해야 합니다. 예를 들어, [보고서](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts/layout-properties)의 ```페이지 방향``` 속성은 ```세로``` 또는 ```가로```일 수 있습니다. 이러한 속성의 편집기는 드롭다운 목록입니다.

### 길이

```길이``` 속성은 일반적으로 보고서 항목의 몇 가지 측면에 대한 크기(예: 치수)를 나타냅니다. ```길이``` 값은 두 부분으로 구성된 문자열입니다.

* 이 ```값```은 10진수입니다.
* ```단위```는 다음 측정 단위 중 하나입니다.
    * ```pt```(포인트)
    * ```pc```(파이카)
    * ```in```(인치)
    * ```mm```(밀리미터)
    * ```cm```(센티미터)

예: ```11in```, ```2cm```, ```0.25pt```. 이러한 속성의 편집기는 텍스트 편집기입니다.

### 식

```식```은 [식 언어](/activereportsjs/docs/v2.2/ReportAuthorGuide/Expressions)를 사용하여 작성된 수식입니다. 수식의 결과는 위에서 언급한 ```스칼라```, ```열거``` 또는 ```길이``` 유형 중 하나입니다. 예를 들어, 속성이 ```문자열 식```이면 이 속성의 값은 문자열로 평가되는 식이어야 합니다. 

```정적``` 식은 런타임에 값을 변경하지 않습니다. ```동적``` 식은 디자인 타임에 평가할 수 **없고** 조건부 서식 또는 동적 표시 여부를 설정하는 데 사용됩니다. 

권장되는 식 수정 방법은 속성 편집기의 오른쪽 경계에서 상자를 클릭하면 나타나는 드롭다운 메뉴를 사용하여 호출할 수 있는 [식 편집기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#expression-editor)를 사용하는 것입니다.

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
 확장하여 실행 중인 식 편집기 사용 보기 
<p>DOC-SUMMARY-TAG-CLOSE</p>



 ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/UsingExpressionEditor.gif)
<p>DOC-DETAILS-TAG-CLOSE</p>

동일한 드롭다운 메뉴를 사용하여 속성을 기본값으로 재설정할 수 있습니다.

### 컬렉션

```컬렉션```은 유형이 동일한 항목이 하나 이상 포함된 목록입니다. 이러한 항목은 유형이 다른 여러 속성으로 구성됩니다. [속성 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)에는 ```컬렉션``` 속성의 오른쪽 경계에 ```항목 추가``` 및 ```항목 표시``` 버튼이 있습니다. 항목 추가 버튼은 컬렉션에 기본 항목을 추가합니다. 항목 표시 버튼은 항목 목록을 확장하고 항목을 삭제 또는 편집하도록 허용합니다.

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
 확장하여 실행 중인 컬렉션 편집기 사용 보기 
<p>DOC-SUMMARY-TAG-CLOSE</p>



 ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/ConfiguringLineChartPlot.gif)
<p>DOC-DETAILS-TAG-CLOSE</p>


### 기본 속성

모든 보고서 항목에는 다음 속성 집합이 있습니다.

* ```이름```은 보고서 항목을 식별하는 [문자열](/activereportsjs/docs/v2.2/#scalar)로, [보고서 탐색기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#report-explorer)에 표시됩니다.
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```위쪽``` 및 ```왼쪽```은 부모 컨테이너(예: 보고서 본문 또는 [밴드 목록](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList) 섹션)를 기준으로 보고서 항목의 위치를 결정합니다.
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```너비``` 및 ```높이```는 보고서 항목의 크기를 설정합니다.
* ```도구 설명```은 미리 볼 때 보고서 구독자가 보고서 항목 위에 마우스를 놓으면 표시되는 텍스트를 설정하는 [문자열 식](/activereportsjs/docs/v2.2/#expression)입니다.
* ```책갈피```는 보고서 항목이 [책갈피로 이동](/activereportsjs/docs/v2.2/ReportAuthorGuide/Interactivity#jump-to-bookmark) 상호 작용 작업의 대상이 되도록 허용하는 [문자열 식](/activereportsjs/docs/v2.2/#expression)입니다.
* ```레이블```은 [보고서 맵](/activereportsjs/docs/v2.2/ReportAuthorGuide/Interactivity#report-map) 및 [목차](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/TableOfContents)에 나타나는 보고서 항목과 연관된 텍스트를 결정하는 [문자열 식](/activereportsjs/docs/v2.2/#expression)입니다.
* ```ZIndex```는 출력에서 보고서 항목의 스택 순서를 지정하는 [숫자](/activereportsjs/docs/v2.2/#scalar)입니다.
* 다음 값 중 하나로 평가되어야 하는 ```방향``` [식](/activereportsjs/docs/v2.2/#expression)은 보고서 항목 내 텍스트 콘텐츠의 기본 방향을 지정합니다.
    * ```LTR``` \- 텍스트 방향이 왼쪽에서 오른쪽입니다. 
    * ```RTL``` \- 텍스트 방향이 오른쪽에서 왼쪽입니다. 
* ```언어``` 문자열 [식](/activereportsjs/docs/v2.2/#expression)은 보고서 항목 내에서 날짜 및 숫자 서식 지정에 사용할 기본 언어를 결정합니다.
* 다음 값 중 하나로 평가되어야 하는 ```쓰기 모드``` [식](/activereportsjs/docs/v2.2/#expression)은 보고서 항목 내 텍스트 콘텐츠가 가로 또는 세로로 배치되는지 여부와 텍스트가 이동하는 방향을 지정합니다. 
    * ```lr-tb``` - ```방향```이 ```LTR```인 경우 텍스트 콘텐츠는 왼쪽에서 오른쪽으로 가로로 흐릅니다. ```RTL``` 방향의 경우 텍스트 콘텐츠는 오른쪽에서 왼쪽으로 가로로 이동합니다. 다음 가로 선은 이전 선 아래에 있습니다.
    * ```tb-rl``` - ```방향```이 ```LTR```인 경우 텍스트 콘텐츠는 위에서 아래로 세로로 흐르며, 다음 세로 선은 이전 선 왼쪽에 있습니다. ```RTL``` 방향인 경우 텍스트 콘텐츠는 아래에서 위로 세로로 흐르며, 다음 세로 선은 이전 선 오른쪽에 있습니다.

### 스타일 속성

* ```배경색```은 [브라우저 간 색 이름](https://www.w3schools.com/colors/colors_hex.asp) 또는 16진수 색 코드(예: ```#face0d```)로 평가되어야 하는 [식](/activereportsjs/docs/v2.2/#expression)입니다. 디자인 타임에 ```배경색``` 속성의 드롭다운 메뉴를 사용하여 색을 선택할 수 있습니다.
* ```배경 이미지```를 사용하면 배경으로 사용되는 이미지를 설정할 수 있습니다. 드롭다운 편집기를 사용하면 이미지를 빠르게 선택할 수 있습니다.
    * ```공유``` 탭은 보고서 템플릿과 동일한 폴더에 있는 이미지 파일을 열거합니다.
    * ```포함됨``` 탭에는 [포함된 이미지](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts/layout-properties#embedded-images) 목록이 포함되어 있습니다.
    * ```데이터베이스``` 탭에는 [보고서 데이터베이스](/activereportsjs/docs/v2.2/ReportAuthorGuide/Databinding)의 필드가 표시됩니다.
    * 이러한 탭에서 항목을 선택하면 다음 속성이 자동으로 설정됩니다. 해당 속성은 ```배경 이미지``` 속성의 오른쪽에 있는 ```확장``` 아이콘을 클릭하면 수동으로 구성할 수도 있습니다.
        * ```소스```는 이미지를 가져온 위치를 지정합니다.
            * ```외부``` \- 로컬 파일 시스템의 URL 또는 파일입니다.
            * ```포함됨``` - [포함된 보고서 이미지](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts/layout-properties#embedded-images)입니다. 
            * ```데이터베이스``` - ```Base64``` 형식의 이미지 데이터를 포함한 데이터 집합 필드입니다.
        * ```값``` [식](/activereportsjs/docs/v2.2/#expression)은 이미지 ID입니다(예: ```URL```).
        * ```MIME 유형``` [식](/activereportsjs/docs/v2.2/#expression)은 이미지 형식을 지정합니다. 지원되는 형식은 ```jpeg```, ```png```, ```svg```입니다.
        * ```반복``` [열거](/activereportsjs/docs/v2.2/#enum) 속성은 크기가 보고서 항목 중 하나보다 작은 경우 배경 이미지의 배열을 설정합니다.
            * ```반복``` \- 세로 및 가로로 반복하여 사용 가능한 크기를 채웁니다.
            * ```NoRepeat``` \- 이미지를 한 번만 표시합니다.
            * ```RepeatX``` \- 이미지를 가로로 반복하여 사용 가능한 너비를 채웁니다.
            * ```RepeatY``` \- 이미지를 세로로 반복하여 사용 가능한 높이를 채웁니다.
* ```테두리``` 섹션에는 보고서 항목의 테두리 모양을 설정할 수 있는 여러 가지 속성이 있습니다.
    * [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```두께``` [식](/activereportsjs/docs/v2.2/#expression)은 기본 테두리 두께를 설정합니다.
    * ```없음```, ```점선```, ```파선```, ```실선```, ```이중 실선```, ```오목```, ```볼록```, ```인셋``` 값 중 하나로 평가되어야 하는 ```스타일``` [식](/activereportsjs/docs/v2.2/#expression)입니다.
    * [브라우저 간 색 이름](https://www.w3schools.com/colors/colors_hex.asp) 또는16진수 색 코드로 평가되어야 하는 ```색``` [식](/activereportsjs/docs/v2.2/#expression)입니다.
    * 기본 테두리 ```두께```, ```스타일``` 및 ```색```은 보고서 항목의 왼쪽, 위쪽, 오른쪽 및 아래쪽 경계에 적용됩니다. 오른쪽에 있는 아이콘을 사용하여 해당 편집기를 확장해 해당 측면의 개별 테두리 속성을 설정할 수 있습니다. 
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```안쪽 여백``` [식](/activereportsjs/docs/v2.2/#expression)은 보고서 항목의 콘텐츠 주위에 공간을 설정합니다. 기본값은 보고서 항목의 왼쪽, 위쪽, 오른쪽 및 아래쪽 경계에 적용됩니다. 오른쪽에 있는 아이콘을 사용하여 ```안쪽 여백``` 편집기를 확장해 해당 측면의 개별 안쪽 여백 속성을 설정할 수 있습니다.

### 선 속성

다음 속성 그룹은 [차트](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/Chart) 보고서 항목의 다양한 요소에 사용할 수 있습니다. 

* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```너비``` [식](/activereportsjs/docs/v2.2/#expression)은 선 두께를 설정합니다.
* ```없음```, ```점선```, ```파선```, ```실선```, ```이중 실선```, ```오목```, ```볼록```, ```인셋``` 값 중 하나로 평가되어야 하는 ```스타일``` [식](/activereportsjs/docs/v2.2/#expression)은 선 스타일을 설정합니다.
* [브라우저 간 색 이름](https://www.w3schools.com/colors/colors_hex.asp) 또는16진수 색 코드로 평가되어야 하는 ```색``` [식](/activereportsjs/docs/v2.2/#expression)은 선 색을 평가합니다.

### 페이지 나누기

```페이지 나누기``` [열거](/activereportsjs/docs/v2.2/#enum) 속성은 [데이터 영역](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions) 및 [컨테이너](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Container) 보고서 항목에 사용할 수 있고 이 속성에는 다음 값 목록이 있습니다.

* ```None``` \- 페이지 나누기가 추가되지 않음
* ```Start``` \- 보고서 항목 앞에 페이지 나누기를 추가함
* ```End``` \- 보고서 항목 뒤에 페이지 나누기를 추가함
* ```StartAndEnd``` \- 보고서 항목 앞/뒤에 페이지 나누기를 추가함

### 표시 여부

모든 보고서 항목은 다음 속성을 사용하여 런타임에 표시 여부를 결정합니다.

* ```Hidden``` 부울 [식](/activereportsjs/docs/v2.2/#expression)은 보고서 항목의 초기 표시 여부를 설정합니다. ```Hidden``` 값이 ```True```이면 보고서 항목이 표시되지 않습니다. 기본적으로 ```Hidden```은 ```False```이며 보고서 항목이 표시됩니다.
* ```ToggleItem```은 보고서 항목의 표시 여부를 제어하는 [textbox](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox)의 이름입니다. 이 속성이 설정되면 지정된 ```textbox```의 왼쪽 경계에 ```확장``` 또는 ```축소``` 아이콘이 표시됩니다. 보고서 구독자가 이 아이콘을 클릭하면 보고서가 다시 렌더링되어 보고서 항목이 표시되거나 숨겨집니다. 이 속성은 [드릴다운 보고서](/activereportsjs/demos/Reports/GetStartedWithDrillDownReports/purejs)를 작성하는 데 사용할 수 있습니다.


### 텍스트 속성

일부 보고서 항목 또는 일부에는 다음 속성으로 모양이 결정되는 텍스트 콘텐츠가 표시됩니다.

* [브라우저 간 색 이름](https://www.w3schools.com/colors/colors_hex.asp) 또는 16진수 색 코드로 평가되어야 하는 ```색``` [식](/activereportsjs/docs/v2.2/#expression)은 텍스트 색을 평가합니다.
* 다음 속성은 [글꼴 구성](/activereportsjs/docs/v2.2/GettingStarted/FontConfiguration)과 긴밀한 관계가 있습니다.
    * ```글꼴 패밀리``` 문자열 [식](/activereportsjs/docs/v2.2/#expression)은 텍스트에 사용할 글꼴을 지정합니다. 
    * ```기본``` 또는 ```기울임꼴```로 평가되어야 하는 ```글꼴 스타일``` [식](/activereportsjs/docs/v2.2/#expression)은 텍스트에 사용할 글꼴 스타일을 지정합니다.
    * ```더 얇게```, ```가늘게```, ```아주 가늘게```, ```얇게```, ```일반```, ```보통```, ```약간 굵게```, ```굵게```, ```가장 굵게``` 또는 ```더 굵게``` 값 중 하나로 평가되어야 하는 ```글꼴 두께``` [식](/activereportsjs/docs/v2.2/#expression)은 텍스트에 굵게 또는 가늘게 설정된 문자가 어떻게 표시되어야 하는지 설정합니다.
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```글꼴 크기``` [식](/activereportsjs/docs/v2.2/#expression)은 글꼴의 크기를 지정합니다.
* ```텍스트 장식``` [식](/activereportsjs/docs/v2.2/#expression)은 ```없음```, ```밑줄```, ```윗줄``` 또는 ```취소선``` 값 중 하나로 평가되어야 하며 텍스트에 추가된 장식을 지정합니다.
* 다음 값 중 하나로 평가되어야 하는 ```텍스트 맞춤``` [식](/activereportsjs/docs/v2.2/#expression)은 텍스트 맞춤을 설정합니다.
    * ```일반``` \- 숫자와 날짜는 오른쪽에, 그 외 모든 항목은 왼쪽에 맞춥니다.
    * ```왼쪽``` \- 텍스트를 왼쪽에 맞춥니다.
    * ```오른쪽``` \- 텍스트를 오른쪽에 맞춥니다.
    * ```가운데``` \- 텍스트를 가운데 맞춥니다.
    * ```양쪽 맞춤``` \- 각 줄의 너비가 동일하도록 여러 줄 텍스트를 늘립니다.
* ```텍스트 양쪽 맞춤``` [식](/activereportsjs/docs/v2.2/#expression)은 ```텍스트 맞춤```이 ```양쪽 맞춤```인 경우 영향을 받으며, 다음 값 중 하나로 평가해야 합니다.
    * ```Auto``` \- 마지막 줄을 제외하고 단어 사이 간격을 변경합니다.
    * ```Distribute``` - ```Auto```와 기능이 동일합니다.
    * ```DistributeAllLines``` \- 모든 줄의 단어 사이 간격을 변경합니다.
* ```위쪽```, ```가운데```, ```아래쪽``` 값 중 하나로 평가되어야 하는 ```세로 맞춤```은 경계 상자 내 텍스트의 세로 맞춤을 설정합니다.
* 다음 값 중 하나로 평가되어야 하는 ```줄 바꿈 모드``` [식](/activereportsjs/docs/v2.2/#expression)은 줄 끝에 도달했을 때 단어의 줄 바꿈 방식을 지정합니다.
    * ```NoWrap``` \- 줄 바꿈되지 않음
    * ```CharWrap``` \- 임의 문자에서 줄이 바뀜
    * ```WordWrap``` \- 단어 끝에서 줄이 바뀜
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```줄 간격``` 단위는 텍스트 줄의 높이를 설정합니다. [줄 높이](https://www.w3schools.com/cssref/pr_dim_line-height.asp) CSS 스타일로 변환됩니다.
* [길이](/activereportsjs/docs/v2.2/#length) 단위의 ```문자 간격```은 텍스트 내 문자 사이 간격을 설정합니다.