# 목록

## Content

`목록` 보고서 항목은 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 또는 자유 형식 레이아웃으로 정렬된 [이미지](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/Image) 등 [데이터 시각화 도우미](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers)가 포함된 일련의 섹션을 생성하여 바인딩된 데이터를 시각화하는 [데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions)입니다.

일반적으로 `목록`은 [중첩된 데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#nested-data-regions)으로 사용되어 단일 데이터 레코드 내에서 항목 컬렉션을 표시합니다. 예를 들어, [표 내의 목록 데모](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs)에서는 제품 [표](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) 내에서 `목록`을 사용하여 가격 내역을 표시합니다.

### 목록 추가

[도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)에서 해당 항목을 두 번 클릭하거나 [표 셀](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-cells)과 같은 부모 컨테이너로 끌어 놓아 보고서에 `목록`을 추가할 수 있습니다.

### 목록 레이아웃 구성

`목록` 데이터 영역은 일련의 섹션을 표시하며, 각 섹션은 바인딩된 데이터 집합의 레코드를 나타냅니다. 이러한 섹션의 모양은 다음 옵션이 있는 `증가 방향` 속성으로 제어할 수 있습니다.

* `세로` – 이 옵션은 섹션을 그리드 패턴으로 정렬하여 먼저 페이지의 열을 왼쪽에서 오른쪽으로 채운 다음 다음 행으로 이동합니다. `행 또는 열의 갯수` 속성은 각 행에 표시해야 하는 열 수를 결정합니다. 아래 그림은 `세로` 레이아웃과 세 개의 열이 있는 목록을 보여줍니다.
    ![list1](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/85453172-7356-41cf-a9c1-0b4850348268/list1.1f03de.png)
* `세로 역순` – `세로`와 비슷하게, 이 옵션은 그리드 패턴으로 섹션을 정렬합니다. 그러나 열은 오른쪽에서 왼쪽으로 채워진 후에 다음 행으로 이동합니다. 아래 그림은 `세로 역순` 레이아웃과 세 개의 열이 있는 목록을 보여줍니다.
    ![list2](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/85453172-7356-41cf-a9c1-0b4850348268/list2.b13ab0.png)
* `가로` – 이 옵션은 섹션을 간단한 위에서 아래로, 왼쪽에서 오른쪽으로 정렬합니다. `행 또는 열의 갯수` 속성은 각 열에 몇 개의 행이 나타나야 하는지 결정합니다. 아래 그림은 `가로` 레이아웃과 세 개의 행이 있는 목록을 보여줍니다.
    ![list3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/85453172-7356-41cf-a9c1-0b4850348268/list3.b93d3b.png)
* `가로 역순` – 이 옵션은 섹션을 아래에서 위로, 왼쪽에서 오른쪽으로 정렬합니다. `행 또는 열의 수` 속성은 각 열에 몇 개의 행이 나타나야 하는지 결정합니다. 아래 그림은 `가로 역순` 레이아웃과 세 개의 행이 있는 목록을 보여줍니다.
    ![list4](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/85453172-7356-41cf-a9c1-0b4850348268/list4.d5dafc.png)

`연속 레이아웃`과 `고정 레이아웃`에서 목록 콘텐츠는 각각 목록의 `페이지 크기` 또는 `고정 크기`의 한계에 도달하면 다음 페이지로 이동합니다. 레이아웃 유형에 대한 자세한 내용은 [레이아웃 유형 페이지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/Report-Layouts)에서 확인할 수 있습니다.

### 목록 디자이너

`목록` 디자이너는 [데이터 집합 필터](/activereportsjs/docs/ReportAuthorGuide/Databinding#data-set-filters)와 [데이터 영역 필터](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#common-properties)를 통과한 각 [바인딩된 데이터 집합](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#data-set-name) 레코드에 대해 반복되는 `섹션`의 내용 및 스타일을 결정합니다. 예를 들어, [표 내 목록](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs)의 `가격 내역` 목록에는 `ProductListPriceHistories` 데이터 집합 레코드의 날짜 기간과 가격을 표시하는 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox)가 2개 포함되어 있습니다.

[기본 보고서 항목 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties)과 [데이터 영역 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#common-properties)으로 구성된 일반적인 목록 구성은 [속성](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#properties-panel) 패널의 `섹션` 속성과 결합됩니다.

### 섹션 구성

`섹션` 구성에는 [공통 스타일 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility), [페이지 나누기](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#page-break)와 다음 특정 속성이 포함되어 있습니다.

* `공백 사용` 플래그는 콘텐츠가 사용하는 것보다 여유 공간이 더 있는 경우 섹션 인스턴스가 공백을 제거해야 할지 여부를 나타냅니다.
* `함께 유지` 플래그는 섹션 인스턴스가 맞는 경우 항상 단일 페이지에 나타나도록 합니다.
* `작업` 속성은 보고서 독자가 섹션이 차지하는 공간을 클릭할 때 발생하는 [대화형 동작](/activereportsjs/docs/ReportAuthorGuide/Interactivity)을 결정합니다.

### 목록 그룹화

섹션이 그룹화 값당 한 번 나타나도록 `목록` 내에서 데이터 레코드를 그룹화할 수 있습니다. 이 속성은 계층적 데이터 구조를 표시하는 데 유용할 수 있습니다. 이러한 접근 방식의 예는 [중첩된 목록의 예](/activereportsjs/demos/Reports/NestedDataRegions/purejs)에서 찾을 수 있습니다. 그룹 구성에는 다음 속성이 포함됩니다.

* `그룹 이름`은 그룹 `ID`입니다.
* `그룹 식`은 [바운딩된 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)의 [컬렉션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#collection) 또는 고급 식입니다. 그룹 식의 고유한 값은 `그룹화 값`을 생성합니다.
* `레이블` [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 [보고서 맵](/activereportsjs/docs/ReportAuthorGuide/Interactivity#report-map)에 있는 그룹화 값 링크의 텍스트를 결정합니다. [중첩된 목록의 예](/activereportsjs/demos/Reports/NestedDataRegions/purejs)에서는 이 속성을 사용합니다.
* [필터 편집기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#filters-editor)에서는 특정 그룹화 값을 필터링할 수 있습니다. 예를 들어, `중첩된 목록의 예` 출력에서 `Nintendo` 게시자를 제외하려는 경우 `게시자` 목록의 `그룹`에 대해 다음 필터를 추가할 수 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/List/group-filter.png)

* `새 섹션` 플래그는 각 그룹화 값에 페이지 번호 매기기 적용 여부를 결정합니다. 자세한 내용은 [전역 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#page-numbering) 문서를 확인하십시오.