HTML5 양식의 CSS 스타일 만들기

마지막 업데이트: 2023년 5월 4일

작성 대상:

  • User
CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

XFA 기반 양식 템플릿의 HTML5 렌디션은 여러 HTML 요소로 구성됩니다. 이러한 요소는 순서대로 배열됩니다. 모든 요소에는 잘 정의된 CSS 클래스가 있습니다. 이러한 CSS 클래스를 사용하여 요소의 모양을 선택하고 변경할 수 있습니다.

NOTE
CSS 클래스에서는 폭, 높이, 테두리 두께, 위쪽, 왼쪽, 오른쪽, 아래쪽, 패딩, 여백 및 기타 위치 및 크기 특성 값을 변경하지 마십시오. 위치 및 크기 속성을 변경하면 양식 레이아웃이 변경됩니다.

요소의 CSS 클래스 

모든 요소에는 잘 정의된 CSS 클래스가 포함되어 있습니다. 이러한 클래스를 수정하여 요소의 모양을 변경할 수 있습니다. 필드 및 그리기 요소를 제외한 모든 요소에는 Type 클래스와 Name 클래스의 두 가지 CSS 클래스가 있습니다.

  • 다음 형식 클래스 는 XFA 필드의 유형을 나타냅니다. 을(를) 재정의할 수 있습니다 type 클래스를 사용하여 특정 유형의 모든 요소의 스타일을 수정합니다.

  • 다음 이름 클래스 는 XFA 필드의 이름에 해당합니다. 을(를) 재정의할 수 있습니다 name 사용자 지정 스타일을 수정하고 요소에 적용할 클래스입니다.

NOTE
일부 XFA 요소에는 이름이 없습니다. 이러한 구성 요소의 스타일을 변경하려면 해당 특정 유형의 모든 구성 요소를 수정합니다.

AEM Forms Designer에서 이름이 지정되지 않은 페이지의 경우 HTML5 양식의 페이지 이름은 페이지 수의 증가 순서로 지정됩니다. 예를 들어, 두 페이지가 있는 HTML5 양식의 경우 페이지 이름은 Page1, Page2.

필드 요소

필드 요소에는 두 개의 중첩 요소가 포함되어 있습니다. 위젯 및 캡션.

위젯 요소

위젯 요소는 사용자와의 상호 작용을 위한 사용자 인터페이스 요소를 포함합니다. 이 클래스에는 다음의 세 가지 CSS 클래스가 있습니다.

  • 위젯: 모든 위젯에는 이 클래스가 있습니다.
  • 이름: AEM과 함께 제공되는 모든 위젯에는 위젯 이름 클래스가 포함되어 있습니다. 사용자 지정 위젯의 경우 위젯 개발자는 위젯 이름 클래스를 제공합니다.
  • 유형: 모든 위젯에는 사용자 인터페이스 요소가 있습니다. 이 클래스는 사용자 인터페이스 요소의 유형을 정의합니다.
<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>

<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

유형 및 이름 클래스 외에 필드 구성 요소에는 라는 추가 CSS 클래스도 포함되어 있습니다 하위 유형. 하위 유형은 필드의 유형(예: NumericField, DateField, TextField)을 식별합니다. 하위 유형 클래스를 재정의하여 유형, 하위 유형의 모든 필드의 스타일을 수정할 수 있습니다.

다양한 구성 요소에 대한 CSS 클래스

구성 요소유형이름
페이지페이지사용자 정의 이름
또는
페이지<pagenumber> (기본값)
컨텐츠 영역contentarea사용자 정의 이름
하위 양식하위사용자 정의 이름
제외 그룹exclgroup사용자 정의 이름
Draw그리기사용자 정의 이름
필드필드사용자 정의 이름
캡션captionNA
위젯위젯위젯 개발자가 정의합니다(사용자 정의 위젯의 경우 다음 섹션의 표를 참조하십시오)

다양한 필드에 대한 CSS 클래스

AEM Forms 디자이너는 NumericField, DecimalField 및 Date 필드와 같은 형식의 다양한 필드 유형을 지원합니다. HTML의 이러한 모든 필드에는 위에 언급된 CSS 클래스가 포함되어 있습니다. 또한 필드 유형에 따라 일부 추가 클래스가 포함되어 있습니다.

모든 필드에는 UI 요소를 나타내는 연관된 위젯이 있습니다. 각 필드의 클래스와 각 필드와 관련된 위젯이 아래에 나열되어 있습니다.

필드 유형하위 유형위젯 이름위젯 유형HTML UI 태그
버튼NAxfaButtonbuttonfieldwidget입력 유형=단추
CheckButtoncheckboxfieldXfaCheckBoxcheckboxfieldwidget입력 유형=확인란
DateFielddatefielddateFielddatefieldwidget입력 유형=text
DateTimeField텍스트 필드textFieldtextfieldwidget입력 유형=text
DecimalFieldnumicfieldnumericInputnumicfieldwidget입력 유형=text
드롭다운초식자dropDownListWidget선택할 수 있는 위젯선택
ListBox초식자listBoxWidget선택할 수 있는 위젯ol
숫자 필드numicfieldnumericInputnumicfieldwidget입력 유형=text
PasswordField암호 필드defaultWidgetpasswordfieldwidget입력 유형=암호
라디오 단추방사성 필드XfaCheckBoxradifieldwidget입력 유형=라디오
텍스트 필드텍스트 필드textFieldtextfieldwidget입력 유형=text
TimeField텍스트 필드textFieldtextfieldwidget입력 유형=text

다양한 그리기 요소에 대한 CSS 클래스

AEM Forms 디자이너를 사용하여 텍스트 및 이미지와 같은 정적 그리기 요소를 삽입할 수 있습니다. 각 그리기 요소에 대해 별도의 CSS 클래스가 해당 요소와 연결됩니다. 그리기 요소에 대한 CSS 클래스 목록은 아래에 나와 있습니다. 모든 그리기 요소에는 그리기 클래스와 연결된 그리기 클래스가 있습니다.

그리기 문자CSS 클래스
텍스트text
이미지이미지
사각형사각형
Lineline

양식의 다른 부분 스타일 지정

HTML 양식에 UI 구성 요소가 표시되는 모양 외에 인라인 오류, 인라인 경고 및 유효성 검사 오류가 있는 필드와 같은 요소 스타일을 변경할 수 있습니다.

Styling Inline Errors

필드의 유효성 검사에서 오류가 발생하면 필드가 활성 상태일 때 인라인 오류가 표시됩니다. 인라인 오류 스타일을 변경하려면 CSS ID를 무시합니다 error-msg.

Styling Inline Warnings

필드의 유효성 검사에서 경고가 발생하면 필드가 활성 상태일 때 인라인 경고가 표시됩니다. 이러한 인라인 경고의 스타일을 변경하려면 CSS ID를 무시합니다 경고 메시지.

Styling Fields with Validation Errors

필드에 대한 유효성 검사가 실패하면 위젯 스타일이 변경됩니다. 이 스타일 변경은 CSS 클래스를 적용하여 수행됩니다 widgetError 위젯 구성 요소 아래에 표시됩니다. 기본 스타일을 수정하려면 widgetError 클래스 이름을 지정합니다.

이 주제에 대한 추가 도움말

이전 페이지
다음 페이지

Experience Manager