5.컴포넌트 개별 스타일 지정하기

컴포지트 컴포넌트 내 배치된 개별 컴포넌트는 기본 테마의 컴포넌트 스타일을 적용합니다. 배포하는 컴포지트 컴포넌트에만 적용하는 스타일을 원한다면 XCSS 파일과 cssclass 속성을 활용할 수 있습니다.

5.1XCSS 파일 편집하고 화면에 적용하기

모듈 프로젝트 생성 시 프로젝트 이름으로 XCSS 파일을 자동 생성합니다. 생성된 파일은 Resource Explorer 탭에서 찾을 수 있습니다.

1

Resource Explorer 탭에서 xcss 파일을 선택하고 컨텍스트 메뉴에서 [Edit] 항목을 클릭해 CSS 편집창을 실행합니다.

2

Text 탭에서 아래와 같이 코드를 수정합니다. Calendar 선택자를 추가하고 클래스 선택자로 simple_module이라는 항목을 추가합니다.

.Calendar.simple_module .datepicker .head
{
    background : orangered;
}
.Calendar.simple_module .datepicker .body .weekband
{
    background : orangered;
}
.Calendar.simple_module .datepicker .body
{
    -nexa-border : 1px none transparent;
}

.Calendar.simple_module .datepicker .body .dayitem[userstatus=saturday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=sunday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=saturday]
{
    color : #ffffff;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=sunday]
{
    color : #ffffff;
}
.Calendar.simple_module_purple .datepicker .head
{
    background : #C785C8;
}
.Calendar.simple_module_purple .datepicker .body .weekband
{
    background : #C785C8;
}

CSS 편집창 기능은 아래 링크를 참고하세요.

XCSS 편집

3

Project Explorer 탭에서 xcdl 파일을 선택하고 컨텍스트 메뉴에서 [Edit] 항목을 클릭해 컴포지트 컴포넌트의 화면을 열어줍니다.

4

2개의 Calendar 컴포넌트의 cssclass 속성값을 "simple_module"로 지정합니다. 컴포넌트의 스타일이 변경된 것을 확인할 수 있습니다.

5

모듈 설치 파일을 생성합니다. 별도의 설정 없이 xcss 파일이 같이 배포된 것을 확인할 수 있습니다.

5.2모듈 설치하고 적용된 스타일 확인하기

모듈 설치 단계는 컴포지트 컴포넌트를 선택하는 단계까지는 같습니다. 해당 단계에서 [Next] 버튼을 클릭하고 Style을 적용할 App을 선택합니다.

1

설치할 컴포지트 컴포넌트 이름을 확인하고 [+] 버튼을 클릭하고 [Next] 버튼을 클릭합니다.

2

스타일 설정 화면에서 적용할 App 오브젝트를 지정합니다. 굵은 글씨로 xcss 파일이 추가된 것을 확인할 수 있습니다.

3

[Install] 버튼을 클릭하고 모듈을 설치합니다.

4

컴포지트 컴포넌트를 배치한 Form 화면을 열거나 새로 Form을 만들어서 컴포지트 컴포넌트를 배치하고 지정한 스타일이 적용되었는지 확인합니다.