HTML5 양식용 CSS 스타일 만들기

마지막 업데이트: 2024년 7월 15일
  • 적용 대상:
  • Experience Manager 6.5
  • 주제:

작성 대상:

  • 관리자
  • 사용자
  • 개발자

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

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

CSS 클래스  요소 

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

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

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

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

AEM Forms Designer에서 이름이 지정되지 않은 페이지의 경우 HTML5 양식의 페이지가 해당 번호의 증가 순서로 이름이 지정됩니다. 예를 들어 페이지가 두 개인 HTML 5 양식의 경우 페이지 이름은 Page1, Page2입니다.

필드 요소

필드 요소에는 위젯과 캡션이라는 두 가지 중첩된 요소가 포함되어 있습니다.

위젯 요소

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

  • 위젯: 모든 위젯에는 이 클래스가 있습니다.
  • name: AEM과 함께 제공되는 모든 위젯에 위젯 이름 클래스가 포함되어 있습니다. 사용자 정의 위젯의 경우 위젯 개발자는 위젯 이름 클래스를 제공합니다.
  • type: 모든 위젯에는 사용자 인터페이스 요소가 있습니다. 이 클래스는 사용자 인터페이스 요소의 유형을 정의합니다.
<!--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>

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