구성 요소 나열

핵심 구성 요소 목록 구성 요소를 사용하면 정적 목록뿐만 아니라 동적 목록을 쉽게 만들 수 있습니다.

사용량

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

버전 및 호환성

목록 구성 요소의 현재 버전은 v2이며, 2018년 1월 핵심 구성 요소 릴리스 2.0.0에 도입되었으며 이 문서에 설명되어 있습니다.

다음 표에서는 구성 요소의 지원되는 모든 버전, 구성 요소 버전이 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 설명합니다.

구성 요소 버전 AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 호환 가능 호환 가능 호환 가능
v1 호환 가능 호환 가능 -

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전 문서를 참조하십시오.

샘플 구성 요소 출력

목록 구성 요소를 경험할 수 있을 뿐만 아니라 구성 옵션의 예 및 HTML 및 JSON 출력을 보려면 구성 요소 라이브러리를 방문하십시오.

기술 세부 정보

목록 구성 요소 에 대한 최신 기술 문서는 GitHub에서 찾을 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서에서 확인할 수 있습니다.

편집 대화 상자

편집 대화 상자를 사용하면 컨텐츠 작성자가 목록과 목록 항목을 구성할 수 있습니다.

목록 설정 탭

목록은 다른 방법으로 작성할 수 있습니다.

목록이 작성되는 방식에 관계없이 항상 구성할 수 있는 정렬 및 ID 옵션이 있습니다.

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

컨텐츠 작성자가 목록 작성을 선택하는 방법에 따라 추가 구성 옵션이 변경됩니다.

하위 페이지

목록은 현재 페이지 또는 다른 페이지의 하위 페이지로 작성할 수 있습니다.

하위 페이지 옵션

  • 상위 페이지

    • 하위 페이지가 목록에 포함되어야 하는 페이지
    • 현재 페이지를 사용하려면 비워 둡니다.
  • 하위
    깊이계층 구조에서 하위 수준 몇 개를 사용해야 합니까?

고정 목록

고정된 항목 목록을 사용하여 목록을 작성할 수 있습니다.

고정 목록 옵션

목록에 새 항목을 삽입하려면 추가 단추를 탭하거나 클릭합니다.

  • 목록에 있는 항목의 텍스트를 입력하거나 선택 대화 상자​를 사용하여 AEM에서 항목을 선택합니다.
  • 드래그 핸들을 사용하여 목록의 항목을 다시 정렬합니다.
  • 목록에서 항목을 삭제하려면 휴지통 아이콘을 사용합니다.

검색

AEM 컨텐츠 검색 결과를 사용하여 목록을 작성할 수 있습니다.

검색 목록 옵션

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

태그

특정 위치 아래의 특정 태그와 일치하는 페이지를 사용하여 목록을 작성할 수 있습니다.

태그 목록 옵션

  • 상위
    페이지태그 일치를 시작해야 하는 위치
    • 선택 대화 상자​를 사용하여 AEM에서 위치를 선택합니다.
    • 현재 페이지를 비워 둘 경우 사용
  • 태그
    일치해야 하는 태그
    • 찾아보기 대화 상자를 사용하여 태그를 선택합니다

  • 일치목록에 포함할 페이지의 자격을 규정하는 일치 유형을 정의합니다.
    • 임의의 태그
    • 모든 태그

정렬 옵션

목록 작성 방법에 관계없이 항상 정의할 수 있는 특정 정렬 옵션이 있습니다.

정렬 옵션

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

항목 설정 탭

항목 설정 탭을 사용하여 목록 요소의 서식을 구성할 수 있습니다.

항목 설정

  • 항목
    연결항목을 해당 페이지에 연결
  • 설명
    표시링크 항목의 설명 표시
  • 날짜
    표시링크 항목의 수정 날짜 표시

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 통해 사용 가능한 항목 설정과 컨텐츠 작성자에게 허용해야 하는 목록 유형을 정의할 수 있습니다.

목록 설정

목록 설정 탭에서 날짜 형식을 정의할 수 있을 뿐만 아니라 컨텐츠 작성자가 구성 요소에서 사용할 수 있는 목록 유형을 정의할 수 있습니다.

목록 구성 요소의 디자인 대화 상자 목록 설정

  • 날짜
    형식마지막 수정 날짜 표시에 사용할 형식
  • 하위
    항목 비활성화구성 요소의 하위 목록 유형 비활성화
  • 정적
    비활성화 구성 요소에서 정적 목록 유형 비활성화
  • 검색
    비활성화구성 요소에서 검색 목록 유형 비활성화
  • 태그
    비활성화구성 요소에서 태그 목록 유형 비활성화

항목 설정

항목 설정 탭에서 컨텐츠 작성자에 대한 구성 요소에서 사용할 수 있어야 하는 개별 목록 요소의 서식 옵션을 정의할 수 있습니다.

구성 요소의 디자인 대화 상자 항목 설정 나열

스타일 탭

이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.

이 페이지에서는