적응형 양식 스타일 지정 do-not-publish-style-your-adaptive-form

사용자 지정 테마를 만들고, 개별 구성 요소의 스타일을 지정하고, 테마에서 Web Fonts을 사용하는 방법을 알아봅니다.

영웅 이미지

이 튜토리얼의 단계는 다음과 같습니다. 첫 번째 적응형 양식 만들기 시리즈. Adobe은 전체 자습서 사용 사례를 이해하고, 수행하고, 시연하기 위해 연대순으로 시리즈를 따르는 것을 권장합니다.

튜토리얼 기본 정보 about-the-tutorial

테마를 사용하여 적응형 양식에 고유한 모양과 스타일을 제공할 수 있습니다. 적응형 양식 편집기에서 제공하는 기본 테마를 적용하거나 사용자 고유의 사용자 지정 테마를 만들 수 있습니다. AEM Forms 다음을 제공하십시오. 테마 편집기 사용자 지정 테마를 만들 수 있습니다. 단일 테마는 모바일, 태블릿 또는 데스크탑에서 열린 동일한 적응형 양식에 다른 모양을 제공할 수 있습니다. 테마 편집기를 사용하려면 CSS 이하에 대한 사전 지식이 필요하지 않지만, 필요합니다.

자습서가 끝날 때까지 다음 작업을 수행할 수 있습니다.

  • 적응형 양식에 즉시 사용 가능한 테마 적용
  • 테마 편집기를 사용하여 적응형 양식에 대한 테마 만들기
  • 개별 구성 요소 스타일 지정
  • 보너스 섹션: 사용자 정의 테마에서 Web Fonts 사용

자습서를 완료한 후 양식은 다음과 유사해야 합니다.

사용자 정의 테마가 있는 양식

시작하기 전 before-you-start

로컬 컴퓨터에서 아래 제공된 헤더 스타일 및 로고 이미지를 다운로드합니다. 의 헤더 shipping-address-add-update-form 적응형 양식은 머리글 스타일 및 로고 이미지를 사용합니다. 헤더 스타일 이미지가 헤더의 오른쪽에 나타납니다.

파일 가져오기

파일 가져오기

1단계: 적응형 양식에 테마 적용 step-apply-a-theme-to-your-adaptive-form

적응형 양식 편집기는 다양한 기본 테마를 제공합니다. 적응형 양식에 사용자 지정 스타일을 사용하지 않을 계획이라면 기본 테마가 있는 적응형 양식을 게시할 수도 있습니다. 테마는 적응형 양식과 독립적입니다. 동일한 테마를 여러 적응형 양식에 적용할 수 있습니다.

적응형 양식에 테마를 적용하려면:

  1. 편집할 적응형 양식을 엽니다.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 다음의 속성 열기 적응형 양식 컨테이너. 속성 브라우저에서 다음 위치로 이동합니다 기본 > 적응형 양식 테마. 다음 적응형 양식 테마 필드에는 기본 제공 테마와 사용자 지정 테마가 모두 나열됩니다. 기본적으로 캔버스 테마가 적용됩니다.

  3. 다음에서 테마 선택 적응형 양식 테마 필드. 예를 들어, 설문 조사 테마. 선택 aem_6_3_forms_save 따라서 선택한 테마를 적용할 수 있습니다.

    기본 테마를 사용한 적응형 양식

    그림: 기본 테마를 사용한 적응형 양식

    설문 조사 테마를 사용한 적응형 양식

    그림: 설문 조사 테마를 사용한 적응형 양식

2단계: 적응형 양식 업데이트 step-update-your-adaptive-form

위에 표시된 디자인을 사용하려면 기존 적응형 양식의 자리 표시자 텍스트와 로고를 변경해야 합니다.

적응형 양식을 업데이트하려면:

  1. 헤더의 기존 로고 및 텍스트를 변경합니다. 로고를 제거하려면:

    1. 양식 편집기에서 양식을 엽니다.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. 에서 로고 이미지 선택 머리글 구성 요소 및 선택 cmppr 속성. 다음에서 이미지 속성을 사용하려면 X 를 선택하여 기존 로고 이미지를 제거합니다.

    3. 선택 업로드, logo.png를 선택한 다음 를 선택합니다. aem_6_3_forms_save 변경 내용을 저장합니다. 이미지는 다음에 다운로드되었습니다. 시작하기 전에 섹션.

    4. 헤더 텍스트 선택, We.Retail, 및 선택 aem_6_3_edit 편집. 헤더 텍스트를 다음으로 변경 we retail. 굵게 서식만 적용 we위치: we retail.

      we-retail-logo-text

  2. 제목을 제거하고 자리 표시자 텍스트를 추가합니다.

    1. 고객 ID 필드를 선택하고 cmppr 속성.

    2. 의 콘텐츠 복사 제목 필드 대상 자리 표시자 텍스트 필드.

    3. 의 콘텐츠 삭제 제목 필드 및 선택 aem_6_3_forms_save .

    4. 양식의 모든 텍스트 상자, 숫자 상자 및 전자 메일 필드에 대해 이전 세 단계를 반복합니다.

      업데이트된 적응형 양식

3단계: 적응형 양식에 대한 사용자 지정 테마 만들기 step-create-a-custom-theme-for-your-adaptive-form

다음을 사용할 수 있습니다. 테마 편집기 사용자 지정 테마를 만들 수 있습니다. 테마 편집기는 강력한 WYSIWYG 편집기입니다. CSS를 적응형 양식의 다양한 구성 요소에 적용하는 시각적 방법입니다. 적응형 양식의 구성 요소 및 패널에 스타일을 지정할 수 있는 보다 세밀한 컨트롤을 제공합니다.

테마는 적응형 양식과 같은 별도의 엔티티입니다. 여기에는 적응형 양식의 구성 요소 및 패널에 대한 스타일(CSS)이 포함되어 있습니다. 스타일에는 배경색, 상태 색상, 투명도, 정렬 및 크기와 같은 CSS 속성이 포함됩니다. 테마를 적용하면 지정된 스타일이 적응형 양식의 해당 구성 요소에 적용됩니다.

이 자습서에서는 머리글 및 바닥글, 텍스트 및 숫자 구성 요소, 첨부 파일 구성 요소 및 단추의 스타일을 지정합니다. 테마 만들기로 시작하겠습니다.

테마 만들기 create-a-theme

  1. AEM 작성자 인스턴스에 로그인하고 다음으로 이동합니다. Adobe Experience Manager > Forms > 테마. 기본 URL은 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. 선택 만들기 및 선택 테마. 다음 테마 만들기 테마를 만드는 데 필요한 필드가 있는 페이지가 나타납니다. 다음 제목이름 필드는 필수입니다.

    • 제목: 테마의 제목을 지정합니다. 예를 들어, 글로벌 테마. 제목을 사용하면 테마 목록에서 테마를 식별할 수 있습니다.
    • 이름: 테마의 이름을 지정합니다. 예를 들어, 글로벌 테마. 지정된 이름의 노드가 저장소에 생성됩니다. 제목 입력을 시작하면 이름 필드에 대한 값이 자동으로 생성됩니다. 제안 값을 변경할 수 있습니다. 이름 필드에는 영숫자 문자, 하이픈 및 밑줄만 포함될 수 있습니다. 잘못된 모든 입력은 하이픈으로 대체됩니다.
  3. 만들기 ​를 선택합니다. 테마가 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 선택 열기 새 탭에서 새로 만든 테마를 엽니다. 테마가 테마 편집기에서 열립니다. 스타일링을 위해 테마 편집기는 AEM과 함께 제공되는 즉시 사용 가능한 적응형 양식을 사용합니다 Forms.

    테마 편집기 UI 사용에 대한 자세한 내용은 테마 편집기 기본 정보.

  4. 선택 테마 옵션 theme-options > 구성. 다음에서 양식 미리 보기 필드에서 shipping-address-add-update-form 적응형 양식, 선택 aem_6_3_forms_save , 선택 저장. 이제 테마 편집기는 기본 적응형 양식 대신 고유한 적응형 양식을 사용하도록 구성되었습니다. 선택 취소 테마 편집기로 돌아갑니다.

    사용자 정의 테마

    그림: 배송 주소 추가 업데이트 양식 적응형 양식이 있는 테마 편집기

    테마 만들기

    그림: 기본 양식이 있는 적응형 양식

머리글과 바닥글은 적응형 양식에 일관되고 고유한 모양을 제공합니다. 일반적으로 머리글에는 조직의 로고와 이름이 포함되고 바닥글에는 저작권 정보가 포함되며, 이러한 정보는 조직의 여러 양식에서 동일하게 유지됩니다. shipping-address-add-update-form 적응형 양식의 머리글 및 바닥글 스타일을 지정하려면 다음을 수행합니다.

  1. 탐색 머리글 > 텍스트 선택 사항에서 선택할 수 있습니다. 선택기 패널은 테마 편집기의 왼쪽에 있습니다. 패널이 표시되지 않으면 을 선택합니다. 토글 사이드 패널 사이드 패널을 전환합니다.

  2. 에서 다음 속성을 설정합니다. 텍스트 아코디언 및 선택 aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    속성
    글꼴 모음 Arial®
    글꼴 색상 FFFFFF
    글꼴 크기 54픽셀
  3. 다음 항목 선택 머리글 위젯 및 선택 머리글. 헤더 위젯의 스타일을 지정하는 옵션이 왼쪽에 나타납니다. 확장 Dimension 및 위치 아코디언, 설정 높이120px, 및 선택 aem_6_3_forms_save .

  4. 확장 배경 헤더 위젯의 아코디언에서 배경색F6921E.

    마우스로 가리키기 이미지 및 그라데이션 > + 추가, 선택 이미지. 다음 속성을 설정하고 aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    속성
    이미지 header-style.png를 업로드합니다. 이미지는 다음에 다운로드되었습니다. 시작하기 전에 섹션.
    위치 오른쪽 단추
    바둑판식으로 배열 반복 안 함
  5. 테마 편집기에서 헤더에서 로고를 선택하고 을 선택합니다. 머리글 로고. Dimension 및 위치 아코디언을 확장하고 다음 속성을 설정한 다음 을 선택합니다 aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    여백
    여백
    • 위쪽: 1.5rem
    • 하단: -35px
    • 왼쪽: 1rem

    팁: 다음 항목 선택 링크 아이콘 을 사용하여 각 필드에 다른 값을 입력할 수 있습니다.

    높이 4.75렘
  6. 바닥글 위젯을 선택하고 바닥글. 확장 배경 아코디언, 설정 배경색F6921E, 및 선택 aem_6_3_forms_save .

데이터 캡처 구성 요소의 스타일을 지정하고 적응형 양식에 배경을 적용합니다 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

적응형 양식에서 여러 구성 요소를 사용하여 데이터를 캡처할 수 있습니다. 예를 들어 텍스트 상자와 숫자 상자가 있습니다. 모든 데이터 캡처 구성 요소에 동일한 스타일을 제공하거나 각 구성 요소에 별도의 스타일을 제공할 수 있습니다. 이 자습서에서는 숫자 상자(고객 ID, 우편 번호)와 텍스트 상자(고객 ID, 이름, 배송 주소, 상태, 이메일)에 동일한 스타일이 적용됩니다. 데이터 캡처 구성 요소의 스타일을 지정하려면 다음을 수행하십시오.

  1. 다음 항목 선택 고객 ID 필드 및 선택 필드 위젯 옵션을 선택합니다. 다음 속성을 설정하고 aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    아코디언 속성
    경계 테두리 색상 A7A9AC
    경계 테두리 반지름
    • 위쪽: 7px
    • 오른쪽: 7픽셀
    • 하단: 7px
    • 왼쪽: 7픽셀
    텍스트 글꼴 모음 Arial®
    텍스트 글꼴 색상 939598
    텍스트 글꼴 크기 18픽셀
    Dimension 및 위치 60%
    Dimension 및 위치 여백
    • 왼쪽: 10 rem
  2. 위 빈 영역 선택 고객 ID 필드 및 선택 반응형 패널 컨테이너. 설정 배경 > 배경색 F1F2F2로 이동합니다. 선택 aem_6_3_forms_save .

    반응형 패널 컨테이너

단추 스타일 지정 style-the-buttons

사용자 지정 테마를 사용하여 적응형 양식의 모든 버튼에 동일한 스타일을 적용하고 인라인 스타일 지정 특정 단추에 스타일을 적용합니다. 단추 스타일을 지정하려면 다음을 수행합니다.

  1. 다음 항목 선택 제출 버튼을 클릭하고 다음을 선택합니다. 단추 옵션을 선택합니다. 다음 속성을 설정하고 aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    아코디언 속성
    배경 배경 색상 F6921E
    테두리 테두리 색상 F6921E
    경계 테두리 반지름
    • 위쪽: 7px
    • 오른쪽: 7픽셀
    • 하단: 7px
    • 왼쪽: 7픽셀
    텍스트 글꼴 모음 Arial®
    텍스트 글꼴 색상 FFFFFF
    텍스트 글꼴 크기 18픽셀
  2. 사용자 정의 테마 적용, 전역 테마 를 적응형 양식에 추가합니다. 스타일이 적응형 양식에 반영되지 않으면 브라우저 캐시를 지우고 다시 시도하십시오.

    style-data-capture-components

4단계: 개별 구성 요소 스타일 지정 step-style-individual-components

일부 스타일은 특정 구성 요소에만 적용됩니다. 이러한 구성 요소는 적응형 양식 편집기에서 스타일을 지정합니다.

  1. 편집할 적응형 양식을 엽니다. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 상단 막대에서 스타일 옵션을 선택합니다.

    style-option

  3. 다음 항목 선택 첨부 버튼을 클릭하고 다음을 선택합니다. aem_6_3_edit 아이콘. 에서 다음 속성을 설정합니다. Dimension 및 위치 아코디언:

    table 0-row-2 1-row-2 2-row-2
    속성
    부동 왼쪽
    10%
  4. 다음 항목 선택 정부 승인 주소 증명 옵션을 선택하고 aem_6_3_edit 아이콘. 다음 속성을 설정합니다.

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    아코디언 속성
    치수 및 위치 부동 왼쪽
    치수 및 위치 73%
    치수 및 위치 사진 간격
    • 왼쪽: 10픽셀
    치수 및 위치 높이 40픽셀
    Dimension 및 위치 여백
    • 오른쪽: 2 rem
    • 왼쪽: 10 rem
    배경 배경 색상 FFFFFF
    경계 테두리 너비 1픽셀
    경계 테두리 스타일 단색
    경계 테두리 색상 A7A9AC
    경계 테두리 반지름 7픽셀
    텍스트 글꼴 모음 Arial®
    텍스트 글꼴 색상 BCBEC0
    텍스트 글꼴 크기 18픽셀
    텍스트 선 높이 2
  5. 다음 항목 선택 제출 버튼을 클릭하고 다음을 선택합니다. aem_6_3_edit 아이콘. 다음 속성을 설정합니다.

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    아코디언 속성
    Dimension 및 위치 부동 오른쪽
    Dimension 및 위치 여백
    • 상단: 5 rem
    • 오른쪽: 14 rem
    • 하단: 20px
    • 왼쪽: 20픽셀
    배경 배경 색상 F6921E
    경계 테두리 색상 F6921E

    styled-adaptive-form-1

5단계: 보너스 섹션: 사용자 정의 테마에서 Web Fonts 사용 step-bonus-section-using-web-fonts-in-a-custom-theme

다양한 글꼴을 사용하여 적응형 양식을 디자인할 수 있습니다. 적응형 양식을 보는 모든 장치에는 적응형 양식을 디자인하는 데 사용되는 글꼴이 없을 수 있습니다. 웹 글꼴 서비스를 사용하여 필요한 글꼴을 대상 장치에 전달할 수 있습니다.

Adobe Fonts 는 Web Fonts 서비스입니다. 적응형 양식에서 서비스를 구성하고 사용할 수 있습니다. 사용 Adobe Fonts 적응형 양식에서:

  1. 찾아보기 Adobe 글꼴 라이브러리 양식의 스타일을 지정할 글꼴을 선택합니다.
NOTE
태그나 필터를 추가하여 글꼴 목록을 구체화할 수 있습니다.
  1. 원하는 글꼴이 있는 경우 </> 단추를 클릭하여 웹 프로젝트에 패밀리를 추가합니다.

    select-font-from-font-libary

    웹 프로젝트에 글꼴 추가 대화 상자가 나타납니다.

    note note
    NOTE
    </> 버튼을 사용할 수 있는 글꼴만 웹 프로젝트에 추가할 수 있습니다.
  2. 웹 프로젝트의 이름을 지정합니다.

  3. 포함할 글꼴 가중치와 스타일을 선택하려면 확인란을 선택합니다.

    글꼴 라이브러리 추가

  4. 선택 클릭 프로젝트를 만듭니다.

  5. 화면에서 포함 코드와 URL을 복사합니다.
    포함 코드 및 URL

  6. 클릭 완료 을 클릭하여 웹 프로젝트 창을 닫습니다.

  7. AEM 인스턴스에 로그인하고 URL로 이동합니다. http://server:port/crx/de/index.jsp#

  8. CRXDE에 폴더 구조를 생성합니다. 예 /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. 새로 만든 (으)로 이동 clientlibs 폴더 및 추가 allowProxycategories 속성.

  10. 다음으로 이동 /apps/[fontslibrary]/[customlibrary(clientlibrary)] css 폴더를 만듭니다.

  11. 생성된 CSS 폴더로 이동하여 파일을 만듭니다. 예를 들어 다음과 같이 파일을 만듭니다. fonts.css 포함 코드를 URL과 함께 붙여 넣습니다.
    폴더 구조

  12. 변경 사항을 저장합니다.

NOTE
적응형 양식에 추가된 사용자 정의 글꼴을 사용하려면 클라이언트 라이브러리 이름이에서 클라이언트 라이브러리 범주 clientlib 폴더의 카테고리 옵션에 지정된 이름을 따릅니다.

이제 다음 사용자 정의 글꼴 클라이언트 라이브러리를 통해 포함된 글꼴에 적응형 양식에 액세스할 수 있습니다.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2