버튼 퍼블리싱 기본
버튼 퍼블리싱에 관련된 기본 정보를 제공한다.
버튼 컴포넌트는 클릭시 동작을 수행하기 위한 기능을 제공한댜.
버튼 아키텍처
버튼 컴포넌트는 배경, 경계선등을 처리하기 위한 BUTTON 요소와 BUTTON 내부에 배경 이미지를 표시하기 위한 DIV 요소와 DIV 요소 내부에 문자열을 표시히가 위한 SPAN 요소로 구성된다.
버튼 생성과 삭제
버튼 생성
버튼 생성 방법은 아래와 같다.
- “컴포넌트”창 이용 방법
- “컴포넌트” 창에서 “버튼” 컴포넌트 선택
- 화면 캔버스내 생성 위치를 클릭(컴포넌트 초기값 설정에 설정된 크기로 생성됨)
- 표시할 문자열 지정 방법
- 생성된 버튼 컴포넌트를 선택하고, “속성”창의 “text” 속성 값 설정
- 생성된 버튼 컴포넌트를 더블클릭하고, 텍스트를 편집하여 설정
버튼 삭제
버튼 삭제는 아래의 방법중 한가지를 사용합니다.
- 버튼 클릭후, 키보드 <DELETE> 입력
- 버튼 클릭후, 키보드 <CONTROL> + “D” 입력
- 버튼 우클릭후, 컨텍스트 메뉴에서 “삭제” 메뉴 선택
버튼 주요 속성
버튼 컴포넌트 주요 속성은 아래와 같다.
| 용어 | 설명 |
|---|---|
| text | 표시할 문자열 |
| style_class | CSS 속성이 미리 정의된 버튼 CSS 클래스 유형(아래 내용 참조) |
| font | 문자열에 적용될 폰트 정보 |
| fore_color | 문자열 표시에 적용될 색상 |
| horz_align | 문자열 수평 정렬 방식 |
| text_margin | 문자열 외부 여백 |
style_class 속성
속성값이 “0:none”이 아닌 경우 아래의 속성값은 무시된다.
| 용어 | 설명 |
|---|---|
| fore_color | 문자열 색상 |
| border_color | 경계선 색상 |
| transparent | 배경색 투명 여부 |
| back_color | 배경 색상색 |
| back_color_opacity | 배경 색상 투명도 유형 |
| back_image | 배경 이미지 경로 |
| gradient_effect | 배경 그라데이션 적용 유형 |
| gradient_startcolor | 배경 그라데이션 시작 색샹 |
| gradient_endcolor | 배경 그라데이터 종료 색상 |
버튼 이미지 설정
버튼 컴포넌트 내부에 이미지를 설정하는 방법은 아래와 같다.
| 용어 | 설명 |
|---|---|
| image_show | 이미지 표시 여부 |
| image_normal | 일반 상태(포커스를 가지지 않고, 마우스가 올려져 있지 않은)에 표시할 이미지 경로 |
| image_focus | 포커스된 상태에 표시할 이미지 경로 |
| image_disable | 비활성된 상태에 표시할 표시할 이미지 경로 |
| image_down | 눌린 상태에 표시할 이미지 경로 |
| image_hover | 마우스가 올려져만 있는 상태별 표시할 이미지 경로 |
| imagesize | 이미지 크기 타입 |
| image_horz_align | 이미지 수평 정렬 유형 |
| image_vert_align | 이미지 수직 정렬 유형 |
| image_margin | 이미지 수평/수직 정렬 기준으로 이미지 외부 여백 간격 |
웹 아이콘 폰트 설정
버튼 텍스트에 웹 아이콘 폰트를 설정하는 방법은 아래와 같다.
| 용어 | 설명 |
|---|---|
| text_prefixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_postfixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_prefixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 텍스트 |
| text_postfixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 텍스트 |