적응형 양식 구성 요소의 인라인 스타일 지정 inline-styling-of-adaptive-form-components

Last update: Tue Sep 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

중간
사용자
개발자

NOTE

Adobe은 새로운 적응형 Forms 만들기 또는 AEM Sites 페이지에 적응형 Forms 추가를 위해 현대적이고 확장 가능한 데이터 캡처 핵심 구성 요소를 사용할 것을 권장합니다. 이러한 구성 요소는 적응형 양식 만들기 작업이 대폭 개선되어 우수한 사용자 경험을 보장할 수 있게 되었음을 나타냅니다. 이 문서에서는 기초 구성 요소를 사용하여 적응형 Forms을 작성하는 이전 방법에 대해 설명합니다.

버전

문서 링크

AEM 6.5

여기 클릭

AEM as a Cloud Service

이 문서

테마 편집기를 사용하여 스타일을 지정하여 적응형 양식의 전체 모양과 스타일을 정의할 수 있습니다. 또한 개별 적응형 양식 구성 요소에 인라인 CSS 스타일을 적용하고 변경 사항을 즉시 미리 볼 수 있습니다. 인라인 스타일은 테마에 제공된 스타일을 재정의합니다.

인라인 CSS 속성 적용 apply-inline-css-properties

구성 요소에 인라인 스타일을 추가하려면 다음 작업을 수행하십시오.

양식 빌더에서 양식을 열고 모드를 스타일 모드로 변경합니다. 모드를 스타일 모드로 변경하려면 페이지 도구 모음에서 > 스타일 을 선택합니다.
페이지에서 구성 요소를 선택하고 편집 단추 를 선택합니다. 스타일 속성이 사이드바에서 열립니다.

사이드바의 양식 계층 구조 트리에서 구성 요소를 선택할 수도 있습니다. 양식 계층 구조 트리는 사이드바에서 양식 객체로 사용할 수 있습니다.

Style 모드에서 양식 개체 아래에 나열된 구성 요소를 볼 수 있습니다. 그러나 사이드바의 양식 개체 목록에는 필드 및 패널과 같은 구성 요소가 나열됩니다. 필드 및 패널은 텍스트 상자 및 라디오 버튼과 같은 구성 요소를 포함할 수 있는 일반 구성 요소입니다.

사이드바에서 구성 요소를 선택하면 나열된 모든 하위 구성 요소와 선택한 구성 요소의 속성이 표시됩니다. 특정 하위 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
사이드바에서 탭을 클릭하여 CSS 속성을 지정합니다. 다음과 같은 속성을 지정할 수 있습니다.
- 차원 및 위치(표시 설정, 패딩, 높이, 너비, 여백, 위치, z-색인, 부동, 지우기, 오버플로)
- 텍스트(글꼴 모음, 두께, 색상, 크기, 줄 높이 및 맞춤)
- 배경(이미지 및 그라데이션, 배경색)
- 테두리(너비, 스타일, 색상, 반경)
- 효과(그림자, 불투명도)
- 고급(구성 요소의 사용자 지정 CSS를 쓸 수 있음)
마찬가지로 위젯, 캡션, 도움말과 같은 구성 요소의 다른 부분에 스타일을 적용할 수 있습니다.
완료 를 선택하여 변경 내용을 확인하거나 취소 를 선택하여 변경 내용을 취소합니다.