넥사크로 디자인의 이해 - download button 만들기

Learn

넥사크로 디자인의 이해 - download button 만들기

투비대원 2019. 12. 2. 10:08

이 글을 읽으면

Download Button을 만들 때 사용하는 XCSS 속성을 이해하고 활용할 수 있습니다.
Download Button을 만들어 보면서 이미지를 추가하고 배치하는 방법을 배울 수 있습니다.

디자인 하기

1. Button Component 생성하기

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

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

Button Component 텍스트 수정 방법

Component가 선택된 상태에서 Properties > Action > text 수정 후 Enter
Button Component 선택 후 F2키 > text 수정 후 Enter

2. XCSS에서 Button Selector 추가하기

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

② Components에서 Button에 체크하고 Add 버튼을 클릭합니다.

3. Button 속성 추가하기

Add 버튼을 클릭하면 기본 화면은 속성과 속성값이 없는 .Button{}의 형태로 보여집니다. 위에 보이는 이미지는 Properties에서 속성값을 추가한 결과물 입니다. 그럼 지금부터 다운로드 버튼에서 사용하는 기본 속성을 알아보고 속성값을 추가해 보겠습니다.

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

.Button
{
-nexa-border : 1px solid black;
-nexa-icon : url('imagerc::btn_dnload_icon_N.png');
-nexa-icon-position : left;
-nexa-text-padding : 0px 0px 0px 5px;
background : #eeeeee;
color : #000000;
font : normal 15px/normal "Arial";
}

-nexa-border

Component의 테두리를 설정하는 속성입니다. 테두리의 굵기, 모양, 색상 등을 지정할 수 있습니다.

Border 영역 안에서 Width, Style, Color 값을 지정하고 상단의 text 영역에 수정된 결과가 잘 반영되었는지 확인 후에 OK 버튼을 누릅니다.

-nexa-icon

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

이미지 파일을 ImageResource에 추가

① Resource Explorer > ImageResource에서 마우스 우클릭 하여 Import ImageResource를 선택합니다.

② Import Resources 창에서 추가할 이미지를 찾아 선택 후 열기 버튼을 클릭하여 ImageResource에 추가합니다.

③ Resource Explorer > ImageResource에서 마우스 우클릭, Refresh를 선택하여 이미지가 추가되었는지 확인합니다.

이미지 파일을 -nexa-icon에 설정

① Resource Explorer > XCSSResource > 해당 xcss(.Button)를 선택합니다.

② Properties > Style > -nexa-icon에서 drop button(▼)을 클릭하고 추가한 이미지를 선택합니다.

③ Component Preview 화면에 이미지가 추가되어 보이는지 확인합니다.