적응형 양식 스타일 지정

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

이 자습서는 첫 번째 적응형 양식 만들기 시리즈. 전체 자습서 사용 사례를 이해하고, 수행하고, 시연하기 위해 시리즈를 시간 순서대로 따르는 것이 좋습니다.

자습서 정보

테마를 사용하여 적응형 양식에 고유한 모양 및 스타일을 제공할 수 있습니다. 적응형 양식 편집기와 함께 제공되는 기본 테마를 적용하거나 고유한 사용자 지정 테마를 만들 수 있습니다. AEM Forms 제공 테마 편집기 사용자 지정 테마를 만들려면 단일 테마는 모바일, 태블릿 또는 데스크톱에서 연 동일한 적응형 양식에 다른 모양을 제공할 수 있습니다. CSS 또는 LESS에 대한 이전 지식은 테마 편집기를 사용할 필요가 없지만 원하는 것입니다.

자습서를 마치면 다음을 배울 수 있습니다.

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

이 양식은 자습서를 완료한 후 다음과 비슷합니다.

시작하기 전

로컬 시스템에서 헤더 스타일 및 로고 이미지를 다운로드합니다. 의 헤더 shipping-address-add-update-form 적응형 양식에서는 헤더 스타일 및 로고 이미지를 사용합니다. 헤더 스타일 이미지가 헤더의 오른쪽에 나타납니다.

파일 가져오기

파일 가져오기

1단계: 적응형 양식에 테마 적용

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

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

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

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

3. 에서 테마 선택 적응형 양식 테마 필드. 예, 설문 조사 테마. 탭 선택한 테마를 적용하려면

   

   그림: 기본 테마가 있는 적응형 양식

   

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

2단계: 적응형 양식 업데이트

위에 표시된 디자인에는 기존의 적응형 양식의 자리 표시자 텍스트와 로고를 변경해야 합니다. 다음 단계를 수행하여 필요한 변경 작업을 수행합니다.

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

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

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

   2. 에서 로고 이미지를 탭합니다. 헤더 구성 요소 및 탭 속성. 에서 이미지 기존 로고 이미지를 제거하려면 X를 누릅니다.

   3. 탭 업로드​를 클릭하고 logo.png 를 선택한 다음 를 누릅니다 변경 사항을 저장하려면 을 클릭합니다. 이미지는 시작하기 전에 섹션을 참조하십시오.

   4. 머리글 텍스트 탭, We.Retail, 탭 편집. 헤더 텍스트를 로 변경 we retail. 굵은 서식만 적용 wein we retail.

      

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

   1. 고객 ID 필드를 탭하고 를 탭합니다 속성을 사용합니다.

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

   3. 의 컨텐츠를 삭제합니다 제목 필드 및 탭 .

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

      

3단계: 적응형 양식의 사용자 지정 테마 만들기

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

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

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

테마 만들기

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

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

   • 제목: 테마의 제목을 지정합니다. 예, 전역 테마. 제목은 테마 목록에서 테마를 식별하는 데 도움이 됩니다.
   • 이름: 테마 이름을 지정합니다. 예, 글로벌 테마. 지정된 이름의 노드가 저장소에 생성됩니다. 제목을 입력을 시작하면 이름 필드의 값이 자동으로 생성됩니다. 제안된 값을 변경할 수 있습니다. 이름 필드에는 영숫자, 하이픈 및 밑줄만 포함할 수 있습니다. 잘못된 입력은 모두 하이픈으로 대체됩니다.

3. 탭 만들기. 테마가 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 탭 열기 새 탭에서 새로 만든 테마를 열려면 테마가 테마 편집기에서 열립니다. 스타일링을 위해 테마 편집기에서는 AEM과 함께 제공된 기본 적응형 양식을 사용합니다 Forms.

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

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

   

   그림: shipping-address-add-update-form 적응형 양식이 있는 테마 편집기

   

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

스타일 머리글 및 바닥글

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

1. 탐색 Header > 텍스트 선택 사항을 클릭하거나 탭합니다. 선택기 패널은 테마 편집기 왼쪽에 있습니다. 패널이 표시되지 않으면 사이드 패널을 전환합니다.

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

   속성	값
   글꼴 모음	Arial
   글꼴 색상	FFFFFF
   글꼴 크기	54px

3. 탭하기 헤더 위젯 및 탭 Header. 헤더 위젯의 스타일을 지정하는 옵션이 왼쪽에 나타납니다. 를 확장합니다. Dimension 및 위치 아코디언, 높이 to 120px, 탭 .

4. 를 확장합니다. 배경 헤더 위젯의 아코디언, 배경색 to F6921E.

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

   속성	값
   이미지	header-style.png를 업로드합니다. 이미지는 시작하기 전에 섹션을 참조하십시오.
   위치	오른쪽 단추
   바둑판식으로 배열	반복 안 함

5. 테마 편집기에서 헤더에서 로고를 탭하고 탭합니다 헤더 로고. Dimension 및 위치 아코디언을 확장하고 다음 속성을 설정하고 탭합니다 .

   여백	값
   여백	상단: 1.5rem 아래쪽: -35px 왼쪽: 1rem 팁: 탭하기 링크 아이콘을 사용하여 각 필드에 다른 값을 제공할 수 있습니다.
   높이	4.75rem

6. 바닥글 위젯을 탭하고 탭합니다 바닥글. 를 확장합니다. 배경 아코디언, 배경색 to F6921E, 탭 .

데이터 캡처 구성 요소의 스타일을 지정하고 배경을 적응형 양식에 적용합니다

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

1. 탭하기 고객 ID 필드 및 탭 필드 위젯 선택 사항입니다. 다음 속성을 설정하고 탭합니다. .

   아코디언	속성	값
   테두리	테두리 색상	A7A9AC
   테두리	테두리 반지름	상단: 7px 오른쪽: 7px 아래쪽: 7px 왼쪽: 7px
   텍스트	글꼴 모음	Arial
   텍스트	글꼴 색상	939598
   텍스트	글꼴 크기	18px
   Dimension 및 위치	너비	60%
   Dimension 및 위치	여백	왼쪽: 10rem

2. 위의 빈 영역을 누릅니다 고객 ID 필드 및 탭 응답형 패널 컨테이너. 설정 배경 > 배경색 F1F2F2로 이동합니다. 탭 .

   

단추 스타일 지정

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

1. 탭하기 제출 단추를 누르고 탭합니다. 단추 선택 사항입니다. 다음 속성을 설정하고 탭합니다. .

   아코디언	속성	값
   배경	배경색	F6921E
   테두리	테두리 색상	F6921E
   테두리	테두리 반지름	상단: 7px 오른쪽: 7px 아래쪽: 7px 왼쪽: 7px
   텍스트	글꼴 모음	Arial
   텍스트	글꼴 색상	FFFFFF
   텍스트	글꼴 크기	18px

2. 사용자 지정 테마 적용, 전역 테마 를 적응형 양식에 추가할 수 있습니다. 스타일이 적응형 양식에 반영되지 않으면 브라우저 캐시를 지우고 다시 시도하십시오.

   

4단계: 개별 구성 요소 스타일 지정

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

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

2. 상단 막대에서 을(를) 선택합니다. 스타일 선택 사항입니다.

   

3. 탭하기 첨부 단추를 누르고 탭합니다. 아이콘. 에서 다음 속성을 설정합니다. Dimension 및 위치 아코디언:

   속성	값
   부동	왼쪽
   너비	10%

4. 탭하기 정부 승인 주소 증명 옵션 및 탭 아이콘. 다음 속성을 설정합니다.

   아코디언	속성	값
   치수 및 위치	부동	왼쪽
   치수 및 위치	너비	73%
   치수 및 위치	사진 간격	왼쪽: 10px
   치수 및 위치	높이	40px
   치수 및 위치	여백	오른쪽: 2rem 왼쪽: 10rem
   배경	배경색	FFFFFF
   테두리	테두리 너비	1px
   테두리	테두리 스타일	단색
   테두리	테두리 색상	A7A9AC
   테두리	테두리 반지름	7px
   텍스트	글꼴 모음	Arial
   텍스트	글꼴 색상	BCBEC0
   텍스트	글꼴 크기	18px
   텍스트	선 높이	2

5. 탭하기 제출 단추를 누르고 탭합니다. 아이콘. 다음 속성을 설정합니다.

   아코디언	속성	값
   Dimension 및 위치	부동	오른쪽
   Dimension 및 위치	여백	상단: 5rem 오른쪽: 14rem 아래쪽: 20px 왼쪽: 20px
   배경	배경색	F6921E
   테두리	테두리 색상	F6921E

   

5단계: 보너스 섹션: 사용자 정의 테마에서 웹 글꼴 사용

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

Adobe Fonts 는 웹 글꼴 서비스입니다. 적응형 양식과 함께 서비스를 구성하고 사용할 수 있습니다. 를 사용하려면 Adobe Fonts 적응형 양식:

1. 만들기 Adobe Fonts account, create a kit, add font Myriad Pro to the kit, publish the kit, and obtain the Kit ID. 를 사용해야 합니다 Adobe Fonts 적응형 양식의 (웹 글꼴).

2. AEM에서 Forms server, 이동 Adobe Experience Manager > 도구 > Adobe Fonts. 이제 구성 폴더를 엽니다. 구성을 이미 사용할 수 있는 경우 만들기 새 인스턴스를 만드는 단추입니다.

   구성 만들기 대화 상자에서 제목 구성에 대해 를 클릭하고 만들기. 구성 페이지로 리디렉션됩니다. 에서 구성 요소 편집 대화 상자가 나타나면 키트 ID 을(를) 클릭합니다. 확인.

3. 테마를 구성하여 Adobe Fonts 구성. 작성자 인스턴스에서 를 엽니다. 전역 테마 를 입력합니다. 테마 편집기에서 테마 옵션 > 구성. in Adobe Fonts 구성 필드에서 키트를 선택하고 저장.

   에 추가된 글꼴 Adobe Fonts 선택 가능한 항목은 텍스트 모든 구성 요소의 아코디언.

Business.Adobe.com 리소스

Content Insights Automated Onboarding Personalized Experiences Customer Communications Web Content Management Dynamic Forms