# 목차
## Content
목차 보고서 컨트롤은 보고서 본문에 문서 맵을 표시합니다. 문서 맵은 페이지 번호가 표시된 보고서 제목 수준 및 레이블의 체계적인 계층 구조로, 문서 맵을 사용하면 보고서 내 데이터를 빠르게 파악하고 탐색할 수 있습니다.
목차 컨트롤을 사용하여 인쇄 및 렌더링을 위해 보고서 본문에 목차 구조를 포함할 수 있습니다.
아래에는 목차 컨트롤의 일부 속성에 대한 설명이 나와 있습니다. 모든 속성을 보려면 고급 속성 모드를 활성화해야 합니다.
## 배경
**색**: 배경에 사용할 색을 선택합니다.
## 테두리
**너비**: 테두리의 두께를 설정하기 위한 값을 포인트 단위로 입력합니다.
**스타일**: 테두리의 스타일을 선택합니다.
**색**: 색 선택기, 표준 색 또는 웹 색에서 테두리에 사용할 색을 선택합니다.
## 레이아웃
**스타일**: 사용 가능한 스타일 목록에서 선택하고 컨트롤에 스타일을 적용하도록 설정합니다.
**페이지 나누기**: 페이지 나누기가 발생하는 경우를 지정합니다.
**Start** \- 컨트롤 시작 부분에 페이지 나누기를 삽입합니다.
**End** \- 컨트롤의 끝 부분에 페이지 나누기를 삽입합니다.
**StartAndEnd** \- 컨트롤의 시작 부분과 끝 부분에 페이지 나누기를 삽입합니다.
## 수준
**항목 추가** 옵션을 사용하면 목차 컨트롤에 새 수준을 추가할 수 있습니다. 수준 항목에는 사용할 수 있는 중요한 속성이 있습니다. 다음은 몇 가지 속성에 대한 설명입니다.
## 배경
**색**: 배경에 사용할 색을 선택합니다.
## 텍스트
**색**: 색 선택기, 표준 색 또는 웹 색에서 테두리에 사용할 색을 선택합니다.
**글꼴 스타일**: 텍스트에 글꼴 스타일을 적용합니다. 레이아웃 > 스타일에 대한 테마를 선택한 경우 텍스트는 선택한 테마에 따라 나타납니다. 다음 스타일을 선택할 수 있습니다.
**일반** \- 텍스트가 일반 스타일로 표시되도록 합니다.
**기울임꼴** \- 텍스트가 기울어져 표시되도록 합니다.
**텍스트 장식**: 선을 사용하여 텍스트를 장식할 수 있습니다. 다음 옵션 중에서 선택할 수 있습니다.
**밑줄** \- 텍스트 아래에 선을 그립니다.
**윗줄** \- 텍스트 위에 선을 그립니다.
**취소선** \- 텍스트의 가운데를 통과하게 선을 그립니다.
## 일반
**채우기 문자**: 식을 사용하여 선행 문자에 대한 채우기 문자를 지정합니다.
**채우기 문자 표시**: 선행 문자를 표시할지 여부를 지정합니다. 기본값은 True입니다.
**페이지 번호 표시**: 페이지 번호를 표시할지 여부를 지정합니다. 기본값은 True입니다.
## 사용 사례
개봉 연도, 관객 평점, 러닝 타임 등 영화 정보와 함께 영화를 나열하고, 보고서 시작 부분에는 특정 장르 또는 선택한 영화로 이동할 수 있는 목차가 나와 있는 영화 카탈로그를 표시하려 한다고 가정해 보겠습니다.
먼저 나중에 목차를 추가할 보고서를 작성해 보겠습니다. 이 보고서에서는 텍스트 상자 컨트롤 몇 개와 목록 데이터 영역을 사용하여 영화의 `[YearReleased]`, `[MPAA]`, `[UserRating]` 및 `[Length]`를 표시합니다. 이 보고서는 목록 데이터 영역에서 그룹 식을 사용하여 장르 및 제목별로 영화를 그룹화합니다. 보고서 레이아웃은 다음과 같이 표시됩니다.
| 디자인 타임 | 미리 보기 |
|------------------------------------------|-----------------------------------|
|||
1. RDL 보고서를 작성하고 보고서 디자이너로 **목록** 데이터 영역(List1)을 끌어 놓습니다.
2. **그룹 식** 속성을 `=Fields!GenreName.Value`로 설정합니다.
3. 목록 데이터 영역으로 **텍스트 상자** 컨트롤을 끌어 놓고 `[GenreName]`에 바인딩합니다. 이 이름은 카탈로그 섹션의 헤더가 됩니다.
4. 또 다른 **목록** 데이터 영역(List2)을 첫 번째 **목록**으로 끌어 놓습니다.
5. **그룹 식** 속성을 `=Fields!Title.Value`로 설정합니다.
6. **텍스트 상자** 컨트롤을 목록 데이터 영역으로 끌어 놓고 `[Title]`에 바인딩합니다. 이 제목은 영화에 대한 각 카탈로그 항목의 헤더가 됩니다.
7. 다음으로, `[Title]` 아래 **텍스트 상자** 컨트롤 몇 개를 List2로 끌어 놓고 **값** 속성을 다음과 같이 설정합니다.
- 텍스트 상자3: ="개봉 연도: " & Fields!YearReleased.Value & ", " & Fields!Country.Value
- 텍스트 상자4: ="The MPAA Rated this Film: " & Fields!MPAA.Value
- 텍스트 상자5: 관객 평점:
- 텍스트 상자6: =Fields!UserRating.Value
- 텍스트 상자7: ="길이: " & Fields!Length.Value & " min"
8. 보고서 제목을 추가하려면 **텍스트 상자** 컨트롤을 보고서 맨 위로 끌어서 놓고 **값**을 "영화 카탈로그"로 설정합니다.
9. 사용된 보고서 컨트롤의 속성을 조정하여 보고서의 모양을 개선합니다.
10. 미리 봅니다.
이제 목차 컨트롤을 추가하여 보고서 또는 문서 맵을 표시해 보겠습니다.
### 제목 수준 속성을 사용하여 목차에 항목 추가
텍스트 상자 컨트롤의 제목 수준 속성을 사용하여 보고서의 계층 구조를 정의할 수 있습니다. 텍스트 상자가 제목 수준 1로 설정되어 있고, 그룹 헤더를 표시하는 다른 텍스트 상자가 제목 수준 2로 설정되어 있으면 제목 수준 2의 항목은 목차에서 제목 수준 1 항목 아래에 묶입니다. 제목에는 번호가 자동으로 매겨집니다.
1. **목차** 컨트롤을 보고서 맨 위, 보고서 제목 아래에 끌어서 놓습니다. 보고서의 모서리를 클릭한 상태로 끌어 크기를 조정합니다.
2. **목차**에서 (장르 이름을 표시할) **Level1**을 선택하고 다음 속성을 설정합니다.
- 텍스트 > 색: #0096aa
- 글꼴 크기: 14pt
- 채우기 문자: "-"(대시)
- 채우기 문자 표시: True
3. +**항목 추가**를 클릭하여 **목차**에 (제목을 표시할) **Level2**를 추가하고 다음 속성을 설정합니다.
- 글꼴 크기: 10pt
- 안쪽 여백: 5pt(왼쪽)
- 채우기 문자: "."(점)
- 채우기 문자 표시: True
4. **보고서 탐색기**에서 **보고서**를 선택하고 문서 맵 속성을 다음과 같이 설정합니다.
- 수준: 드롭다운에서 스타일을 설정합니다.
- 수준.0: A,B,C,D,E
- 수준.1: 1,2,3,4,5
- 소스: 제목
5. 값이 `[GenreName]`인 텍스트 상자를 선택하고 **제목 수준** 속성을 1로 설정합니다.
6. 미리 봅니다.
### 레이블 속성을 사용하여 목차에 항목 추가
보고서에서 컨트롤의 레이블 속성을 설정하면 문서 맵의 컨트롤 간 부모-자식 관계를 바탕으로 계층 구조를 표시할 수 있습니다. 예를 들어, 목록 데이터 영역의 레이블 속성이 설정되어 있고 텍스트 상자 컨트롤이 목록 데이터 영역 내에 배치되어 있으면 텍스트 상자 레이블은 목록 데이터 영역 레이블 내에 중첩된 것으로 나타나 계층 구조가 표시됩니다.
1. **목차** 컨트롤을 보고서 맨 위로 끌어서 놓습니다. 보고서의 모서리를 클릭한 상태로 끌어 크기를 조정합니다.
2. 목차 내 수준의 속성을 설정하기 위해 ["제목 수준 속성을 사용하여 목차에 항목 추가"](/activereportsjs/docs/v4.1/#section) 섹션의 2단계와 3단계를 수행합니다.
3. **보고서 탐색기**에서 **보고서**를 선택하고 **문서 맵 > 소스** 속성을 '레이블'로 설정합니다.
4. **List1** 데이터 영역을 선택하고 **레이블** 속성을 `=Fields!GenreName.Value`로 설정하여 이 영역이 목차의 **Level1**에 표시되도록 합니다.
>**참고**: 레이블을 사용하여 매핑된 목차에는 번호가 매겨지지 않습니다. 이 경우 목차에 번호 매기기를 추가하려면 목록 데이터 영역의 **레이블** 속성에서 **DocumentMap.Path** 식을 사용해야 합니다. 예를 들어, 첫 번째 수준(GenreName)에 번호 매기기를 추가하려면 List1 데이터 영역을 선택하고 레이블 속성을 `=DocumentMap.Path & ". " & Fields!GenreName.Value`로 설정합니다.
5. 마찬가지로, **List2** 데이터 영역을 선택하고, 그 **레이블** 속성을 `=Fields!Title.Value`로 설정하여 목차의 **Level2**에 표시되도록 합니다.
6. 미리 봅니다.
### 관련 링크
- [목차 데모](/activereportsjs/demos/Reports/TOC/purejs)