Show Menu
화제×

HTML5 양식의 기본 스타일 변경

HTML5 양식은 HTML5 기능을 사용하여 렌더링되며 렌더링된 양식의 스타일은 CSS를 사용하여 수행됩니다. HTML5 양식의 기본 모양은 PDF 변환과 유사합니다. 개발자는 사용자 정의 CSS를 사용하여 HTML5 양식의 기본 모양을 변경할 수 있습니다.
이 문서에서는 HTML5 양식의 스타일을 변경하는 단계별 정보를 제공하며 스타일 소개 아티클에는 HTML5 양식의 다양한 스타일 측면에 대한 자세한 정보가 포함되어 있습니다. 이 문서에서 언급한 단계를 수행하기 전에 스타일 소개 아티클을 읽어야 합니다.
다음 두 이미지는 기본 스타일과 사용자 지정된 스타일의 차이를 보여줍니다.

양식 스타일 지정

  1. 사용자 정의 스타일을 추가할 프로필 선택
    URL에서 CRX DE 인터페이스에 액세스합니다.https:// <server>:<port>/crx/de 및 프로필을 만들고 만들거나 기존 프로필을 선택합니다. 프로필을 만드는 방법에 대한 자세한 내용은 새 프로필 만들기를 참조하십시오
  2. HTML5 양식 스타일을 지정하기 위한 CSS 스타일 시트 만들기
    프로필 렌더러를 만든 폴더로 이동하여 CSS 스타일 시트 파일을 만듭니다. 다음 단계를 따르십시오.
    1. 폴더를 마우스 오른쪽 단추로 클릭하고 만들기 > 메뉴에서 파일 만들기를선택합니다.
    2. 파일 만들기 대화 상자에서 스타일 시트의 이름을 입력합니다. .css 확장명을 사용해야 합니다(예: stylesheet.css).
    3. 탐색 창에서 만든 CSS 파일을 엽니다.
    4. 스타일을 지정하고 해당 클래스에 스타일을 추가할 구성 요소의 CSS 클래스를 정의합니다.
    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. 파일을 저장합니다.