넥사크로 스타일 시트(XCSS)는 넥사크로플랫폼 애플리케이션의 화면 요소를 디자인할 때 사용하는 넥사크로플랫폼용 CSS입니다. 웹 문서의 스타일을 정의하는 CSS(Cascading Style Sheets)와 기본적인 사용법 및 스타일 속성이 유사하여 CSS를 다뤄본 개발자나 디자이너가 큰 어려움 없이 사용할 수 있습니다. XCSS는 테마와 별개로 스타일을 적용할 때 유용하며 클래스 선택자와 컴포넌트의 cssclass 속성을 사용하면 특정 컴포넌트에만 스타일 효과를 줄 수도 있습니다. 테마도 내부적으로는 XCSS와 이미지로 구성되어 있습니다.

이번 장에서는 넥사크로 스튜디오를 사용하여 XCSS를 만들고 사용하는 방법에 관해 설명합니다.

넥사크로 스타일 시트(XCSS) 만들기

넥사크로플랫폼 애플리케이션의 화면 요소를 디자인할 때 XCSS를 사용할 수 있습니다. XCSS는 다음과 같은 절차로 만듭니다.

넥사크로 스튜디오의 Menu에서 [File > New > Nexacro Style Sheet(.xcss)]를 선택합니다.

new_xcss

참고로 Project Explorer에서도 다음과 같이 Application 이름을 선택한 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 [Add > Style]을 선택하면 같은 결과를 얻을 수 있습니다.

new_xcss_2

New Style Sheet 화면에서 XCSS 이름과 경로, 적용 대상을 설정합니다.

xcss_만들기_02_New Style Sheet 팝업

항목	설명
Name	새로운 스타일 시트 파일의 이름을 입력합니다.
Location	스타일 시트 파일이 위치할 경로를 선택합니다.
Insert Target	스타일 시트를 적용할 대상을 선택합니다. 애플리케이션 단위로 적용할 수 있습니다.

Finish 버튼을 클릭하면 다음과 같이 Project Explorer에서 새로 만들어진 XCSS 파일을 확인할 수 있습니다. 만들어진 파일은 Xcss Editor에서 자동으로 오픈됩니다.

xcss_만들기_02_03_새로생긴style항목

Xcss Editor에서 새로운 선택자를 추가합니다.

생성된 XCSS는 아무 내용이 없는 빈 파일입니다. 스타일 효과를 설정하려면 컴포넌트에 해당하는 선택자를 추가해야 합니다. Xcss Editor의 왼쪽 위에서 Add Selector (Insert) 버튼을 클릭하여 새로운 선택자를 추가합니다.

xcss_만들기_03_01_add selector

Add Selector 창에서 스타일 효과를 적용할 컴포넌트와 상태 등을 선택합니다.

선택한 컴포넌트에 어떤 스타일 속성이 있는지 확인하려면 Use Attribute 체크박스를 클릭합니다. Use Attribute 옵션을 체크하면 선택한 컴포넌트에서 사용할 수 있는 스타일 속성이 모두 생성됩니다. 단, 아무 값도 설정되지 않은 빈 속성이므로 속성값은 다음 단계인 편집 모드에서 사용자가 직접 입력해줘야 합니다.

xcss_만들기_05_01_add selector

Nexacro Style Sheet 목록에서 스타일을 디자인할 선택자를 선택한 후 Xcss Editor에서 적용할 스타일을 만듭니다.

Xcss Editor의 상단의 메뉴를 이용하면 자동으로 스타일 코드가 생성되며 Preview 창에서 즉시 효과를 확인할 수 있습니다. Xcss Editor에서 사용자가 직접 코드를 입력하는 방법도 가능합니다.

xcss_만들기_05_02_xcss editor

위와 같이 .Button 선택자의 스타일 코드를 작성한 후 HelloWorld.xcss 파일을 저장합니다.

폼 디자인 화면에서 Button 컴포넌트를 배치하고 XCSS의 스타일 효과가 반영되는지 확인합니다. XCSS 스타일 속성은 작성하고 저장되는 즉시 효과가 나타납니다.

xcss_만들기_05_03_form editor

XCSS 파일 재사용하기

Project Explorer에서 다음과 같이 Applicaton 이름을 선택한 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 [Insert > Style]을 선택합니다.

xcss_import_01_open

Choose a Nexacro Style Sheet Files 창이 오픈되면 기존에 작성한 XCSS 파일을 선택 후 열기 버튼을 클릭합니다.

XCSS 파일의 임포트가 성공했는지 확인합니다.

임포트를 성공적으로 수행하면 Project Explorer에서 임포트한 XCSS 파일을 확인할 수 있습니다. XCSS는 프로젝트 애플리케이션의 Styles 밑에 다음과 같이 추가됩니다.

xcss_import_01_01_result

폼 디자인 화면에서 컴포넌트를 배치하고 XCSS의 스타일 효과가 반영되는지 확인합니다.

xcss_만들기_05_03_form editor

임포트한 XCSS 스타일이 폼 디자인 화면에 적용되려면 컴포넌트에 해당하는 선택자가 XCSS에 정의되어 있어야 합니다.

cssclass 속성으로 Button 컴포넌트 배경색 변경하기

XCSS와 컴포넌트의 cssclass 속성을 이용하여 원하는 컴포넌트에만 스타일 효과를 줄 수 있습니다. cssclass 속성에 XCSS에서 정의한 클래스 선택자(Class Selector)를 설정하면 XCSS에서 해당 클래스 선택자 명으로 정의한 스타일이 즉시 적용됩니다.

cssclass 속성을 사용하려면 우선 Button 컴포넌트에 적용할 XCSS 파일을 만들고 클래스 선택자를 정의해야 합니다. XCSS를 만드는 과정은 생략하고 여기서는 클래스 선택자를 선언하는 부분부터 설명합니다.

XCSS 파일을 생성합니다. (넥사크로 스타일 시트(XCSS) 만들기를 참조하십시오.)

Xcss Editor에서 Add Selector 버튼을 클릭하여 새로운 선택자를 추가합니다.

생성된 XCSS는 아무 내용이 없는 빈 파일입니다. 스타일 효과를 적용하려면 컴포넌트에 해당하는 선택자를 추가해야 합니다. Xcss Editor의 왼쪽 위에서 Add Selector (Insert) 버튼을 클릭하여 새로운 선택자를 추가합니다.

xcss_만들기_03_01_add selector

Add Selector 창에서 스타일을 정의할 컴포넌트를 선택하고 Class Selector 명을 설정합니다.

해당 컴포넌트에 어떤 스타일 속성이 있는지 모를 경우에는 Use Attribute 체크박스를 선택하여 선택한 컴포넌트에서 사용할 수 있는 스타일 속성을 모두 생성합니다. 단, 아무 값도 설정되지 않은 빈 속성이 생성됩니다.

sample_style_01_01

Xcss Editor에서 컴포넌트의 스타일 속성을 설정합니다.

Xcss Editor를 사용해 다음과 같이 background 속성을 #c3d69b로 -nexa-text-align 속성을 center로 설정한 후 XCSS 파일을 저장합니다.

.Button.bg_green
{
	background : #c3d69b;
	-nexa-text-align : center;
}

폼 디자인 화면에서 Button 컴포넌트를 생성한 후 cssclass 속성을 bg_green으로 설정합니다.

Button 컴포넌트에 bg_green 선택자로 정의한 스타일이 적용되는지 확인합니다.

sample_style_01_03