본문 바로가기

Style

(4)
넥사크로 디자인의 이해 - xcss 편집기 선택자 다루기 calendar 활용편 이 글을 읽으면 Calendar Component의 선택자 구조를 이해할 수 있습니다. Calendar Component의 선택자를 이용하여 Style을 적용할 수 있습니다. 디자인 하기 1. Calendar Component 선택자 확인하기 Calendar는 날짜와 시간을 입력 받기 위한 컴포넌트입니다. Components 중에서도 Calendar의 선택자는 복잡하고 다양하여 초기에 정확한 구조 이해가 필요합니다. 위의 트리(Tree) 구조를 통해서 Calendar 선택자를 확인하고 Style을 적용하여 디자인을 완성해보겠습니다. 2. Calendar Component 생성하기 ① 상단의 Component Toolbar에서 Calendar Component 아이콘을 선택합니다. ② Calendar Co..
넥사크로 디자인의 이해 - xcss 편집기 선택자 다루기 spin 활용편 이 글을 읽으면 Spin Component의 선택자 종류를 구분하고 이해할 수 있습니다. Spin Component의 선택자를 이용하여 Style을 적용할 수 있습니다. 디자인 하기 1. Spin Component 선택자 확인하기 Spin은 일정 범위 내의 숫자 값을 입력하기 위해 사용하는 컴포넌트입니다. 값의 단위를 조정할 수 있어 특정 단위로만 값을 증감시켜야 하는 경우에 사용합니다. 넥사크로플랫폼에서 Spin Component는 입력한 숫자를 보여주는 편집 영역과 그 숫자를 올리거나 내릴 수 있는 버튼 영역으로 이루어져 있는 구조입니다. 그럼 지금부터 아래의 표를 확인하고 Spin Component의 선택자를 이용하여 디자인을 완성해 보겠습니다. 분류 선택자 구분 종류 Spin 속성 선택자 [sta..
넥사크로 디자인의 이해 - xcss 편집기 선택자 다루기 기본편 이 글을 읽으면 Add Selector의 기능을 이해할 수 있습니다. XCSS Editor에서 선택자를 추가하고 활용할 수 있습니다. 디자인 하기 1. Add Selector Add Selector란? Add Selector를 말 그대로 해석하면 '선택자를 추가'하여 디자인을 하는 툴입니다. Add Selector를 사용하면 여러 개의 Component에 동일한 디자인을 적용하거나 Class Selector를 이용하여 원하는 Component에만 스타일 효과를 줄 수 있습니다. Add Selector 사용 방법 처음 생성된 XCSS는 아무 내용이 없는 빈 파일로 XCSS Editor를 클릭해도 편집할 수 없습니다. 스타일 효과를 적용하려면 Component에 해당하는 선택자를 추가해야 합니다. Selec..
넥사크로 디자인의 이해 - download button 만들기 이 글을 읽으면 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 수..