넥사크로 디자인의 이해 - xcss 편집기 선택자 다루기 기본편

이 글을 읽으면

• Add Selector의 기능을 이해할 수 있습니다.
• XCSS Editor에서 선택자를 추가하고 활용할 수 있습니다.

 

디자인 하기

1. Add Selector

Add Selector란?

Add Selector를 말 그대로 해석하면 '선택자를 추가'하여 디자인을 하는 툴입니다. Add Selector를 사용하면 여러 개의 Component에 동일한 디자인을 적용하거나 Class Selector를 이용하여 원하는 Component에만 스타일 효과를 줄 수 있습니다.

Add Selector 사용 방법

Add Selector(Insert) 툴 오픈하기

처음 생성된 XCSS는 아무 내용이 없는 빈 파일로 XCSS Editor를 클릭해도 편집할 수 없습니다. 스타일 효과를 적용하려면 Component에 해당하는 선택자를 추가해야 합니다. Selector Explorer에서 Add Selector(Insert) 아이콘을 클릭하여 Add Selector 툴을 오픈합니다.

 

2. XCSS 선택자

Status 추가

enabled 기본값 설정

속성 선택자를 지정합니다. Component를 체크하면 enabled는 기본값으로 처리되어 별도의 속성 선택자를 지정하지 않습니다. Status는 아래의 표와 같이 정의합니다.

구분	설명	종류	결과 코드
Status	시스템에서 지원하는 상태	enabled mouseover focused disabled readonly	.Button[status=disabled] { } .Button[status=mouseover] { }
UserStatus	사용자가 추가 정의하는 상태	pushed selected blinked  등	.Button[userstatus=pushed] { } .Button[userstatus=selected] { }

 

선택자 다루기

Class Selector에서 class 추가하기

Add Selector 오픈창에서 선택자를 효율적으로 관리할 수 있는 4가지 방법이 있습니다.

이름	설명	결과 코드
Multi Selector	2개 이상의 Component가 동일한 속성과 속성값을 가질 때 사용합니다. Component나 Status, UserStatus를 2개 이상 선택하면 Multi Selector의 체크박스 영역이 활성화됩니다. Multi Selector를 사용하면 XCSS 코드를 효율적으로 관리할 수 있습니다.	.Button, .Button[status=mouseover], .Calendar, .Calendar[status=mouseover] { }
Class Selector	사용자가 클래스명을 지정하여 사용합니다. 특정 컴포넌트에 스타일을 반영할 때 사용합니다. Class Selector에서 지정한 클래스명은 Component의 cssclass 속성값으로 사용합니다.	.Button.btn_cancel {     background : red; }
Use Attribute	선택자와 Component에서 사용할 속성을 XCSS Editor에 자동으로 추가할 수 있습니다. 사용할 Component에 어떤 속성이 있는지 알 수 없을 때 Use Attribute를 체크하면 편리하게 사용할 수 있습니다.	.Button {     -nexa-border: ;     -nexa-edge: ;     -nexa-icon: ;     -nexa-icon-position: ;     -nexa-padding: ;     -nexa-rtl-background-image: ;     -nexa-rtl-edge-image: ;     -nexa-trl-icon: ;     -nexa-text-align: ;     -nexa-text-decoration: ;     -nexa-text-padding: ;     -nexa-vertical-align: ;     -nexa-word-wrap: ;     background: ;     border-radius: ;     box-shadow: ;     color: ;     cursor: ;     font: ;     letter-spacing: ;     opacity: ;     word-spacing: ; }
Status Combination	Status와 UserStatus 항목을 모두 선택한 경우, 묶어서 한 번에 지정합니다. Status Combination의 사용은 XCSS 코드 수를 간략하게 정리할 수 있고 선택자 해석에 용이합니다.	.Button { } .Button[status=mouseover][userstatus=pushed] { }

 

자식 선택자 추가

자식 선택자를 추가하는 방법은 3가지가 있습니다. 아래의 내용을 확인하고 업무에 활용해보세요.

* 넥사크로플랫폼에서 사용하는 자식 선택자는 CSS의 자식 선택자와 다른 의미를 가집니다. 형식은 하위 선택자(Descendant Selector)와 유사합니다.

• Add Child Selector 아이콘으로 추가하기

아이콘으로 Add Child Selector 오픈하기

 

해당 선택자를 Selector Explorer의 트리에서 선택하고 Add Child Selector 아이콘을 클릭하여 팝업창을 오픈합니다.

• 마우스 우클릭 후 리스트에서 추가하기

트리에서 Add Child Selector 오픈하기

해당 선택자를 Selector Explorer의 트리에서 마우스 우클릭 후, 리스트에서 Add Child Selector를 클릭하여 팝업창을 오픈합니다.

• XCSS Editor의 NavigatorBar를 이용해서 추가하기

NavigatorBar를 이용한 Add Child Selector 오픈

해당 선택자를 선택 후 XCSS Editor 상단의 NavigatorBar에서 dropbutton(▼)을 클릭하여 자식 선택자를 추가합니다.

 

PS.

업무를 시작할 때 XCSS Editor를 자연스럽게 열어 선택자를 추가하진 않으셨나요? 그만큼 Nexacro Platform 17 디자이너라면 너무나도 친숙한 선택자 다루기! 지금까지 Add Selector와 선택자의 사용 방법에 대하여 알아보았습니다. 다음 편으로 이어질 '넥사크로 디자인의 이해 - XCSS 편집기 선택자 다루기 (Spin 활용편)'도 기대해 주세요!

 

참고

개발도구 가이드 - 선택자 추가

디자인 교육자료 - Nexacro Platform 17 Design EDU.zip

* 교육자료 프로젝트의 화면 및 XCSS, Theme를 확인하기에 적합한 툴 버전은 2019.6.25.1(17.0.0.2101) 이후 버전입니다.

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro