5.넥사크로플랫폼 17을 이용한 버튼 만들기

Edit

넥사크로플랫폼으로 디자인 확인 작업을 하기 위해 필요한 Theme, XCSS, Image에 대해서 먼저 이해하고 이를 활용하여 주어진 버튼을 완성하기 위한 관련 속성에 대해서 알아보겠습니다.

5.1Theme

5.1.1Theme의 생성 및 구성

프로젝트에 필요한 새로운 테마를 생성하거나 추가할 때 지정하는 Resource Service Theme의 테마파일은 Style(XCSS파일)과 Image가 분리된 형태로 생성됩니다. 기본으로 제공되는 default테마 역시 분리된 형태입니다. 압축된 형태로 기본 구성되어 수정, 편집하여 사용 할 수 없는 Nexacro Theme 영역의 테마를 편집하여 사용하고자 복사하여 Resource Service Theme에 붙여놓으면 압축된 파일이 분리되어 편집할 수 있는 형태로 변경됩니다.

아래의 방법으로 "nexacro17_design" 테마를 생성합니다.

[Menu] File > New > Theme
or
아이콘(  ) dropbutton > Theme
or
Resource Explorer > Theme 선택 후 우클릭 New Theme

생성된 파일은 Resource Explorer 창의 Theme에 등록되어 관리됩니다.

Style

테마파일이 생성되면 해당 편집기를 자동으로 열어줍니다. Style은 넥사크로플랫폼 화면을 구성하는 화면 요소들을 디자인하는 기능을 의미합니다. 스타일을 적용할 수 있는 선택자에는 컴포넌트, Form, Frame, TitleBar, StatusBar, ScrollBar 등이 있습니다.

No

이름

설명

1

Selector Explorer

선택자에 대한 편집을 쉽게 설정할 수 있는 아이콘들이 있는 영역

Sort by Group

선택자를 컴포넌트 그룹으로 정렬

Sort by Alphbet

선택자를 알파벳 순서로 정렬

Add Selector

선택자 추가

Add Child Selector

선택한 선택자의 자식 선택자 추가

Delete Selector

선택한 선택자 삭제

Delete All Selector

모든 선택자 삭제

Options

XCSS Generate Browser 할 대상 브라우저선택

2

Selector Tree

선택자 목록을 트리로 구성

3

Component Preview

선택된 항목에 대한 미리보기 영역

4

Generated Code Preview

Nexacro/Web Browser 별 변환된 text 형식의 CSS 미리보기

5

Navigatorbar

원하는 선택자를 순서대로 찾아가거나 추가

6

Style Quick Editor

선택한 선택자에 자주 변경되는 스타일에 대한 빠른 편집 제공

7

XCSS Editor

Nexacro Style Sheet 편집기

작성한 스크립트에 오류가 있는 경우에는 Error List에 표시되며 오류가 발생된 선택자를 표시해줍니다.

No

이름

설명

1

Error

오류 메시지 필터링 여부

2

Warning

경고 메시지 필터링 여부

3

Information

알림 메시지 필터링 여부

4

Contents

메시지 목록 및 내용 표시

Image

Theme에서 사용 할 이미지를 트리 형태로 제공합니다. 이미지는 추가 및 삭제할 수 있으며 이미지를 선택하면 미리보기 화면으로 확인할 수 있습니다.

5.1.2Theme의 적용

처음 프로젝트에는 넥사크로 스트디오 설치 시 기본으로 제공되는 Theme Resource Service의 default 테마가 적용되어 있습니다.
테마파일 생성 후에는 해당 파일을 프로젝트에 적용하여 프로젝트를 진행합니다.

Resource Explorer 창에 있는 항목들에 대한 적용은 Project Explorer > Environment 에서 변경합니다.

그림 5-1theme

5.2XCSS

5.2.1XCSS 생성 및 연결

Theme 에 포함되어 있는 CSS 파일이 아닌 Nexacro Style Sheet 파일을 새로 생성하여 프로젝트에 맞는  디자인 작업을 표현할 수 있습니다.
Nexacro Style Sheet 파일은 아래와 같은 방법으로 생성 할 수 있습니다.
[Menu] File > New > Nexacro Style Sheet(.xcss)
or
아이콘(  ) dropbutton > Nexacro Style Sheet(.xcss)
or
Project Explorer > Apps > 'Project Name' 선택 우클릭 Add > Style
or
Resource Explorer > XCSSResource 선택 우클릭 > New Nexacro Style Sheet
Nexacro Style Sheet 이름을 아래와 같이 지정하고 타켓을 선택합니다.
• Name : CommonStyle

생성된 XCSS 파일은 Resource Explorer 창의 XCSSResource에 등록되어 관리됩니다.

Theme 와 Nexacro Style Sheet 생성시 확인 한 Location 에서 알 수 있듯 이 새롭게 생성한다고 해도 정해진 경로는 수정할 수가 없습니다.

• Theme Location – C:\nexacro17_design\_resource_\_theme_\

• Nexacro Style Sheet Location – C:\nexacro17_design\_resource_\_xcss_\

5.3Image

Nexacro Style Sheet를 생성하여 Apps 'project name'에 연결하여 진행할 때 이미지를 사용하는 경우 이미지는 Resource Explorer > ImageResource에 등록하여 적용할 수 있습니다.

Image 파일을 이용하여 이후의 작업을 위해 먼저 [3장. 프로젝트 생성 및 구성]에서 배웠던 TypeDefinition > Services 이용해서 폴더를 먼저 생성합니다.

• PrefixID - IMAGE

• Type - file

• URL - ./PrefixID/로 자동 지정

5.3.1Image 등록 및 사용

이미지는 Resource Explorer > ImageResource 에서 등록 및 추가 하여 사용하거나 목록을 확인 할 수 있습니다.

참고자료

이미지파일 : .\Nexacro Platform 17 Design EDU\02. Sample\1. Image

앞으로의 실습을 위해 생성한 IMAGE Service 폴더에 위에 참고자료 경로의 이미지 파일을 복사해서 붙여넣어 놓고 추후 작업을 확인합니다.

그림 5-2resource_import

그림 5-3imagerx

지금까지 설명처럼 Theme , Nexacro Style Sheet가 모두 생성 되어있는 프로젝트의 경우에서 디자인의 결과를 보여주는 우선순위를 확인 해 보면 애플리케이션의 XCSSResource > XCSS가 Theme의 XCSS보다 먼저 적용되어 디자인이 확인됩니다.

5.4Download Button 만들기

프로젝트에 연결에 놓은 XCSS와 이미지를 이용하여 버튼을 만들어 보면서 디자인에 필요한 속성들을 이해합니다.

참고자료

이미지 : .\Nexacro Platform 17 Design EDU\02. Sample\1. Image

위 이미지는 버튼의 여러 상태의 디자인의 모습을 보여주기 위해 화면에 연출된 모습입니다. 실제 화면에서는 enabled의 디자인만 확인 할 수 있습니다.

지금부터 화면에 버튼컴포넌트를 생성 한 후 디자인 속성들을 자세히 알아보면서 완성된 버튼디자인을 확인하도록 하겠습니다.

그림 5-4dnbtn_all

1 프로젝트 생성 시 보여주는 기본 버튼 디자인
2 XCSS에 디자인 변경하여 완성할 버튼 디자인

1 Use Attribute : 편집 창에서 속성 목록 사용여부를 결정할 수 있는 속성

5.4.1디자인 속성 확인

기본적으로 위의 속성창에 보여주고 있는 속성들이 앞으로 디자인을 넥사크로 스튜디오에서 확인하기 위해 반드시 알아야 할 속성들입니다. 본격적으로 다운버튼디자인을 표현하기 전에 먼저 해당 속성들을 XCSS에서 어떻게 확인되는지 알아본 후 다운버튼을 완성해 보도록 하겠습니다.

속성

설명

-nexa-border

컴포넌트의 테두리를 설정하는 속성

-nexa-edge

컴포넌트 테두리 안쪽에 표시될 edge 이미지를 설정하는 속성

-nexa-icon

텍스트와 함께 표시 될 아이콘 이미지를 설정하는 속성

-nexa-icon-position

텍스트와 함께 표시 될 아이콘 이미지의 위치를 설정하는 속성

-nexa-padding

컴포넌트영역의 안쪽 여백을 설정하는 속성

-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

컴포넌트에 표시되는 텍스트의 단어의 간격을 설정하는 속성

-nexa-

넥사크로플랫폼 17에서는 웹 CSS3 표준을 준수하고 화면 성능 향상을 위한 스타일 처리 방식을 사용합니다. 속성명도 CSS3에서 사용하는 명칭 및 개념으로 대부분 표현됩니다. 완벽하게 일치하지는 않기 때문에 Nexacro Style Sheet에서만 표현되는 속성은 vendor prefix property로 처리되어 " -nexa-" 라는 문구로 속성을 구별하였습니다.

[ -nexa- 가 붙어 처리 되는 속성의 경우 ]

• 표준에는 존재하지 않으나 컴포넌트 스타일에 필요한 속성

• CSS표준과 유사하나 사용자 편의를 위해 문법을 확장한 경우

• Generate시 컴포넌트 기능 구현을 위해 하위에 생성한 내부 노드에 적용되는 스타일

-nexa-border

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style01.xfdl

표 5-1컴포넌트의 테두리를 설정하는 속성

속성

설명

-nexa-border


<line-width>'px'<line-style><color>

border-top

테두리 위쪽을 설정하는 속성

line-width, line-style, color

각각 선 두께, 스타일, 색을 설정

border-right

테두리 오른쪽을 설정하는 속성

border-bottom

테두리 아래쪽을 설정하는 속성

border-left

테두리 왼쪽을 설정하는 속성

1번입력

top/right/bottom/left 모두 적용

2번입력

top/bottom, right/left에 첫번째 값부터 적용

3번입력

top, right/left, bottom에 첫번째 값부터 적용

4번입력

top, right, bottom, left에 첫번째 값부터 적용

세부사항

설명

line-style

none

테두리가 표시되지 않음

hidden

테두리가 표시되지 않음

dotted

테두리가 점선으로 표시 됨

dashed

테두리가 파선으로 표시 됨

solid

테두리가 실선으로 표시 됨

double

테두리가 두 줄로 표시 됨

groove

테두리가 들어간 것처럼 보이게 입체적으로 표시 됨

ridge

테두리가 올라온 것처럼 보이게 입체적으로 표시 됨

inset

컴포넌트가 들어간 것처럼 보이게 테두리가 입체적으로 표시됨

outset

컴포넌트가 올라온 것처럼 보이게 테두리가 입체적으로 표시됨

Properties 창의 Border 편집기

No

항목

설명

1

Border value

작성된 Border 속성값을 확인하거나 직접 수정합니다.

2

Border

적용할 Border 속성의 세부 항목을 설정합니다.

3

Preview

설정된 Border 속성을 확인합니다.

Preset 버튼을 사용해 Border 항목에서 설정한 속성값을 원하는 부분에 설정 할 수 있습니다.

4

Detail

하위 Border 속성값을 설정합니다.

해당 항목은 접거나 펼칠 수 있습니다.

5

Description

Border 속성 관련 제약사항을 표시합니다.

[ Nexacro Browser 제약 ]

Nexacro Browser에서는 line-style에 double, groove, ridge, inset, outset 값을 설정해도 적용되지 않습니다.

Properties 창의 Color Picker 편집기

No

항목

설명

1

Color value

작성된 Color 속성값을 확인하거나 직접 수정합니다.

2

Eyedropper

Color Picker 영역에서 색상값을 직접 선택하여 지정합니다.

3

Color Picker

다양한 형식으로 색상값을 지정합니다.

4

User Color

User Color 를 저장 해 놓고 색상값을 재사용 할 수 있습니다.

-nexa-edge

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style02.xfdl

표 5-2컴포넌트 테두리 안쪽에 표시될 edge이미지를 설정하는 속성

속성

설명

-nexa-edge


<image><fixedwidth>'px'<fixedheight>'px'

image

URL(" ") 와 같은 형식으로 이미지를 설정

fixedwidth

이미지가 고정될 가로길이를 지정

fixedheight

이미지가 고정될 세로길이를 지정

fixedwidth, height값을 설정하지 않으면 0px로 적용되며, 0px설정은 영역을 고정하지 않습니다.

background 속성에 배경색 또는 이미지가 설정되어 있어도 -nexa-edge 속성에 설정된 이미지가 제일 위에 표시됩니다.

-nexa-icon

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style03.xfdl

표 5-3텍스트와 함께 표시 될 아이콘 이미지를 설정하는 속성

속성

설명

-nexa-icon


<image>

이미지 값

URL(" ") 와 같은 형식으로 이미지를 설정

-nexa-icon-position

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style04.xfdl

표 5-4텍스트와 함께 표시 될 아이콘 이미지의 위치를 설정하는 속성

속성

설명

-nexa-icon-position


left | top | right | bottom

left

아이콘을 텍스트의 왼쪽에 표시

top

아이콘을 텍스트의 위쪽에 표시

right

아이콘을 텍스트의 오른쪽에 표시

bottom

아이콘을 텍스트의 아래쪽에 표시

-nexa-padding

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style05.xfdl

표 5-5컴포넌트 영역의 안쪽 여백을 설정하는 속성

속성

설명

-nexa-padding


<n>'px' <n>'px' <n>'px' <n>'px'

padding-top

영역의 위쪽 여백을 설정하는 속성

padding-right

영역의 오른쪽 여백을 설정하는 속성

padding-bottom

영역의 아래쪽 여백을 설정하는 속성

padding-left

영역의 왼쪽 여백을 설정하는 속성

1번입력 : 5px

top/right/bottom/left 모두 적용

2번입력 : 5px 3px

top/bottom, right/left에 첫번째 값부터 적용

3번입력 : 5px 3px 5px

top, right/left, bottom에 첫번째 값부터 적용

4번입력 : 5px 3px 1px 5px

top, right, bottom, left에 첫번째 값부터 적용

'px' 단위를 생략할 수 없습니다.

-nexa-text-align

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style06.xfdlom

표 5-6컴포넌트의 텍스트 또는 컨텐츠의 가로 정렬 방식을 설정하는 속성

속성

설명

-nexa-text-align


left | center | right

left

텍스트 또는 컨텐츠를 왼쪽으로 정렬

center

텍스트 또는 컨텐츠를 가운데로 정렬

right

텍스트 또는 컨텐츠를 오른쪽으로 정렬

-nexa-text-decoration

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style07.xfdl

표 5-7컴포넌트의 텍스트에 적용할 효과를 설정하는 속성

속성

설명

-nexa-text-decoration


none | line-through | overline | underline

none

텍스트에 효과를 지정하지 않는다.

line-through

텍스트에 취소선 효과를 적용

overline

텍스트에 윗줄 효과를 적용

underline

텍스트에 밑줄 효과를 적용

각 효과는 공백(" ")을 구분자로 사용하여 여러 번 설정 할 수 있습니다.

-nexa-text-padding

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style08.xfdl

표 5-8컴포넌트에 표시되는 아이콘과 텍스트의 간격을 설정하는 속성

속성

설명

-nexa-text-padding


<n>'px' <n>'px' <n>'px' <n>'px'

padding-top

영역의 위쪽 여백을 설정하는 속성

padding-right

영역의 오른쪽 여백을 설정하는 속성

padding-bottom

영역의 아래쪽 여백을 설정하는 속성

padding-left

영역의 왼쪽 여백을 설정하는 속성

1번입력 : 5px

top/right/bottom/left 모두 적용

2번입력 : 5px 3px

top/bottom, right/left에 첫번째 값부터 적용

3번입력 : 5px 3px 5px

top, right/left, bottom에 첫번째 값부터 적용

4번입력 : 5px 3px 1px 5px

top, right, bottom, left에 첫번째 값부터 적용

컴포넌트에 표시되는 아이콘이 없을 경우 -nexa-text-padding 속성값은 무시됩니다.

-nexa-vertical-align

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style09.xfdl

표 5-9컴포넌트의 텍스트 또는 컨텐츠의 세로 정렬 방식을 설정하는 속성

속성

설명

-nexa-vertical-align


top | middle | bottom

top

텍스트 또는 컨텐츠를 위쪽으로 정렬

middle

텍스트 또는 컨텐츠를 가운데로 정렬

bottom

텍스트 또는 컨텐츠를 아래쪽으로 정렬

-nexa-word-wrap

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style10.xfdl

표 5-10컴포넌트에 표시되는 텍스트가 출력영역보다 길 경우 자동으로 줄바꿈 되도록 설정하는 속성

속성

설명

-nexa-word-wrap


none | char | english

none

자동으로 줄바꿈을 수행하지 않음

char

글자 단위로 줄바꿈을 자동 수행

english

영문자일 경우 단어 단위로 줄바꿈을 자동 수행

영문자 이외의 문자는 글자단위로 줄바꿈을 자동 수행

"english"로 설정 시 한 단어는 공백(space, tab 등)으로 구분합니다.

background

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style11.xfdl

표 5-11컴포넌트의 배경영역을 설정하는 속성

속성

설명

background


bg-image

배경에 표시될 이미지를 설정

linear-gradient

배경에 표시될 그라데이션을 설정

background-color

배경에 표시될 색을 설정

속성


설명

bg-image

imageurl


URL(" ")형식으로 설정

repeat-style

no-repeat

이미지가 반복표시되지 않음

repeat

이미지가 가로, 세로 방향으로 모두 반복

repeat-x

이미지가 가로방향으로 반복

repeat-y

이미지가 세로방향으로 반복

position

horizontal-position

이미지의 가로 위치 설정 - left, center, right

vertical-position

이미지의 세로 위치 설정 - top, center, bottom

bg-image > repeat-style 값을 설정하지 않으면 "repeat"으로 적용됩니다.

bg-image > position 값을 모두 설정하지 않으면 "left"로 적용되므로 이미지를 중앙에 위치시키려면 "center" 또는 " center center "로 설정해야 합니다.

background의 image 와 color 가 모두 설정되어 있을 경우 배경색 위에 이미지가 표시됩니다.

속성

설명

linear-gradient



배경에 표시될 그라데이션을 설정

( 방향, Start color %, End color % )

angle


그라데이션의 표시 방향을 설정

startcolor-stop

color, percentage

percentage - angle값에 의해 결정된 시작점이 0%

끝점이 100%로 적용

endcolor-stop

color, percentage

listcolor-stop


그라데이션의 중간점 색을 설정

","로 구분하여 여러개 설정할 수 있습니다.

Properties 창의 Gradient 편집기

No

항목

설명

1

Gradient value

작성된 Gradient 속성값을 확인하거나 직접 수정합니다.

2

angle

그라데이션을 적용할 방향을 지정합니다.

3

color-stop

그라데이션 색상을 지정합니다. 색상지정은 해당 항목을 더블클릭하여 Color Picker를 사용합니다.

[color-stop] 항목의 각 색상을 마우스 오른쪽 버튼으로 클릭하면 값을 편집하거나 해당 색상항목을 삭제 할 수 있습니다.

linear-gradient > angle 값을 설정하지 않으면 "to bottom"으로 적용됩니다.

start, end의 %를 설정하지 않으면 background : linear-gradient(to bottom,blue,green) ;

위와 같은 형태로 보여진다. 여기에 중간점 색을 50%지점에 red로 설정한다면

background : linear-gradient(to bottom,blue,red 50%,green) ; 이처럼 값 또한 그 위치에 들어가게 된다.

속성

설명

background-color

색상이름 또는 색상코드

색상이름 - 'red', 'blue' 같은 문자열로 해당 색상을 설정

색상코드 - #기호로 시작하는 6자리 hexadecimal 값

또는 r, g, b값을 인자로 하는 rgb( )메소드

예) #FF00FF, rgb(255, 0, 255)

background의 image 와 gradient 를 동시에 설정할 수 없습니다.

두 값을 동시에 설정 시 오동작이 발생할 수 있습니다.

border-radius

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style12.xfdl

표 5-12컴포넌트 모서리 모양을 설정하는 속성

속성

설명

border-radius


<nhorizontal>{4} / <nvertical>{4}

- 10px

- 5px 10px / 5px 10px

border-top-left-radius

모서리의 왼쪽상단의 모양을 설정하는 속성

border-top-right-radius

모서리의 오른쪽상단의 모양을 설정하는 속성

border-bottom-right-radius

모서리의 오른쪽하단의 모양을 설정하는 속성

border-bottom-left-radius

모서리의 왼쪽하단의 모양을 설정하는 속성

1번입력

전체 모서리에 저장됨

2번입력

top-left/bottom-right, top-right/bottom-left에 첫번째 값부터 적용

3번입력

top-left, top-right/bottom-left, bottom-right에 첫번째 값부터 적용

4번입력

top-left, top-right, bottom-right, bottom-left에 첫번째 값부터 적용

horizontal-radius

모서리를 둥글게 표시하기 위한 가로 크기를 설정

vertical-radius

모서리를 둥글게 표시하기 위한 세로 크기를 설정

box-shadow

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style13.xfdl

표 5-13컴포넌트에 그림자 효과를 설정하는 속성

속성

설명

box-shadow


<hoffset>'px'< voffset>'px'<blur>'px'<color>

offset

그림자가 표시되는 위치를 설정 - horizontal vertical

음수로 설정 시 컴포넌트 왼쪽에 효과가 표시

blur

그림자의 흐림효과값을 설정

color

그림자의 색을 지정

offset 과 blur 값 모두 'px' 단위는 생략 할 수 없습니다.

color

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style14.xfdl

표 5-14컴포넌트의 텍스트의 색상을 설정하는 속성

속성

설명

color


<NamedColor> | <Numeric Color>

색상이름

'red', 'blue' 같은 문자열로 해당 색상을 설정

색상코드

#기호로 시작하는 6자리 hexadecimal 값 - 예) #FF00FF

r, g, b값을 인자로 하는 rgb( )메소드 - 예) rgb(255, 0, 255)

cursor

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style15.xfdl

그림 5-5cursor

표 5-15컴포넌트 영역 내에서 표시될 마우스포인터의 종류를 설정하는 속성

속성

설명

cursor


값지정

none, auto, pointer ...........

컴포넌트 특성에 맞는 마우스포인터의 종류를 설정

font

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style16.xfdl

표 5-16컴포넌트에 사용하는 폰트를 설정하는 속성

속성

설명

font


<style><weight><size>/<line-height><family>

- italic bold 18px/20px "Aria","Verdana"

font-style

텍스트의 흘려쓰기를 설정 - italic, normal

font-weight

텍스트의 두께를 설정 - bold, normal

font-size

텍스트의 크기 설정 - n'pt' 또는 n'px'

line-height

텍스트가 여러줄로 표시되는 경우 줄 사이의 간격을 설정

font-family

콤마(,)로 구분하여 텍스트서체 설정 - "Aria","Verdana"

표 5-17컴포넌트에 사용하는 폰트를 설정하는 속성

속성

설명

line-height

normal

줄사이의 간격을 설정하지 않습니다.

number

<nValue> 폰트크기에 곱할 값을 설정

length

<nPixel> 줄 사이의 간격을 pixel 단위의 숫자로 설정

percentage

<nPercent> 폰트 크기에 곱한 비율값을 설정

Properties 창의 Font 편집기

No

항목

설명

1

Face

글꼴을 직접입력하거나 드롭버튼 눌러 리스트를 체크하여 지정합니다.

2

Size

크기를 지정합니다.

3

Size Unit

크기의 단위를 지정합니다.

4

Size Up / Down

크기를 올리거나 내릴 수 있습니다.

5

line- height

줄 사이의 간격을 지정합니다.

6

Bold

폰트의 굵기를 지정합니다.

7

Italic

폰트의 기울기를 지정합니다.

line-height

normal 설정시 Nexacro Browser는 폰트 크기에 곱할 값이 "1.15"일 때 와 동일하게 동작합니다.

<length>, <percentage> 모두 단위는 생략할 수 없습니다.

font-weight

수치로 설정 시 "400"값이 일반적이 굵기로 적용되고, "700"값이 bold로 적용됩니다.

letter-spacing

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style17.xfdl

표 5-18컴포넌트에 표시되는 문자의 간격을 설정하는 속성

속성

설명

letter-spacing


<n>'px'

opacity

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style18.xfdl

표 5-19컴포넌트 영역의 투명도를 설정하는 속성

속성

설명

opacity


0.5

0.0 ~ 1.0 사이의 값 지정

0 - 완전투명, 1 - 완전 불투명

word-spacing

소스참고
.\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style19.xfdl

표 5-20컴포넌트에 표시되는 텍스트의 단어의 간격을 설정하는 속성

속성

설명

word-spacing


<n>'px'

5.4.2Download Button 만들기

간단한 아래 속성 정보를 보고 달라지는 버튼의 디자인을 확인 해 봅니다.

[ Download Button 디자인 가이드 ]

관련정보

Button Size

95 × 23

border - width, color

width - 1px, color - #9c9c9c

gradient - angle, startcolor, endcolor

angle - to bottom, startcolor - #ffffff, endcolor - #e1e1e1

font - size, color, family

size - 12px, color - #222222 , family - Verdana

icon

관련 이미지 - btn_dnload_icon_N.png

아이콘과 텍스트 사이 간격

5px

왼쪽테두리와 아이콘 사이 간격

5px

텍스트와 오른쪽테두리 사이 간격

5px

mover 시 마우스 커서 모양

pointer

  1. 화면에 그려놓은 버튼을 사이즈에 맞게 수정한다.

    Properties > Position 부분에서 width, height 로 크기를 변경합니다.

  1. 컴포넌트의 텍스트를 'Download'로 수정합니다. 텍스트는 아래와 같은 방법으로 수정할 수 있습니다.

Properties > Action > text
or
컴포넌트 선택 후 F2키

이제부터 'nexacro17_design'에 연결되어 있는 CommonStyle.xcss를 이용하여 관련정보에 따른 디자인을 바꿔 보도록 하겠습니다.

예시된 디자인으로 완벽히 표현하기 위해 복사해 놓은 이미지 등록을 먼저 하여 실제로 활용법을 익혀보도록 하겠습니다.

ImageResource

  1. Resource Explorer > ImageResource 에 우클릭 Import ImageResource 를 선택하여 복사해 놓은 폴더위치로 갑니다.

  1. 전체 선택 후 열기로 등록합니다. ( 3. Image 에서 등록한 이미지에 대한 중복여부는 확인합니다. )

  1. Resource Explorer > ImageResource 에서 목록이 확인됩니다.

  1. XCSS사용 시 목록 확인 모습

imagerc::

이미지 사용시 dropbutton을 눌러 목록으로 선택하여 확인 할 경우 위와 같이 테마안에 있는 이미지 폴더 경로가 아닌 이미지 경로는 Resource Explorer > ImagerResource 에 있는 이미지만 가능합니다.

Project Explorer > TypeDefinition > Service에서 생성하는 폴더는 파일 형태의 이미지를 보관하는 용도라고 그 차이를 생각하면 됩니다.

XCSS이용하여 Download Button 완성하기

  1. XCSSResource > CommonStyle.xcss 또는 nexacro17_design > Styles > xcssrc::CommonStyle.xcss 의 경로에서 CommonStyle.xcss 파일을 열어봅니다.

  1. 선택자 편집 영역에서 추가 아이콘으로 버튼을 선택하여 추가합니다.

  1. 위의 버튼 이미지 정보에 맞게 관련 속성을 입력합니다.

.Button
{
    -nexa-border : 1px solid #9c9c9c;
    -nexa-icon : URL("imagerc::btn_dnload_icon_N.png");
    -nexa-icon-position : left;
    -nexa-padding : 0px 5px 0px 5px;
    -nexa-text-align : left;
    -nexa-text-padding : 0px 0px 0px 5px;
    -nexa-vertical-align : middle;
    background : linear-gradient(to bottom,#ffffff,#e1e1e1);
    border-radius : 0px;
    color : #222222;
    cursor : pointer;
    font : 12px "Verdana";
}
  1. XCSS 디자인이 적용 된 화면의 버튼의 모습

  1. Nexacro Browser 로 실행 한 결과

지금까지 완성 된 Download 버튼은 화면에서 보이는 모습의 버튼입니다. 처음에 본 이미지에서 알수 있듯이 실제로 활용되는 버튼은 여러 상태들에 따라 다른 디자인의 모습을 보이며 사용됩니다. 또한 현재 화면에 버튼컴포넌트 아이콘을 다시 선택하여 드래그하여 그린다면 또 같은 모습의 버튼이 그려질 것입니다. 프로젝트에서는 또 다른 여러 버튼의 디자인도 필요할 것입니다. 이와 같은 상황들을 표현하기 위해 좀 더 많은 선택자들에 대하여 알아보도록 하겠습니다.

5.4.3XCSS 선택자 추가

Status

속성 선택자를 지정합니다. enabled 상태는 기본값으로 처리되어 별도 속성 선택자를 지정하지 않습니다.
Status는 두 그룹 Status와 UserStatus 로 정의됩니다.

구분

의미

Status

시스템에서 지원하는 상태

disabled, mouseover, focused, enabled, readonly

UserStatus

사용자가 추가 정의하는 상태

pushed, blinked, selected 등

같은 그룹은 두 번 정의 할 수 없지만 서로 다른 그룹은 한 번 씩 정의 할 수 있습니다.

Status Combination 체크박스는 해당 부분을 쉽게 지정할 수 있는 역할을 합니다.

예) .Radio[status=mouseover][status=focused] - 미지원

.Radio[status=mouseover][userstatus=selected] - 지원

클래스 선택자

Add Selector 창을 이용하여 클래스 값을 주어 같은 컴포넌일지라도 여러 디자인을 표현할 수 있습니다.

자식선택자

자식선택자를 추가하는 방법은 여러가지가 있습니다. 아래방법으로 확인해 보겠습니다.

NavigatorBar 를 이용해 바로 항목으로 이동하거나 추가하여 진행할 수 있습니다.

넥사크로플랫폼에서 사용하는 자식선택자라는 표현은 CSS의 자식선택자와는 다릅니다. 형식은 하위선택자(Descendant selectors)와 유사합니다.