목록 구성 요소 (v2)

마지막 업데이트: 2024년 7월 13일

주제:
핵심 구성 요소

작성 대상:

개발자
관리자
사용자

핵심 구성 요소의 목록 구성 요소를 사용하여 동적 목록과 정적 목록을 간단히 만들 수 있습니다.

사용

목록 구성 요소를 사용하여 하위 페이지에 대한 동적 목록 또는 임의로 정의된 항목에 대한 정적 목록을 만들 수 있습니다. 템플릿 작성자는 디자인 대화 상자에서 사용 가능한 목록 유형 및 서식 지정 옵션을 정의할 수 있습니다. 콘텐츠 편집기는 편집 대화 상자에서 사용 가능한 목록 유형 및 목록 요소 서식 지정 방법을 선택할 수 있습니다.

버전 및 호환성

목록 구성 요소는 2018년 1월 핵심 구성 요소 릴리스 2.0.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

CAUTION

이 문서에서는 목록 구성 요소 v2에 대해 설명합니다.

현재 버전의 목록 구성 요소에 대한 자세한 내용은 목록 구성 요소 문서를 참조하십시오.

목록에서 리디렉션

페이지에 리디렉션 대상이 있으면(외부 URL 또는 다른 AEM 페이지 지정 여부에 관계없이) 목록에는 리디렉션 대상의 URL을 직접 지정하는 링크가 포함됩니다.

예

페이지 B로 리디렉션하는 페이지 A를 만듭니다.
https://aemcomponents.dev로 리디렉션하는 페이지 C를 만듭니다.
페이지 D에서 페이지 A 및 C가 포함된 목록 구성 요소를 삽입합니다.
그때 생성된 해당 링크는 페이지 B 및 https://aemcomponents.dev를 직접 지정합니다.

샘플 구성 요소 출력

목록 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.

기술 세부 정보

목록 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

편집 대화 상자

콘텐츠 작성자는 편집 대화 상자를 통해 목록 및 목록 항목을 구성할 수 있습니다.

목록 설정 탭

다른 방식으로 목록을 빌드할 수 있습니다.

하위 페이지
고정 목록
검색
태그

목록의 빌드 방법에 관계없이 언제든지 구성할 수 있는 정렬 및 ID 옵션이 있습니다.

목록 구성 요소의 편집 대화 상자

콘텐츠 작성자의 목록 빌드 선택에 따라 추가 구성 옵션이 변경됩니다.

하위 페이지

현재 페이지나 다른 페이지의 하위 페이지에서 목록을 빌드할 수 있습니다.

하위 페이지 옵션

상위 페이지
- 목록을 작성하는 페이지의 하위 페이지
- 현재 페이지를 사용하려면 비워 둡니다.
하위 깊이
사용되는 계층 구조의 레벨 횟수

고정 목록

항목의 고정 목록 통해 목록을 빌드할 수 있습니다.

고정 목록 옵션

추가 버튼을 탭하거나 클릭하여 새 항목을 목록에 삽입합니다.

목록에 항목의 텍스트를 입력하거나 선택 대화 상자 를 사용하여 AEM에서 항목을 선택합니다.
드래그 핸들을 사용하여 목록의 항목을 재배열합니다.
휴지통을 사용하여 목록에서 항목을 삭제합니다.

검색

AEM 콘텐츠 검색 결과를 통해 목록을 빌드할 수 있습니다.

검색 목록 옵션

검색 쿼리
전체 텍스트 검색에 대한 문자열을 실행하여 목록 요소를 생성합니다.
검색
검색이 실행되는 위치
- 선택 대화 상자 를 사용하여 AEM에서 위치를 선택합니다.
- 비워 두면 현재 페이지를 사용합니다.

상위 페이지
태그 일치의 시작 위치
- 선택 대화 상자 를 사용하여 AEM에서 위치를 선택합니다.
- 비워 두면 현재 페이지를 사용합니다.
태그
태그가 일치하는 위치
- 검색 대화 상자를 통해 태그를 선택합니다.
일치
목록에 포함되는 페이지의 자격을 충족하는 일치 유형을 정의합니다.
- 임의의 태그
- 모든 태그

정렬 옵션

목록의 빌드 방법에 관계없이 언제든지 정의할 수 있는 특정 정렬 옵션이 있습니다.

정렬 옵션

항목별 순서
요소 순서를 변경하는 방법
- 제목
- 마지막으로 수정한 날짜
항목별 순서
항목을 지정하는 순서
- 오름차순
- 내림차순
최대 항목 - 목록에 표시되는 최대 항목 수
- 모든 항목을 반환하려면 비워 둡니다.
ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
- 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
- ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
- ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.