HTML5 양식의 기본 스타일 변경

HTML5 양식은 HTML5 기능을 사용하여 렌더링되고 렌더링된 양식의 스타일이 CSS를 사용하여 수행됩니다. HTML5 양식의 기본 모양은 PDF 변환과 유사합니다. 개발자는 맞춤형 CSS를 사용하여 HTML5 양식의 기본 모양을 변경할 수 있습니다.

이 문서에서는 HTML5 양식의 스타일을 변경하는 단계별 정보를 제공하며 스타일 소개 아티클에는 HTML5 양식의 다양한 스타일 측면에 대한 자세한 정보가 포함되어 있습니다. 이 아티클에 언급된 단계를 수행하기 전에 스타일 소개 아티클을 읽어야 합니다.

다음 두 이미지는 기본 스타일과 사용자 지정된 스타일의 차이를 보여 줍니다.

pictures-002-small

양식 스타일 지정

  1. 사용자 정의 스타일을 추가할 프로필 선택

    URL에서 CRX DE 인터페이스에 액세스합니다.https://<server>:<port>/crx/de 프로파일을 만들고 프로파일을 만들거나 기존 프로파일을 선택합니다. 프로필을 만드는 방법을 알아보려면 새 프로필 만들기를 참조하십시오.

  2. HTML5 양식 스타일을 지정할 CSS 스타일 시트 만들기

    프로필 렌더러를 만든 폴더로 이동하여 CSS 스타일 시트 파일을 만듭니다. 다음 단계를 수행합니다.

    1. 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴에서 만들기 -> 파일 만들기​를 선택합니다.

    HTML5 양식의 특정 구성 요소에 대해 만들 CSS 클래스를 알아보려면 스타일 소개을 참조하십시오.

  3. 프로필 렌더러에 스타일 시트 포함

    CRX DE에서 프로필 렌더러 페이지(jsp 파일)를 열고 XFA 클라이언트 라이브러리 바로 아래의 페이지에 CSS 파일을 포함합니다. 프로파일에 CSS 파일을 포함하려면 다음 단계를 수행합니다.

    1. 렌더러 페이지에서 다음 줄을 검색합니다.

      <cq:includeclientlib categories="xfaforms.profile" />

    2. 스타일 시트를 포함하려면 위의 줄 아래에 다음을 삽입합니다.

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css" />

    3. 파일을 저장합니다.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free