넥사크로플랫폼으로 디자인 확인 작업을 하기 위해 필요한 Theme, XCSS, Image에 대해서 먼저 이해하고 이를 활용하여 주어진 버튼을 완성하기 위한 관련 속성에 대해서 알아보겠습니다.
Theme
Theme의 생성 및 구성
프로젝트에 필요한 새로운 테마를 생성하거나 추가할 때 지정하는 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에서 사용 할 이미지를 트리 형태로 제공합니다. 이미지는 추가 및 삭제할 수 있으며 이미지를 선택하면 미리보기 화면으로 확인할 수 있습니다.
Theme의 적용
처음 프로젝트에는 넥사크로 스트디오 설치 시 기본으로 제공되는 Theme Resource Service의 default 테마가 적용되어 있습니다. 테마파일 생성 후에는 해당 파일을 프로젝트에 적용하여 프로젝트를 진행합니다.
Resource Explorer 창에 있는 항목들에 대한 적용은 Project Explorer > Environment 에서 변경합니다.
theme
XCSS
XCSS 생성 및 연결
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_\
Image
Nexacro Style Sheet를 생성하여 Apps 'project name'에 연결하여 진행할 때 이미지를 사용하는 경우 이미지는 Resource Explorer > ImageResource에 등록하여 적용할 수 있습니다.
Image 파일을 이용하여 이후의 작업을 위해 먼저 [3장. 프로젝트 생성 및 구성]에서 배웠던 TypeDefinition > Services 이용해서 폴더를 먼저 생성합니다.
• PrefixID - IMAGE
• Type - file
• URL - ./PrefixID/로 자동 지정
Image 등록 및 사용
이미지는 Resource Explorer > ImageResource 에서 등록 및 추가 하여 사용하거나 목록을 확인 할 수 있습니다.
참고자료
이미지파일 : .\Nexacro Platform 17 Design EDU\02. Sample\1. Image
앞으로의 실습을 위해 생성한 IMAGE Service 폴더에 위에 참고자료 경로의 이미지 파일을 복사해서 붙여넣어 놓고 추후 작업을 확인합니다.
항목에 우클릭 Import ImageResource 속성으로 IMAGE Service폴더에서 몇 몇 이미지를 선택합니다.
resource_import
ImageResource 에서 추가한 목록을 확인 할 수 있습니다.
이미지 사용 시 속성창에서는 아래와 같이 확인 할 수 있다.
imagerx
지금까지 설명처럼 Theme , Nexacro Style Sheet가 모두 생성 되어있는 프로젝트의 경우에서 디자인의 결과를 보여주는 우선순위를 확인 해 보면 애플리케이션의 XCSSResource > XCSS가 Theme의 XCSS보다 먼저 적용되어 디자인이 확인됩니다.
Download Button 만들기
프로젝트에 연결에 놓은 XCSS와 이미지를 이용하여 버튼을 만들어 보면서 디자인에 필요한 속성들을 이해합니다.
참고자료
이미지 : .\Nexacro Platform 17 Design EDU\02. Sample\1. Image
위 이미지는 버튼의 여러 상태의 디자인의 모습을 보여주기 위해 화면에 연출된 모습입니다. 실제 화면에서는 enabled의 디자인만 확인 할 수 있습니다.
지금부터 화면에 버튼컴포넌트를 생성 한 후 디자인 속성들을 자세히 알아보면서 완성된 버튼디자인을 확인하도록 하겠습니다.
만들어 놓은 CommonStyle 화면을 열어 상단의 컴포넌트 툴바에서 버튼컴포넌트를 선택하여 드래그합니다.
dnbtn_all
1 프로젝트 생성 시 보여주는 기본 버튼 디자인 2 XCSS에 디자인 변경하여 완성할 버튼 디자인
CommonStyle.xcss 파일을 열어 XCSS편집창을 확인 합니다.
편집창에서 Add Selector 아이콘(
)을 이용하여 선택자를 추가합니다.
Components에서 Button을 선택하고 Add를 클릭합니다.
Use Attribute를 선택하면 속성창에 보여지는 해당 속성목록을 편집창에서도 확인 할 수 있습니다.
1 Use Attribute : 편집 창에서 속성 목록 사용여부를 결정할 수 있는 속성
디자인 속성 확인
기본적으로 위의 속성창에 보여주고 있는 속성들이 앞으로 디자인을 넥사크로 스튜디오에서 확인하기 위해 반드시 알아야 할 속성들입니다. 본격적으로 다운버튼디자인을 표현하기 전에 먼저 해당 속성들을 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
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-nexa-icon | <image> | |
이미지 값 | URL(" ") 와 같은 형식으로 이미지를 설정 |
-nexa-icon-position
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style04.xfdl
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-nexa-text-align | left | center | right | |
left | 텍스트 또는 컨텐츠를 왼쪽으로 정렬 | |
center | 텍스트 또는 컨텐츠를 가운데로 정렬 | |
right | 텍스트 또는 컨텐츠를 오른쪽으로 정렬 |
-nexa-text-decoration
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style07.xfdl
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
-nexa-vertical-align | top | middle | bottom | |
top | 텍스트 또는 컨텐츠를 위쪽으로 정렬 | |
middle | 텍스트 또는 컨텐츠를 가운데로 정렬 | |
bottom | 텍스트 또는 컨텐츠를 아래쪽으로 정렬 |
-nexa-word-wrap
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style10.xfdl
속성 | 값 | 설명 |
|---|---|---|
-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
속성 | 값 | 설명 |
|---|---|---|
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
속성 | 값 | 설명 |
|---|---|---|
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
속성 | 값 | 설명 |
|---|---|---|
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
속성 | 값 | 설명 |
|---|---|---|
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
cursor
속성 | 값 | 설명 |
|---|---|---|
cursor | 값지정 | |
none, auto, pointer ........... | 컴포넌트 특성에 맞는 마우스포인터의 종류를 설정 |
font
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style16.xfdl
속성 | 값 | 설명 |
|---|---|---|
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" |
속성 | 값 | 설명 |
|---|---|---|
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
속성 | 값 | 설명 |
|---|---|---|
letter-spacing | <n>'px' |
opacity
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style18.xfdl
속성 | 값 | 설명 |
|---|---|---|
opacity | 0.5 | |
0.0 ~ 1.0 사이의 값 지정 | 0 - 완전투명, 1 - 완전 불투명 |
word-spacing
소스참고 .\Nexacro Platform 17 Design EDU\03. Project\Nexacro17_DesignEDU\CommonStyle\Style19.xfdl
속성 | 값 | 설명 |
|---|---|---|
word-spacing | <n>'px' |
Download 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 |
화면에 그려놓은 버튼을 사이즈에 맞게 수정한다.
Properties > Position 부분에서 width, height 로 크기를 변경합니다.
컴포넌트의 텍스트를 'Download'로 수정합니다. 텍스트는 아래와 같은 방법으로 수정할 수 있습니다.
Properties > Action > text or 컴포넌트 선택 후 F2키
이제부터 'nexacro17_design'에 연결되어 있는 CommonStyle.xcss를 이용하여 관련정보에 따른 디자인을 바꿔 보도록 하겠습니다.
예시된 디자인으로 완벽히 표현하기 위해 복사해 놓은 이미지 등록을 먼저 하여 실제로 활용법을 익혀보도록 하겠습니다.
ImageResource
Resource Explorer > ImageResource 에 우클릭 Import ImageResource 를 선택하여 복사해 놓은 폴더위치로 갑니다.
전체 선택 후 열기로 등록합니다. ( 3. Image 에서 등록한 이미지에 대한 중복여부는 확인합니다. )
Resource Explorer > ImageResource 에서 목록이 확인됩니다.
XCSS사용 시 목록 확인 모습
imagerc::
이미지 사용시 dropbutton을 눌러 목록으로 선택하여 확인 할 경우 위와 같이 테마안에 있는 이미지 폴더 경로가 아닌 이미지 경로는 Resource Explorer > ImagerResource 에 있는 이미지만 가능합니다.
Project Explorer > TypeDefinition > Service에서 생성하는 폴더는 파일 형태의 이미지를 보관하는 용도라고 그 차이를 생각하면 됩니다.
XCSS이용하여 Download Button 완성하기
XCSSResource > CommonStyle.xcss 또는 nexacro17_design > Styles > xcssrc::CommonStyle.xcss 의 경로에서 CommonStyle.xcss 파일을 열어봅니다.
선택자 편집 영역에서 추가 아이콘으로 버튼을 선택하여 추가합니다.
위의 버튼 이미지 정보에 맞게 관련 속성을 입력합니다.
Xcss Editor 모습
.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";
}XCSS 디자인이 적용 된 화면의 버튼의 모습
Nexacro Browser 로 실행 한 결과
지금까지 완성 된 Download 버튼은 화면에서 보이는 모습의 버튼입니다. 처음에 본 이미지에서 알수 있듯이 실제로 활용되는 버튼은 여러 상태들에 따라 다른 디자인의 모습을 보이며 사용됩니다. 또한 현재 화면에 버튼컴포넌트 아이콘을 다시 선택하여 드래그하여 그린다면 또 같은 모습의 버튼이 그려질 것입니다. 프로젝트에서는 또 다른 여러 버튼의 디자인도 필요할 것입니다. 이와 같은 상황들을 표현하기 위해 좀 더 많은 선택자들에 대하여 알아보도록 하겠습니다.
XCSS 선택자 추가
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 창을 이용하여 클래스 값을 주어 같은 컴포넌일지라도 여러 디자인을 표현할 수 있습니다.
자식선택자
자식선택자를 추가하는 방법은 여러가지가 있습니다. 아래방법으로 확인해 보겠습니다.
해당 선택자를 트리에서 선택 후 Add Child Selector 아이콘(
)을 클릭합니다.
팝업창에서 선택 후 입력합니다.
해당 선택자를 트리에서 선택 우클릭 후 Add Child Selector를 선택합니다.
같은 팝업창으로 진행됩니다.
NavigatorBar 를 이용해 바로 항목으로 이동하거나 추가하여 진행할 수 있습니다.
해당 선택자를 선택 후 NavigatorBar의 dropbutton 클릭 시 리스트를 확인 할 수 있습니다.
리스트 중 항목을 선택 하면 [+]버튼으로 추가 할 지 다시 dropbutton으로 다음 단계로 넘어갈지 결정할 수 있습니다.
넥사크로플랫폼에서 사용하는 자식선택자라는 표현은 CSS의 자식선택자와는 다릅니다. 형식은 하위선택자(Descendant selectors)와 유사합니다.