Show Menu
화제×

테마 만들기 및 사용

소개

테마를 만들어 적용하여 적응형 양식이나 인터랙티브한 커뮤니케이션을 스타일화할 수 있습니다. 테마는 구성 요소 및 패널에 대한 스타일 세부 사항을 포함합니다. 스타일은 배경색, 상태 색상, 투명도, 정렬 및 크기와 같은 속성을 포함합니다. 테마를 적용하면 지정된 스타일이 해당 구성 요소에 반영됩니다. 테마는 적응형 양식이나 인터랙티브한 커뮤니케이션에 대한 참조 없이 독립적으로 관리됩니다.
다음을 작업을 수행할 수 있습니다.
  • 테마 만들기
  • 기존 테마 편집 및 복사
  • AEM Forms 서버에 기존 테마 다운로드 및 업로드
  • 테마에 대한 종속성 관리

테마 만들기, 다운로드 또는 업로드

AEM Forms를 사용하여 테마를 만들거나, 다운로드하거나, 업로드할 수 있습니다. 테마는 양식, 문서 및 문자와 같은 다른 자산과 같이 만들어집니다. 테마는 양식과 같은 메타 속성이 포함된 별도의 엔티티로 저장됩니다. 테마는 별도의 엔티티이므로 여러 적응형 양식과 인터랙티브한 커뮤니케이션에서 재사용할 수 있습니다. 테마를 다른 AEM Forms 인스턴스로 이동하고 재사용할 수도 있습니다.

테마 만들기

테마를 만들려면 다음 단계를 수행하십시오.
  1. Adobe Experience Manager를 ​클릭하고 양식을 ​클릭한 다음 테마를 클릭합니다 .
  2. 테마 페이지에서 만들기 > 테마를 클릭합니다 .
    테마 만들기 마법사가 실행됩니다.
  3. 테마 만들기 마법사의 기본 탭에서 테마의 제목 이름을 제공합니다. 필수 필드입니다.
  4. 고급 탭에서 다음 두 필드를 사용할 수 있습니다.
    • Clientlib 위치 :테마에 대한 clientlibs를 저장하는 저장소의 위치입니다.
    • Clientlib 범주 :테마의 clientlib 범주 이름을 입력할 텍스트 필드를 제공합니다.
  5. 만들기를 클릭한 다음 편집을 클릭하여 테마 편집기에서 테마를 열거나 완료를 클릭하여 테마 페이지로 돌아갑니다.

테마 다운로드

테마를 zip 파일로 내보내고 다른 프로젝트 또는 AEM 인스턴스에서 사용할 수 있습니다. 테마를 다운로드하려면
  1. Adobe Experience Manager를 ​클릭하고 양식을 ​클릭한 다음 테마를 클릭합니다 .
  2. 테마 페이지에서 테마를 선택하고 다운로드를 클릭합니다 . 테마의 세부 사항이 있는 대화 상자가 표시됩니다.
  3. 다운로드를 클릭합니다 . 테마가 zip 파일로 다운로드됩니다.
연결된 적응형 양식이 있는 테마를 다운로드하고 관련 적응형 양식이 사용자 지정 템플릿을 기반으로 하는 경우 사용자 지정 템플릿도 다운로드합니다. 다운로드한 테마 및 적응형 양식을 AEM Forms 서버에 업로드한 다음 관련 사용자 지정 템플릿도 업로드합니다.

테마 업로드

프로젝트에서 스타일 사전 설정과 함께 생성된 테마를 사용할 수 있습니다. 다른 사람이 만든 테마 패키지를 프로젝트에 업로드하여 가져올 수 있습니다.
테마를 업로드하려면
  1. Adobe Experience Manager를 ​클릭하고 양식을 ​클릭한 다음 테마를 클릭합니다 .
  2. 테마 페이지에서 만들기 > 파일 업로드를 클릭합니다 .
  3. 파일 업로드 프롬프트에서 컴퓨터에서 테마 패키지를 찾아 선택하고 업로드를 클릭합니다 .
    업로드된 테마는 테마 페이지에서 사용할 수 있습니다.

테마 메타데이터

테마의 메타 속성 목록(테마의 속성 페이지에 있음).
ID
이름 편집 가능 속성 설명
1. 제목 테마의 표시 이름입니다.
2. 설명 테마에 대한 설명입니다.
3. 유형 아니오
  • 자산의 유형입니다.
  • 값은 항상 테마입니다.
4. 작성일 아니오 테마 생성 날짜
5. 작성자 이름 테마 작성자. 테마를 만들 때 계산되었습니다.
6. 마지막 수정 날짜 아니오 테마를 마지막으로 수정한 날짜입니다.
7. 상태 아니오 테마 상태(수정됨/게시됨).
8. 시간에 게시 테마를 자동으로 게시할 시간입니다.
9. 게시 오프 시간 테마를 자동으로 게시 취소할 시간입니다.
10. 태그 검색을 향상시키는 데 사용되는 식별을 위해 테마에 첨부된 레이블입니다.
11. 참조 링크
  • '참조자' 섹션을 포함합니다. 테마를 사용하는 양식을 나열합니다.
  • 테마가 다른 자산을 참조하지 않으므로 '참조' 섹션이 없습니다.
12. Clientlib 위치
  • 이 테마에 해당하는 clientlibs가 저장되는 '/etc' 내의 사용자 정의 저장소 경로입니다.
  • 기본값 - '/etc/clientlibs/fd/themes' + 테마 자산의 상대 경로.
  • 위치가 존재하지 않으면 폴더 계층 구조가 자동으로 생성됩니다.
  • 이 값이 변경되면 clientlib 노드 구조가 입력한 새 위치로 이동됩니다. 참고 사항:기본 clientlib 위치를 변경하는 경우, CRXDE 보관소에서 crx:replicate, rep:write, rep:glob:*, rep:itemNames:: js.txt, jcr:read forms-users 위치에 및 crx:replicate jcr:read 을 지정합니다 fd-service . 또한 거부 jcr:addChildNodes를 forms-user
13. Clientlib 카테고리 이름
  • 이 테마의 사용자 정의 clientlib 범주 이름입니다.
  • 이름이 이미 다른 기존 테마에서 사용 중인 경우 오류가 표시됩니다.
  • 기본값 - 테마 위치를 사용하여 계산됩니다.
  • 이 값이 변경되면 해당 clientlib 노드에서 카테고리 이름이 업데이트됩니다. clientlib 카테고리 이름이 참조에 사용되므로 jsp 파일에서 Clientlib 카테고리 이름을 업데이트할 필요가 없습니다.

테마 편집기 정보

AEM Forms는 테마 편집기와 함께 제공됩니다. 다양한 적응형 양식 및 인터랙티브한 커뮤니케이션 요소의 스타일을 손쉽게 지정하는 데 필요한 기능을 제공하는 비즈니스 사용자 및 웹 디자이너/개발자 친화적인 인터페이스입니다. 테마를 만들면 양식, 인터랙티브 커뮤니케이션, 문자, 문서 조각 및 데이터 사전과 같은 별도의 엔티티로 저장됩니다.
테마 편집기를 사용하면 테마에 스타일이 지정된 구성 요소의 스타일을 사용자 정의할 수 있습니다. 장치에서 양식이나 인터랙티브한 통신이 어떻게 보이는지 사용자 정의할 수 있습니다.
테마 편집기는 두 개의 패널로 구분됩니다.
  • 캔버스 - 오른쪽에 나타납니다. 모든 스타일 변경 사항이 즉시 반영되는 적응형 양식 또는 인터랙티브한 커뮤니케이션의 예를 보여줍니다. 캔버스에서 직접 개체를 선택하여 개체와 관련된 스타일을 조회하고 이러한 스타일을 편집할 수도 있습니다. 맨 위의 장치 해상도 눈금자가 캔버스를 제어합니다. 눈금자에서 해상도 중단점을 선택하면 샘플 양식의 미리 보기 또는 각 해상도에 대한 대화형 통신이 표시됩니다. 캔버스는 아래에 자세히 설명되어 있습니다.
  • 사이드바 - 왼쪽에 나타납니다. 다음과 같은 항목이 있습니다.
    • ​선택기:스타일링을 위해 선택한 구성 요소와 스타일을 지정할 수 있는 해당 속성을 표시합니다. 선택기는 유형의 모든 구성 요소를 나타냅니다. 테마에서 스타일 지정을 위해 텍스트 상자 구성 요소를 선택하면 양식이나 대화형 통신에 있는 모든 텍스트 상자가 스타일을 상속합니다. 선택기를 사용하면 일반 구성 요소나 스타일 지정을 위한 특정 구성 요소를 선택할 수 있습니다. 예를 들어 필드 구성 요소는 일반 구성 요소이고 텍스트 상자는 특정 구성 요소입니다.
      스타일 일반 구성 요소:
      필드는 페이지와 같은 숫자 상자 필드이거나 주소와 같은 텍스트 상자 필드일 수 있습니다.
      필드의 스타일을 지정하면 연령, 이름, 주소와 같은 모든 필드의 스타일이 지정됩니다.
      스타일 지정 특정 구성 요소 :
      특정 구성 요소는 특정 범주의 개체에 영향을 줍니다. 테마에서 숫자 상자 구성 요소의 스타일을 지정할 때 에 있는 숫자 상자 개체만 스타일을 상속합니다.
      예를 들어 주소와 같은 텍스트 상자 필드의 길이가 길며, 페이지와 같은 숫자 상자 필드의 길이가 짧습니다. 숫자 상자 필드를 선택하고 길이를 줄이고 양식에 적용할 수 있습니다. 모든 숫자 상자 필드의 너비가 양식에서 줄어듭니다.
      특정 배경색을 사용하여 모든 필드 구성 요소를 사용자 지정하면 연령, 이름 및 주소와 같은 모든 필드가 배경색을 상속합니다. 페이지와 같은 숫자 상자를 선택하고 너비와 연령 등 모든 숫자 상자의 너비를 줄이면 패밀리의 사람 수가 줄어듭니다. 텍스트 상자의 너비는 변경되지 않습니다.
    • ​상태:객체의 스타일을 특정 상태로 사용자 정의할 수 있습니다. 예를 들어, 개체가 기본, 포커스, 비활성화, 호버 또는 오류 상태일 때 표시되는 방식을 지정할 수 있습니다.
    • ​속성 카테고리:스타일 속성은 다양한 카테고리로 분할됩니다. 크기 및 위치, 텍스트, 배경, 테두리 및 효과 등 각 카테고리 아래에서 스타일 정보를 제공합니다. 예를 들어 배경에서 배경색, 이미지 및 그라디언트를 제공할 수 있습니다.
    • ​고급:사용자 정의 CSS를 개체에 추가할 수 있으므로 겹치는 경우 정의된 시각적 컨트롤을 무시합니다.
    • CSS 보기 :선택한 구성 요소의 CSS를 볼 수 있습니다. 또한 세로 막대의 맨 아래에 화살표가 있습니다. 화살표를 클릭하면 두 가지 옵션이 더 제공됩니다.성공을 시뮬레이션하고 오류를 시뮬레이션합니다. 이러한 옵션은 위에서 설명한 옵션과 함께 아래에 자세히 설명되어 있습니다.
    레일 A. A.사이드바 B.캔버스

스타일 구성 요소

테마에 지정한 구성 요소 서식을 가져오는 여러 적응형 양식 및 대화형 커뮤니케이션에서 테마를 사용할 수 있습니다. 제목, 설명, 패널, 필드, 아이콘, 텍스트 상자 등 다양한 구성 요소의 스타일을 지정할 수 있습니다. 위젯을 사용하여 테마에서 구성 요소 속성을 구성합니다. CSS 무시 섹션을 사용하여 CSS 코드를 작성하거나 사용자 정의 선택기를 제공할 수 있지만 CSS 또는 LESS에 대한 사전 지식이 반드시 필요한 것은 아닙니다. 세로 막대에서 구성 요소를 선택하면 CSS 무시 섹션이 나타납니다.
다양한 구성 요소를 선택하고 스타일을 지정할 수 있는 세로 막대의 옵션.
세로 막대의 구성 요소에 대해 편집 단추를 클릭하면 캔버스의 구성 요소가 선택되고 세로 막대의 옵션을 사용하여 구성 요소의 스타일을 지정할 수 있습니다.
텍스트 상자, 숫자 상자, 라디오 단추 및 확인란과 같은 특정 구성 요소는 필드와 같은 일반 구성 요소 아래에 분류됩니다. 예를 들어 라디오 단추의 스타일을 사용자 정의할 수 있습니다. 스타일링할 라디오 단추를 선택하려면 필드 > 위젯 > 라디오 단추를 선택합니다 .
세로 **막대에서 #을 클릭하여 앞에 보이지 않는 분류된 구성 요소를 보고 선택하고 스타일을 지정합니다.

스타일 패널 레이아웃

AEM Forms의 테마는 양식의 패널 레이아웃에서 요소 스타일링 및 인터랙티브한 커뮤니케이션을 지원합니다. 기본 레이아웃의 요소 스타일 및 사용자 정의 레이아웃이 지원됩니다.
기본 패널에는 다음이 포함되어 있습니다.
  • 왼쪽 탭
  • 상단 탭
  • 어코디언
  • 응답형
  • 마법사
  • 모바일 레이아웃
    • 머리글의 패널 제목
    • 헤더에 패널 제목 없음
선택기는 각 레이아웃에 따라 다릅니다. 테마 편집기에서 사용자 정의 레이아웃 스타일 지정에는 다음이 포함됩니다.
  • 스타일을 지정할 수 있는 레이아웃의 구성 요소 정의 및 이러한 구성 요소를 고유하게 식별하는 CSS 선택기
  • 이러한 구성 요소에 적용할 수 있는 CSS 속성 정의
  • 사용자 인터페이스에서 이러한 구성 요소의 스타일을 인터랙티브하게 정의

다양한 화면 크기에 맞는 스타일

데스크탑 및 모바일 레이아웃의 스타일은 약간 또는 완전히 다를 수 있습니다. 모바일 장치의 경우 태블릿 및 휴대폰은 구성 요소 크기를 제외하고 유사한 레이아웃을 공유합니다.
테마 편집기 중단점을 사용하여 다양한 화면 크기에 맞는 대체 스타일링을 정의할 수 있습니다. 테마를 작성하기 시작할 기본 장치 또는 해상도를 선택할 수 있으며 다른 해상도에 대한 스타일 변형이 자동으로 생성됩니다. 모든 해상도의 스타일을 명시적으로 수정할 수 있습니다.
테마는 먼저 양식이나 대화형 통신을 사용하여 만든 다음 다른 양식이나 대화형 통신에 적용됩니다. 테마 제작에 사용되는 중단점은 테마가 적용되는 양식이나 대화형 통신과 다를 수 있습니다. CSS 미디어 쿼리는 테마가 적용되는 양식이나 인터랙티브한 통신이 아니라 테마 제작에 사용되는 양식이나 인터랙티브한 커뮤니케이션을 기반으로 합니다.

개체 선택 시 세로 막대의 스타일 속성 컨텍스트 변경

캔버스에서 구성 요소를 선택하면 해당 스타일 속성이 세로 막대에 나열됩니다. 개체 유형과 해당 상태를 선택한 다음 스타일링을 제공합니다.

테마 편집기에서 최근에 사용한 스타일

테마 편집기는 구성 요소에 적용된 최대 10개의 스타일을 캐시합니다. 캐시된 스타일을 테마의 다른 구성 요소와 함께 사용할 수 있습니다. 사이드바에서 선택한 구성 요소 바로 아래에 목록 상자로 최근에 사용한 스타일을 사용할 수 있습니다. 처음에는 최근에 사용한 스타일 목록이 비어 있습니다.
구성 요소의 스타일을 지정하면 스타일이 캐시되어 목록 상자에 나열됩니다. 이 예제에서는 텍스트 상자의 레이블에 글꼴 크기와 색상을 변경할 수 있도록 스타일이 지정됩니다. 이미지를 선택하거나 색상을 변경하여 구성 요소의 스타일을 지정할 때 비슷한 단계를 수행할 수 있습니다. 필드 레이블 스타일이 변경될 때 스타일이 캐시되어 목록 상자에 나열되는 방식을 확인합니다.
이 예에서는 필드 레이블의 스타일이 변경되고, 스타일을 위해 #을 선택하면 자산 라이브러리에 목록 항목이 추가됩니다. 자산 라이브러리의 항목을 사용하여 반응형 패널 설명의 스타일을 변경할 수 있습니다.
에셋 라이브러리에 스타일이 추가되면 다른 테마와 양식 편집기 또는 대화형 통신 편집기 UI의 스타일 모드에서 스타일을 사용할 수 있습니다. 마찬가지로 양식 편집기 또는 대화형 통신 편집기 UI의 스타일 모드를 사용하여 구성 요소의 스타일을 지정하면 스타일이 캐시되고 테마에서 사용할 수 있습니다.
자산 라이브러리에 대한 더하기 단추를 사용하면 입력한 이름으로 스타일을 영구적으로 저장할 수 있습니다. 세로 막대에서 # 단추를 클릭하지 않아도 더하기 단추를 누르면 스타일이 저장됩니다. 스타일 모드에서 나중에 사용하기 위해 스타일을 저장하는 더하기 단추를 사용할 수 없습니다.
스타일에 대한 사용자 정의 이름을 제공하면 스타일이 테마에 연결되어 있으므로 더 이상 다른 테마에 사용할 수 없습니다. 저장된 스타일을 삭제하려면
  1. CANVAS 도구 모음에서 테마 옵션 ​테마 옵션 관리를 클릭합니다 .
  2. 스타일 관리 대화 상자에서 저장된 스타일을 선택하고 삭제를 클릭합니다 .

라이브 미리 보기, 저장 및 변경 내용 취소

스타일링에서 변경한 내용은 Canvas에 로드된 양식이나 대화형 통신에 즉시 반영됩니다. 라이브 미리 보기를 통해 인터랙티브하게 정의하고 스타일이 미치는 영향을 확인할 수 있습니다. 구성 요소의 스타일링을 변경하면 세로 막대에서 # 단추가 활성화됩니다. 변경 내용을 유지하려면 #단추를 사용합니다.
필드에 잘못된 문자를 입력하면 필드 경계 색상이 빨간색으로 변경되고 화면의 왼쪽 위 모서리에 오류 메시지가 표시됩니다. 예를 들어 입력으로 숫자를 허용하는 텍스트 상자에 알파벳을 입력하면 입력 상자 경계 색상이 빨간색으로 변경되었습니다. 맨 위에 표시되는 오류를 해결하지 않으면 이러한 테마를 저장할 수 없습니다.

다른 적응형 양식 또는 인터랙티브한 커뮤니케이션을 사용한 테마

테마를 만들 때 테마 편집기와 함께 제공된 양식으로 테마가 만들어집니다. 이 양식의 구성 요소에 대한 스타일을 제공합니다. 테마 편집기와 함께 제공된 양식 대신 원하는 양식이나 대화형 통신을 선택하여 스타일링을 제공하고 결과를 미리 볼 수 있습니다.
테마 편집기 캔버스에서 현재 양식이나 대화형 통신을 대체하려면:
  1. 테마 편집기 패널에서 테마 옵션 테마 옵션 클릭합니다 .
  2. 일반 탭에서 적응형 양식/문서 필드에 대한 양식이나 대화형 통신을 찾아 선택합니다 .

다시 실행/실행 취소

실수로 발생하는 원하지 않는 변경 사항을 실행 취소하거나 다시 실행할 수 있습니다. 캔버스에서 다시 실행/실행 취소 단추를 사용합니다.
​그림:캔버스에서 단추 실행 취소/다시 실행
다시 실행/실행 취소 단추는 테마 편집기에서 구성 요소의 스타일을 지정할 때 나타납니다.

테마 편집기 사용

테마 편집기를 사용하면 만들거나 업로드한 테마를 편집할 수 있습니다. [양식 및 문서 > #]로 이동하여 테마를 선택하고 엽니다. 테마가 테마 편집기에서 열립니다.
위에서 설명한 바와 같이 테마 편집기에는 두 개의 패널이 있습니다.사이드바와 캔버스.
테마 편집기에서 텍스트 상자 위젯 구성 요소의 성공 상태 스타일 사용자 지정을 참조하십시오. 구성 요소는 캔버스에서 선택되고 세로 막대에서 해당 상태가 선택됩니다. 세로 막대에서 사용할 수 있는 스타일 지정 옵션은 구성 요소의 모양을 사용자 지정하는 데 사용됩니다.

캔버스 사용

테마는 기본 양식을 사용하거나 원하는 양식 또는 대화형 통신을 사용하여 만듭니다. 캔버스는 테마에 지정된 사용자 지정 항목으로 테마를 만드는 데 사용되는 양식 또는 대화형 통신의 미리 보기를 보여줍니다. 양식 위의 눈금자는 장치의 표시 크기에 따라 레이아웃을 결정하는 데 사용됩니다.
캔버스 도구 모음에서 다음을 볼 수 있습니다.
  • 사이드 패널 전환 :세로 막대를 표시하거나 숨길 수 있습니다.
  • 테마 옵션 :세 가지 옵션을 제공합니다.
    • 구성:미리 보기 양식 또는 대화형 통신, 기본 clientlib 및 Typekit 구성을 선택하는 옵션을 제공합니다.
    • 테마 CSS 보기:선택한 테마에 대한 CSS를 생성합니다.
    • 스타일 관리:텍스트 및 이미지 스타일 관리 옵션을 제공합니다.
    • 도움말:테마 편집기의 이미지 안내 둘러보기를 실행합니다.
  • 에뮬레이터 :다양한 표시 크기에 따라 테마 모양을 에뮬레이션합니다. 표시 크기는 에뮬레이터에서 중단점으로 처리됩니다. 중단점을 선택하고 스타일을 지정할 수 있습니다. 예를 들어, 데스크톱 및 태블릿은 두 개의 중단점입니다. 각 중단점에 대해 다른 스타일을 지정할 수 있습니다.
캔버스에서 구성 요소를 선택하면 구성 요소 도구 모음 위에 구성 요소가 표시됩니다. 구성 요소 도구 모음을 사용하면 구성 요소를 선택하거나 일반 구성 요소로 전환할 수 있습니다. 예를 들어 패널에서 숫자 텍스트 상자를 선택합니다. 구성 요소 도구 모음에는 다음 옵션이 표시됩니다.
  • 숫자 상자 위젯 :세로 막대의 모양을 사용자 정의할 구성 요소를 선택할 수 있습니다.
  • 필드 위젯 :스타일 지정을 위한 일반 구성 요소를 선택할 수 있습니다. 이 예에서는 모든 텍스트 입력 구성 요소(텍스트 상자/숫자 상자/숫자 스테퍼/날짜 입력)가 스타일링을 위해 선택됩니다.
  • :스타일 지정을 위해 일반 구성 요소로 전환할 수 있습니다. 숫자 상자를 선택하고 이 아이콘을 탭하면 필드 구성 요소가 선택됩니다. 필드 구성 요소를 선택하고 이 아이콘을 탭하면 패널이 선택됩니다. 선택을 위해 이 아이콘을 계속 탭하면 스타일링할 레이아웃을 선택합니다.
구성 요소 도구 모음에서 사용할 수 있는 옵션은 선택한 구성 요소에 따라 다릅니다.
​그림:캔버스의 숫자 상자에 있는 구성 요소 도구 모음

사이드바 사용

테마 편집기의 세로 막대는 테마에서 구성 요소의 스타일을 사용자 정의하고 선택기를 사용하는 옵션을 제공합니다. 선택기를 사용하면 구성 요소 그룹 또는 개별 구성 요소를 선택할 수 있으며 세로 막대에서 선택기를 검색할 수 있습니다. 사용자 정의 구성 요소에 대한 선택기를 작성할 수 있습니다.
캔버스에서 구성 요소를 선택하거나 세로 막대의 선택기를 선택하면 세로 막대가 스타일을 사용자 정의할 수 있는 모든 옵션을 표시합니다. 다음은 구성 요소를 선택할 때 세로 막대에 표시되는 옵션입니다.
  • 상태
  • 속성 시트
  • 오류/성공 시뮬레이션

상태

상태는 구성 요소와 사용자 상호 작용의 표시기입니다. 예를 들어 사용자가 텍스트 상자에 원격 데이터를 입력하면 텍스트 상자의 상태가 오류 상태로 변경됩니다. 테마 편집기를 사용하여 특정 상태에 대한 스타일을 지정할 수 있습니다.
상태 스타일을 사용자 지정하는 옵션은 구성 요소에 따라 다릅니다.

속성 시트

속성 사용
치수 및 위치
테마에 구성 요소의 정렬, 크기, 배치 및 배치 스타일을 지정할 수 있습니다.
표시 설정, 패딩, 여백, 폭, 높이 및 Z 색인이 표시됩니다.
텍스트
테마 구성 요소에서 텍스트 스타일을 사용자 정의할 수 있습니다.
예를 들어 텍스트 상자에 입력한 텍스트가 표시되는 방식을 변경할 수 있습니다.
글꼴 모음, 두께, 색상, 크기, 선 높이, 텍스트 정렬, 레터간격, 텍스트 들여쓰기, 밑줄, 기울임체, 텍스트 변형, 세로 정렬, 기준선 및 방향도 선택할 수 있습니다.
배경
구성 요소의 배경을 이미지 또는 색상으로 채울 수 있습니다.
테두리
구성 요소의 테두리 모양을 선택할 수 있습니다. 예를 들어 텍스트 상자에 점선이 있는 진한 빨간색 굵은 테두리가 있어야 합니다.
폭, 스타일, 반경 및 테두리 색상입니다.
효과
불투명도, 혼합 모드 및 그림자와 같은 특수 효과를 구성 요소에 추가할 수 있습니다.
고급
다음을 추가할 수 있습니다.
  • 선택기에서 기본 컨텐츠 앞 또는 뒤에 컨텐츠를 추가할 ::before 수 있는 및 ::after 유사 요소의 속성을 확인하고 스타일을 지정합니다. CSS 의사 요소를 참조하십시오.
  • 구성 요소에 대한 사용자 정의 CSS 코드 인라인을 만들고 사용자 정의 선택기를 작성합니다.
사용자 정의 CSS 코드를 추가하면 세로 막대의 옵션을 사용하여 추가한 사용자 정의 코드를 무시합니다.

오류/성공 시뮬레이션

세로 막대의 아래쪽에서 # 옵션을 사용할 수 있습니다. 세로 막대의 아래쪽에 표시되는 표시/숨기기 화살표를 사용하여 볼 수 있습니다. 테마 편집기를 사용하여 구성 요소의 다양한 상태에 스타일을 지정할 수 있습니다.
예를 들어 양식에 숫자 필드를 추가하고 테마 편집기에서 스타일링을 지정합니다. 사용자가 필드에 영숫자 값을 입력하면 텍스트 상자의 배경색을 변경할 수 있습니다. 테마에서 숫자 필드를 선택하고 세로 막대의 상태 옵션을 사용합니다. 세로 막대에서 오류 상태를 선택하고 배경색을 빨간색으로 변경합니다. 동작을 미리 보려면 세로 막대에서 사용할 수 있는 오류 시뮬레이션 옵션을 사용할 수 있습니다. 오류 및 성공 시뮬레이션 옵션은 아래에 자세히 설명되어 있습니다.
  • 시뮬레이트 성공 :
    성공 상태에 대한 스타일링을 지정하면 구성 요소가 어떻게 보이는지 확인할 수 있습니다. 예를 들어, 양식에서는 고객이 암호를 설정합니다. 사용자는 입력한 지침에 따라 암호를 설정할 수 있습니다. 사용자가 제공한 모든 지침에 따라 암호를 입력하면 텍스트 상자가 녹색으로 바뀝니다. 텍스트 상자가 녹색으로 바뀌면 성공 상태가 됩니다. 성공 상태에서 구성 요소에 대한 스타일링을 지정하고 성공 시뮬레이션 옵션을 사용하여 모양을 시뮬레이션할 수 있습니다.
  • 시뮬레이트 오류 :
    오류 상태에 대한 스타일링을 지정할 때 구성 요소가 어떻게 보이는지 확인할 수 있습니다. 예를 들어, 양식에서는 고객이 암호를 설정합니다. 사용자는 입력한 지침에 따라 암호를 설정할 수 있습니다. 사용자가 제공한 모든 지침을 따르지 않는 암호를 입력하면 텍스트 상자가 빨간색으로 바뀝니다. 텍스트 상자가 빨간색으로 표시되면 오류 상태입니다. 오류 상태에서 구성 요소에 대한 스타일링을 지정하고 오류 시뮬레이션 옵션을 사용하여 모양을 시뮬레이션할 수 있습니다.

구성 요소 스타일 지정

예를 들어 양식에는 두 가지 유형의 텍스트 상자가 있습니다.숫자 값만 허용하는 경우와 영숫자 값을 허용하는 것. 숫자 값만 허용하는 텍스트 상자의 스타일링을 사용자 정의할 수 있습니다(숫자 상자).
특정 구성 요소에 대한 스타일링을 사용자 정의하려면 다음 단계를 수행하십시오(이 예에서는 숫자 상자).
  1. 테마 편집기의 캔버스에서 숫자 상자를 선택합니다.
  2. 숫자 상자를 선택하면 다음 세 가지 옵션이 있는 구성 요소 도구 모음을 볼 수 있습니다.
    • 숫자 상자 위젯
    • 필드 위젯
  3. 숫자 상자 위젯을 선택합니다 .
  4. 세로 막대 제목이 숫자 상자 위젯으로 변경되고 모양을 사용자 정의하는 옵션을 표시합니다.
    세로 막대의 # 및 위치 옵션을 사용하여 구성 요소의 크기를 사용자 정의합니다. 상태가 기본값인지 확인합니다 .
숫자 상자 위젯을 선택하는 ​대신 구성 요소 도구 모음에서 필드 위젯을 선택하고 위의 단계를 수행합니다. #옵션의 크기를 선택하면 숫자 상자를 제외한 모든 텍스트 상자의 크기가 동일합니다.

지정된 상태에 대한 스타일 필드

구성 요소 도구 모음을 사용하여 다른 상태에 대한 구성 요소의 스타일을 지정할 수도 있습니다. 예를 들어, 구성 요소가 비활성화된 경우 비활성화된 상태입니다. 테마 편집기에서 스타일을 지정할 수 있는 구성 요소의 일반적으로 사용되는 상태는 다음과 같습니다.기본값, 포커스, 비활성화, 오류, 성공 및 호버. 캔버스에서 구성 요소를 선택하고 세로 막대의 상태 옵션을 사용하여 모양을 사용자 정의할 수 있습니다.
특정 상태에서 구성 요소에 대한 스타일을 사용자 정의하려면 다음 단계를 수행하십시오.
  1. 캔버스에서 구성 요소를 선택하고 구성 요소 도구 모음에서 적절한 옵션을 선택합니다.
    사이드바는 구성 요소의 스타일링을 사용자 지정하는 옵션을 보여줍니다.
  2. 세로 막대에서 상태를 선택합니다. 예: 오류 상태.
  3. 세로 막대의 테두리, 배경 등과 같은 옵션을 사용하여 구성 요소의 모양을 사용자 정의합니다.
  4. 사이드바 아래쪽에 있는 # 옵션을 사용하여 편집할 때 스타일링 모양을 확인합니다.
상태를 지정한 후 구성 요소의 스타일을 사용자 지정하면 지정된 상태에 대해서만 구성 요소에 대한 사용자 지정이 나타납니다. 예를 들어 호버 상태를 선택할 때 구성 요소에 대한 스타일링을 사용자 정의하는 경우 사용자 지정은 테마를 적용하는 대화형 통신 또는 렌더링된 양식의 구성 요소 위로 포인터를 이동하면 구성 요소에 대해 나타납니다.
오류 및 성공 이외의 상태 동작을 시뮬레이션하려면 미리 보기 모드를 사용합니다. 미리 보기 모드를 사용하려면 페이지 도구 모음에서 미리 보기를 클릭합니다.

더 작은 디스플레이를 위한 레이아웃 스타일 지정

캔버스의 눈금자를 사용하여 작은 디스플레이가 있는 장치의 중단점을 선택합니다. 눈금자와 중단점을 보려면 캔버스에서 에뮬레이터 클릭합니다. 중단점을 사용하면 휴대폰 및 태블릿과 같은 다양한 장치에 대한 표시 크기에 대한 양식이나 대화형 통신을 미리 볼 수 있습니다. 테마 편집기에서 다양한 표시 크기가 지원됩니다.
여러 중단점에 대한 구성 요소의 스타일을 지정하려면
  1. 캔버스에서 눈금자 위의 중단점을 선택합니다.
    중단점은 모바일 장치 및 표시 크기를 나타냅니다.
  2. 세로 막대를 사용하여 선택한 표시 크기의 테마에서 양식 또는 대화형 통신 구성 요소의 스타일을 사용자 정의할 수 있습니다.
  3. 사용자 지정이 저장되었는지 확인합니다.
여러 장치용 양식 또는 대화형 통신 구성 요소의 스타일을 지정할 수 있습니다. 데스크톱 및 모바일 장치용 양식 및 대화형 통신 구성 요소는 완전히 다른 스타일을 가질 수 있습니다.

테마에서 웹 글꼴 사용

이제 적응형 양식이나 인터랙티브한 커뮤니케이션에서 웹 서비스에서 사용할 수 있는 글꼴을 사용할 수 있습니다. Adobe의 웹 글꼴 서비스인 Typekit는 구성으로 제공됩니다. Typekit을 사용하려면 키트와 글꼴을 만들고 Typekit 웹 사이트에서 키트 ID를 받습니다.
AEM에서 Typekit를 구성하려면 다음 단계를 수행하십시오.
  1. 작성자 인스턴스에서 adobeexperience ManagerAdobe Experience Manager > 도구​ > 배포​ > 클라우드 서비스를​ ​클릭합니다.
  2. 클라우드 서비스 페이지에서 타사 서비스 > Typekit으로 이동하고 Typekit 에서 지금 구성을 클릭합니다. 구성을 이미 사용할 수 있는 경우 + 단추를 클릭하여 새 인스턴스를 만듭니다.
  3. 구성 만들기 대화 상자에서 구성 제목을 지정하고 만들기를 클릭합니다 .
    구성 페이지로 리디렉션됩니다.
  4. 표시되는 구성 요소 편집 대화 상자에서 키트 ID를 입력하고 확인을 클릭합니다 .
TypeKit 구성을 사용하도록 테마를 구성하려면 다음 단계를 수행하십시오.
  1. 작성자 인스턴스의 테마 편집기에서 테마를 엽니다.
  2. 테마 편집기에서 테마 옵션 테마 옵션 > .Configure.
  3. Typekit 구성 필드에서 키트를 선택하고 저장을 클릭합니다 .
    이제 테마의 글꼴 모음 속성에 글꼴이 추가되었음을 확인할 수 있습니다.

테마 편집기에서 글꼴 나열 및 선택

테마 구성 서비스를 사용하여 테마 편집기에 글꼴을 더 추가할 수 있습니다. 글꼴을 추가하려면 다음 단계를 수행하십시오.
  1. 관리 권한으로 AEM 웹 콘솔에 로그인합니다. AEM 웹 콘솔의 URL은 https://[server]:[port]/system/console/configMgr 입니다.
  2. 적응형 양식 테마 구성 서비스를 엽니다 .
  3. +를 클릭하고 글꼴 이름을 지정한 다음 저장을 클릭합니다 . 글꼴이 추가되고 테마 편집기에서 사용할 수 있습니다.

테마 편집기에서 글꼴 선택

​+ 단추를 사용하여 글꼴을 추가할 수 있습니다. 글꼴을 추가하면 세로 막대에 나열됩니다.
테마 구성 옵션 외에도 테마 편집기 자체에서 글꼴을 추가할 수 있습니다. 세로 막대 아래에 있는 글꼴 모음 필드에 사용할 글꼴을 입력하고 키보드의 Return 키를 누릅니다.
글꼴을 선택하면 글꼴 모음 목록 아래에 추가됩니다. 테마 편집기의 마스크 옵션을 사용하여 나열된 글꼴을 비활성화하거나 활성화할 수 있습니다.
구성 요소 글꼴 변경을 볼 수 있습니다.
글꼴 모음 필드는 여러 글꼴을 지원합니다. 글꼴을 입력하면 브라우저가 글꼴을 찾아 선택한 구성 요소에 적용합니다. 브라우저가 글꼴을 찾을 수 없는 경우 해당 글꼴의 옆에 있는 글꼴을 찾습니다. 원하는 특정 글꼴을 입력하기만 하면 됩니다. 사용하려는 글꼴을 찾을 수 없는 경우 해당 제품군에 일반 글꼴을 입력하고 사용할 수 있습니다.

테마 편집기에 적용된 마스크 스타일

테마에 적용된 마스크 스타일을 사용할 수 있습니다. 테마 편집기 사이드바에서 eyes 아이콘을 사용하여 적용된 스타일을 비활성화할 수 있습니다. 예를 들어 양식이나 대화형 통신에서 구성 요소의 크기를 변경하는 경우 속성 왼쪽에 있는 마스크 단추를 사용하여 비활성화할 수 있습니다. 테마를 저장할 때 선택한 마스크 옵션이 유지됩니다.
아래 예는 테마에서 마스크 및 마스크되지 않은 스타일을 보여줍니다.

양식 또는 대화형 통신에 테마 적용

적응형 양식에 테마를 적용하려면:
  1. 편집 모드에서 양식을 엽니다. 편집 모드에서 양식을 열려면 양식을 선택하고 열기를 클릭합니다 .
  2. 편집 모드에서 구성 요소를 선택한 다음 > 적응형 양식 컨테이너를 ​클릭한 다음 을클릭합니다.
    세로 막대에서 양식의 속성을 편집할 수 있습니다.
  3. 세로 막대에서 스타일 지정을 클릭합니다 .
  4. 적응형 양식 테마 드롭다운에서 테마를 선택하고 완료 확인 단추를 클릭합니다.
대화형 통신에 테마를 적용하려면:
  1. 편집 모드에서 인터랙티브한 커뮤니케이션을 열 수 있습니다. 편집 모드에서 대화형 통신을 열려면 양식을 선택하고 열기를 클릭합니다 .
  2. 편집 모드에서 구성 요소를 선택한 다음 > 문서​ 컨테이너를 ​클릭한 다음 을클릭합니다.
    세로 막대에서 양식의 속성을 편집할 수 있습니다.
  3. 기본 아래의 테마 ​드롭다운에서 테마를 선택하고 완료 단추사이드바를 클릭합니다.

런타임 시 양식의 테마 변경

테마 스타일은 양식의 다른 구성 요소 스타일을 지정합니다. 이 themeOverride 속성을 사용하여 양식의 테마를 동적으로 변경할 수 있습니다. 양식의 일반적인 URL은 다음과 같습니다.
https://<server>:<port>/content/forms/af/test.html
themeOverride 매개 변수를 사용하여 런타임에 테마를 적용할 수 있습니다.
https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme
themeOverride 옵션을 사용하면 테마에 대한 경로를 제공할 수 있습니다. 양식의 테마가 변경되고 업데이트된 스타일로 양식이 새로 고쳐집니다.

테마를 사용하여 특정 모양 가져오기

기본 기본 캔버스 테마와 함께 AEM Forms를 사용하면 다른 여러 테마가 있습니다. 다른 테마를 사용하여 양식이나 대화형 통신을 디자인하려면 테마 라이브러리 폴더에서 테마를 복사하십시오. 복사한 테마를 테마 라이브러리 폴더 밖에 붙여 넣고, 원하는 변경 내용에 따라 복사한 테마를 편집합니다.
테마를 복사하려면 다음 단계를 수행하십시오.
  1. 작성 인스턴스에서 Adobe Experience Manager > 양식 > 테마로 이동합니다 .
  2. 테마 라이브러리 폴더를 엽니다.
  3. 테마 라이브러리 폴더에서 해당 기본 테마 위로 포인터를 가져간 다음 복사를 누릅니다 .
  4. 복사한 테마를 테마 라이브러리 폴더 밖에 붙여 넣습니다.
  5. 복사한 테마를 사용자 정의합니다.
테마를 사용자 정의한 후 양식이나 대화형 통신에 적용합니다.
테마 라이브러리 폴더에서 사용할 수 있는 테마를 수정하지 마십시오. 이 폴더에는 시스템 테마가 포함되어 있습니다. 이러한 테마에 대한 변경 사항은 신규 버전 또는 AEM Forms 핫픽스를 설치할 때 덮어쓰기됩니다.

다른 적응형 양식 사용 사례에 미치는 영향

  • ​양식 게시/게시 취소:양식 게시 시 적용된 테마가 게시됩니다(아직 게시되지 않은 경우).
  • ​양식 가져오기/내보내기:양식을 가져오거나 내보낼 때 관련 테마를 자동으로 가져오거나 내보냅니다.
  • ​양식 참조:양식 참조의 참조 섹션에는 테마에 대한 추가 항목이 포함되어 있습니다.
  • ​양식의 마지막 수정 시간:연결된 테마가 변경될 때 업데이트됩니다.
  • ​A/B 테스트:A/B 테스트에서 두 버전의 양식에 다른 테마를 적용할 수 있습니다. 두 테마의 정보는 두 개의 안내선 컨테이너에 개별적으로 저장됩니다.

CSS 생성 시퀀스

CSS 보기를 선택하면 테마 편집기가 모든 스타일 정보를 수집하고 CSS를 만듭니다. 다음 순서로 정보를 수집합니다.
  1. 테마의 기본 클라이언트 라이브러리에 정의된 스타일링입니다.
  2. 세로 막대의 속성을 사용하여 지정된 사용자 정의 스타일링
  3. CSS 재정의 옵션을 사용하여 제공되는 CSS 스타일입니다.
예를 들어, 텍스트 상자의 배경색은 기본 클라이언트 라이브러리에서 파란색입니다. 세로 막대의 속성을 사용하여 분홍색으로 변경합니다. CSS를 생성할 때 텍스트 상자의 배경색이 분홍색으로 표시됩니다. 속성을 사용하여 배경색을 변경한 후 다른 작성자는 CSS 재정의 옵션을 사용하여 배경색 텍스트 상자를 흰색으로 변경합니다. CSS를 생성할 때 생성된 CSS에서 배경색이 흰색으로 표시됩니다.

디버깅 스타일

테마 편집기에서 구성 요소의 스타일을 지정하면 CSS가 생성됩니다. 일반 구성 요소의 스타일을 지정할 때 포함된 여러 구성 요소도 스타일이 지정됩니다. 예를 들어 필드의 스타일을 지정할 때 필드의 텍스트 상자와 레이블도 스타일이 지정됩니다. 필드 내에서 텍스트 상자의 스타일을 지정하면 자체 CSS가 생성됩니다. 필드 및 구성 요소에 대해 생성된 CSS를 디버깅하려는 경우 테마 편집기에서는 CSS를 볼 수 있는 옵션을 제공합니다.
다음 옵션을 사용하여 생성된 CSS를 볼 수 있습니다.
  • 세로 막대에서 CSS 보기 옵션:테마에서 구성 요소를 선택하면 세로 막대에 CSS 보기 옵션이 표시됩니다. 생성된 CSS를 표시합니다. 여기에는 ::before ::after 의사 요소에 대한 CSS가 포함됩니다.
  • 캔버스 도구 모음에서 테마 CSS 보기 옵션:캔버스 도구 모음에서 > 테마 CSS 보기를 클릭합니다 . 테마 편집기에서 정의한 속성에서 생성된 전체 테마 CSS를 볼 수 있습니다.

문제 해결, 추천 및 우수 사례

  • 다른 테마에서 자산 방지
    테마를 편집할 때 다른 테마에서 자산(예: 이미지)을 찾아 추가할 수 있습니다. 예를 들어 페이지의 배경을 편집하고 있습니다. 예를 들어 페이지 편집 단추 > > 추가 > 이미지를 선택하면다른 테마의 이미지를 검색하고 추가할 수 있는 대화 상자가 표시됩니다.
  • 다른 테마에서 자산이 추가되고 다른 테마가 이동되거나 삭제된 경우 현재 테마에 문제가 발생할 수 있습니다. 다른 테마에서 자산을 검색하고 추가하지 않는 것이 좋습니다.
  • 기본 clientlib, 테마 편집기 및 인라인 스타일 사용
    • 기본 clientlib :
      기본 클라이언트 라이브러리에는 스타일 정보가 포함되어 있습니다. 테마에서 클라이언트측 라이브러리에 스타일 정보를 사용하려면
      1. Experience Manager > 양식 > 테마를 탐색합니다 .
      2. 테마 페이지에서 테마를 선택하고 속성 보기를 클릭합니다 .
      3. 표시되는 속성 페이지에서 고급을 클릭합니다 .
      4. 고급 탭의 Clientlib 위치 필드에서 사용할 클라이언트 라이브러리를 찾아 선택합니다.
      5. 저장 ​을 클릭합니다. 클라이언트 라이브러리에서 지정한 스타일이 이 스타일을 사용하는 테마에서 가져옵니다. 예를 들어, 텍스트 상자, 숫자 상자에 대한 스타일링을 지정하고 클라이언트 라이브러리에서 전환합니다. 테마에서 클라이언트 라이브러리를 가져오면 텍스트 상자, 숫자 상자 및 스위치를 위한 스타일링을 가져옵니다. 그런 다음 테마 편집기를 사용하여 다른 구성 요소의 스타일을 지정할 수 있습니다. 테마를 만들고, 테마를 만든 다음, 유사한 사용 사례용으로 복사한 테마에 제공된 스타일링을 수정할 수도 있습니다.
    • 테마 편집기:
      테마 편집기를 사용하면 테마를 만들어 양식이나 인터랙티브한 커뮤니케이션의 스타일을 지정할 수 있습니다. 테마에서 구성 요소의 스타일을 지정할 수 있으므로 여러 양식이나 인터랙티브한 커뮤니케이션에서 모양과 느낌의 일관성을 유지할 수 있습니다. 테마에서 스타일 정보를 지정한 다음 테마를 양식에 적용하는 것이 좋습니다.
    • 인라인 스타일:
      양식 또는 대화형 통신 다중 채널 편집기에서 스타일 모드를 사용하여 구성 요소의 스타일을 지정할 수 있습니다. 스타일 모드를 사용하여 양식 구성 요소 스타일을 변경하면 테마에 지정된 스타일이 재정의됩니다. 특정 양식의 특정 구성 요소에 대한 스타일링을 변경하려면 구성 요소의 인라인 스타일을 참조하십시오.
  • 클라이언트측 라이브러리 사용
    클라이언트 라이브러리를 만들어 스타일 정보를 가져오려면 클라이언트측 라이브러리 사용을 참조하십시오 . 클라이언트 라이브러리를 만든 후 위에 언급된 단계를 사용하여 테마에 가져올 수 있습니다.
  • 컨테이너 패널 레이아웃 너비 변경
    컨테이너 패널 레이아웃 너비를 변경하지 않는 것이 좋습니다. 컨테이너 패널의 너비를 지정하면 정적이 되고 다른 디스플레이에 적용되지 않습니다.
  • 머리글 및 바닥글 작업에 양식 편집기 또는 테마 편집기를 사용해야 하는 경우
    글꼴 스타일, 배경 및 투명도와 같은 스타일 옵션을 사용하여 머리글과 바닥글의 스타일을 지정하려면 테마 편집기를 사용합니다.
    로고 이미지, 머리글의 회사 이름, 바닥글의 저작권 정보 등의 정보를 제공하려면 양식 편집기 옵션을 사용합니다.