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

이 글을 읽으면 

• Spin Component의 선택자 종류를 구분하고 이해할 수 있습니다.
• Spin Component의 선택자를 이용하여 Style을 적용할 수 있습니다.

 

디자인 하기

1. Spin Component 선택자 확인하기

Spin Component의 기본 구조

Spin은 일정 범위 내의 숫자 값을 입력하기 위해 사용하는 컴포넌트입니다. 값의 단위를 조정할 수 있어 특정 단위로만 값을 증감시켜야 하는 경우에 사용합니다. 넥사크로플랫폼에서 Spin Component는 입력한 숫자를 보여주는 편집 영역과 그 숫자를 올리거나 내릴 수 있는 버튼 영역으로 이루어져 있는 구조입니다. 그럼 지금부터 아래의 표를 확인하고 Spin Component의 선택자를 이용하여 디자인을 완성해 보겠습니다.

분류	선택자 구분	종류
Spin	속성 선택자	[status=disabled]
		[status=mouseover]
		[status=focused]
		[status=readonly]
	자식 선택자	spinedit
		spinupbutton
		spindownbutton

 

2. Spin Component 생성하기

① 상단의 Component Toolbar에서 Spin Component 아이콘을 선택합니다.

② Spin Component 아이콘을 선택한 상태에서 화면을 한번 클릭하거나 원하는 크기로 마우스 드래그하여 생성합니다.

 

3. 속성 선택자 추가하기

Multi Selector를 이용한 선택자 추가하기

① XCSS 편집창에서 Add Selector 아이콘을 선택합니다.

② Components에서 Spin을 체크하고 Status에서 mouseover, focused를 선택하고 Add 버튼을 누릅니다.

③ 추가된 Selector를 클릭하여 각각 속성과 속성값을 추가합니다.

* 속성값 입력은 정확도와 텍스트의 오류 방지를 위하여 Properties에서 작업하는 것을 권장합니다.

구분	종류	결과 코드
Components	Spin	.Spin {     -nexa-border : 1px solid black; }
Status	mouseover focused	.Spin[status=mouseover],.Spin[status=focused] {     -nexa-border : 1px solid salmon; }

 

4. 자식 선택자 추가하기

① XCSS 편집창에서 Add Child Selector 아이콘을 선택합니다.

② Child Controls에서 spindownbutton, spinedit, spinupbutton을 체크하고 Add 버튼을 누릅니다.

③ 추가된 Selector를 클릭하여 각각 속성과 속성값을 추가합니다.

구분	종류	결과 코드
Child Controls	spindownbutton	.Spin .spindownbutton {     -nexa-icon : url('imagerc::btn_WF_Spindown.png'); }
	spinedit	.Spin .spinedit {     -nexa-padding : 0px 5px 0px 5px;     -nexa-text-align : right;     background : #eeeeee; }
	spinupbutton	.Spin .spinupbutton {     -nexa-icon : url('imagerc::btn_WF_Spinup.png'); }

 

5. 결과화면

XCSS에서 속성을 반영하면 Project Explorer > Base > 해당 .xfdl에서 디자인이 적용된 화면을 볼 수 있습니다.

Nexacro Browser에서도 동일한 디자인이 적용된 Spin을 확인할 수 있습니다.

 

PS.

Spin의 선택자는 1depth이기 때문에 비교적 쉽게 디자인을 할 수 있습니다. 하지만 세밀한 디자인이 필요한 Component의 경우에는 자식 선택자의 종류도 많고 정확한 의미를 알고 있어야 하기 때문에 초보 디자이너에겐 복잡하고 어려울 수 있습니다. 다음 편은 Component 중에서 어렵지만 가장 많이 사용하는 Calendar 선택자 활용법에 대해서 알아보도록 하겠습니다.

 

참고

컴포넌트 활용 워크북 - Spin

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

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

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro