.. _cwp-design:

사용자정의 페이지 디자인
============================

**접속인증페이지(CWP)** 기본 페이지를 편집하거나 새로운 사용자 정의 페이지를 만들 수 있고, 회사의 로고 등을 CWP에 추가 할 수 있습니다. 
**설정 > 접속인증페이지(CWP) > 디자인 템플릿** 에서 설정이 가능합니다.

컴포넌트 설정
-----------------
사용자등록 버튼, 사용자 인증 버튼 등 다양한 컴포넌트에 대해 설정이 가능합니다.

#. 필요한 구성 요소의 추가 또는 삭제 버튼을 클릭합니다.
#. 웹 콘솔의 오른쪽에 있는 기본 페이지에 페이지 미리보기가 표시 됩니다.
#. **수정** 버튼을 클릭합니다.

수정
------
Javascript를 활용하여 실제 Web 소스 수정이 가능합니다.

#. CWP 페이지는 html 코드 형태로 표시 됩니다.
#. 페이지를 html 코드 형식으로 제공합니다.
    - 코드에 컴포넌트의 기능를 활성화 하거나 비활성화하여 페이지의 옵션을 수정합니다.
    - html 코드를 사용하여 수정 할 수 있습니다.
#. **수정** 을 클릭합니다.
#. 웹 콘솔의 오른쪽에 있는 기본 페이지에 페이지 미리보기가 표시 됩니다.

레이아웃
-------------
Html 코드를 사용하여 페이지 레이아웃을 수정할 수 있습니다.

.. code:: bash

   <?xml version='1.0' encoding='UTF-8' ?> 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:gncomponent="http://xmlns.jcp.org/jsf/composite/gncomponent">
   $HEAD
   <body id="body1">
    $PAGEHEADER
    <div id="wrap" class="wrap">
        $CUSTOMPAGEHEADER
        <div id="content" class="content">
            <!-- Don't delete code -->
            $CONTENT
            <!-- Don't delete code -->
        </div>
        $CUSTOMPAGEFOOTER
    </div>
   </body>
   </html>

CSS 스타일
--------------
CSS Style 클래스를 정의하고 수정 탭 또는 레이아웃 탭에서 사용 할 수 있습니다.

1. "CSS 스타일" 탭에 CSS 스타일 코드를 입력합니다

.. code:: bash

   .test {color:red;}

2. "수정" 탭에서 정의 된 CSS 스타일을 사용합니다.

.. code:: bash

   <div class="test">
   TEST
   </div>

3. **수정** 버튼을 클릭합니다.
4. 웹 콘솔의 오른쪽에 있는 기본 페이지에 페이지 미리보기가 표시 됩니다.


이미지 업로드
-------------------
접속 인증 페이지에 사용할 이미지를 직접 업로드할 수 있습니다.

.. note:: 영문 알파벳 문자 파일 이름 "jpg / gif / png" 확장자 파일만 지원합니다.


정의된 CWP 템플릿 적용
------------------------------
#. 상단 항목에 있는 **정책** 으로 이동합니다.
#. 왼쪽 항목의 **노드정책** 으로 이동합니다.
#. 적용하려는 **노드정책 이름** 을 찾아 클릭합니다.
#. **관리정책 > Design Template** 옵션을 찾습니다.
#. CWP에서 사용할 디자인 항목을 선택합니다.
#. **수정** 을 클릭하고 화면 우측 상단의 **변경정책적용** 을 클릭합니다.