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

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

버전
문서 링크
AEM 6.5
여기 클릭
AEM as a Cloud Service
이 문서

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

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

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

  1. 양식 편집기에서 양식을 열고 모드를 스타일 모드로 변경합니다. 모드를 스타일 모드로 변경하려면 페이지 도구 모음에서 를 선택합니다 캔버스 드롭다운 > 스타일.

  2. 페이지에서 구성 요소를 선택하고 편집 버튼을 선택합니다 편집 단추 . 스타일 속성이 사이드바에서 열립니다.

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

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

    사이드바에서 구성 요소를 선택하면 나열된 모든 하위 구성 요소와 선택한 구성 요소의 속성이 표시됩니다. 특정 하위 구성 요소를 선택하고 스타일을 지정할 수 있습니다.

  3. 사이드바에서 탭을 클릭하여 CSS 속성을 지정합니다. 다음과 같은 속성을 지정할 수 있습니다.

    • Dimension 및 위치 (표시 설정, 패딩, 높이, 너비, 여백, 위치, z-색인, 부동, 지우기, 오버플로)
    • 텍스트 (글꼴 모음, 두께, 색상, 크기, 선 높이 및 맞춤)
    • 배경 (이미지 및 그라데이션, 배경색)
    • 테두리 (폭, 스타일, 색상, 반경)
    • 효과 (그림자, 불투명도)
    • 고급 (구성 요소에 대한 사용자 지정 CSS를 쓸 수 있습니다.)
  4. 마찬가지로 다음과 같은 구성 요소의 다른 부분에 스타일을 적용할 수 있습니다. 위젯, 캡션, 및 도움말.

  5. 선택 완료 변경 사항을 확인하거나 취소 변경 내용을 취소합니다.

예: 필드 구성 요소의 인라인 스타일 example-inline-styles-for-a-field-component

다음 이미지는 인라인 스타일이 적용되기 전후의 텍스트 필드를 나타냅니다.

인라인 스타일이 적용되기 전의 텍스트 상자 구성 요소

인라인 스타일 속성을 적용하기 전의 텍스트 상자 구성 요소

다음 CSS 속성을 적용한 후 다음 이미지에 표시된 대로 텍스트 상자 스타일이 변경되었는지 확인합니다.

선택기
CSS 속성
효과
필드
테두리

테두리 너비 =2px

테두리 스타일=단색

테두리 색상=#1111

필드 주위에 2px 너비의 검정 테두리를 만듭니다.
텍스트 상자
background-color
#6495ED

배경색을 CornflowerBlue(#6495ED)로 변경합니다.

참고: 값 필드에 색상 이름 또는 16진수 코드를 지정할 수 있습니다.

레이블
Dimension 및 위치 > 너비
100픽셀
레이블의 너비를 100px로 수정합니다.
필드 도움말 아이콘
텍스트 > 글꼴 색상
#2ECC40
도움말 아이콘 면의 색상을 변경합니다.
긴 설명
text-align
가운데
도움말의 긴 설명을 가운데에 맞춥니다.

인라인 스타일이 적용된 후 텍스트 상자 스타일

인라인 스타일 속성을 적용한 후 텍스트 상자 구성 요소

위의 단계에 따라 패널, 제출 단추 및 라디오 단추와 같은 다른 구성 요소를 선택하고 스타일을 지정할 수 있습니다.

NOTE
스타일 속성은 선택하는 구성 요소에 따라 다릅니다.

스타일 복사 및 붙여넣기 copy-paste-styles

적응형 양식의 한 구성 요소에서 다른 구성 요소로 스타일을 복사하여 붙여넣을 수도 있습니다. 다음에서 스타일 모드에서 구성 요소를 선택하고 복사 아이콘을 선택합니다 복사 .

같은 유형의 다른 구성 요소를 선택하고 붙여넣기 아이콘을 선택합니다 복사 복사한 스타일을 붙여넣습니다. 스타일 지우기 아이콘을 선택할 수도 있습니다 복사 적용된 스타일을 지웁니다.

구성 요소의 여러 상태에 대한 스타일 설정 set-styles-for-states

구성 요소 유형의 여러 상태에 대해 스타일을 설정할 수 있습니다. 다양한 상태는 다음과 같습니다. 포커스, 비활성화됨, 마우스로 가리키기, 오류, 성공, 및 필수.

구성 요소 상태에 대한 스타일을 정의하려면 다음을 수행합니다.

  1. 다음에서 스타일 모드에서 구성 요소를 선택하고 편집 아이콘을 선택합니다 편집 .

  2. 를 사용하여 구성 요소의 상태를 선택합니다 시/도 드롭다운 목록입니다.

    상태 선택

  3. 선택한 구성 요소 상태의 스타일을 정의하고 을(를) 선택합니다. 저장 속성을 저장합니다.

성공 및 오류 상태를 시뮬레이션할 수도 있습니다. 확장 아이콘을 선택하여 시뮬레이트 성공시뮬레이트 오류 옵션.

상태 시뮬레이션

추가 참조 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab