티저 구성 요소

핵심 구성 요소의 티저 구성 요소에 이미지, 제목, 서식 있는 텍스트 및 추가 콘텐츠 링크(선택 사항)가 표시될 수 있습니다.

사용량

콘텐츠 작성자는 티저 구성 요소를 통해 이미지, 제목이나 서식 있는 텍스트와 추가 콘텐트 링크 또는 기타 작업을 통해 티저를 손쉽게 제작할 수 있습니다.

템플릿 작성자는 디자인 대화 상자를 통해 콜 투 액션을 만들고 링크를 추가하는 옵션을 사용할 수 있는지, 여러 디스플레이 옵션을 활성화할 수 있는지 정의할 수 있습니다. 콘텐츠 작성자는 구성 대화 상자를 통해 이미지를 설정하고, CTA를 정의하고, 제목 및 설명을 설정하고 링크를 개별 티저로 구성할 수 있습니다. 이미지 구성 요소의 편집 대화 상자에 액세스하여 티저 이미지를 수정할 수 있습니다.

버전 및 호환성

현재 버전의 티저 구성 요소는 2018년 7월 핵심 구성 요소 릴리스 2.1.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

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

샘플 구성 요소 출력

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

기술 세부 사항

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

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

구성 대화 상자

콘텐츠 작성자는 구성 대화 상자를 통해 개별 티저의 속성을 정의할 수 있습니다. 이미지가 선택된 경우 편집 대화 상자에서도 티저 이미지를 수정할 수 있습니다.

이미지

• 이미지 에셋
  • 에셋 브라우저에서 에셋을 삭제하거나 검색 옵션을 탭하여 로컬 파일 시스템에서 로드합니다.
  • 지우기​를 탭하거나 클릭하여 현재 선택된 이미지 선택을 해제합니다.
  • 편집​을 탭하거나 클릭하여 에셋 편집기에서 에셋 렌디션을 관리합니다.

텍스트

• 사전 제목 - 사전 제목은 티저 제목 앞에 표시될 수 있습니다.
• 제목 유형 - 티저의 헤드라인으로 표시할 제목을 정의합니다.
  • 링크된 페이지에서 제목 다운로드 - 확인된 경우 제목은 링크된 페이지 제목으로 채워집니다.
• 설명 - 티저의 하위 머리글로 표시할 설명을 정의합니다.
  • 링크된 페이지에서 설명 다운로드 - 확인된 경우 제목은 링크된 페이지 설명으로 채워집니다.
• ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
  • 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
  • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
  • ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.

링크 및 작업

• 링크 - 티저에 적용되는 링크. 경로 브라우저를 사용하여 링크 대상을 선택합니다.
• 콜 투 액션 활성화 - 확인 시 콜 투 액션의 정의를 활성화합니다. 목록의 첫 번째 콜 투 액션 링크는 다른 티저 요소의 링크로 사용됩니다.

편집 대화 상자

티저 구성 요소는 이미지 렌더링을 이미지 구성 요소로 전달합니다. 따라서 콘텐츠 작성자는 이미지 구성 요소의 편집 대화 상자를 티저 이미지를 조작하는 데 사용할 수 있습니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 통해 구성 요소 사용 시 필요한 티저 옵션을 정의할 수 있습니다.

티저 탭

• 콜 투 액션
  • 콜 투 액션 비활성화 - 콘텐츠 작성자를 위한 콜 투 액션 옵션을 숨깁니다.
• 요소
  • 사전 제목 숨기기 - 콘텐츠 작성자를 위한 사전 제목​을 숨깁니다.
  • 제목 숨기기 - 콘텐츠 작성자를 위한 제목​을 숨깁니다.
    • 선택한 경우 제목 유형​을 숨깁니다.
  • 설명 숨기기 - 콘텐츠 작성자를 위한 설명​을 숨깁니다.
• 제목 유형 - 티저의 제목에 사용될 H 태그를 정의합니다.
• 링크
  • 이미지가 연결되지 않음 - 선택한 경우 티저 이미지는 연결되지 않습니다.
  • 제목이 연결되지 않음 - 선택한 경우 티저 제목이 연결되지 않습니다.
• 이미지 전달 - 이미지 처리 시 티저가 전달하는 구성 요소의 정보가 표시됩니다.

스타일 탭

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

Adobe 클라이언트 데이터 레이어

티저 구성 요소는 Adobe 클라이언트 데이터 레이어를 지원합니다.