버튼 퍼블리싱에 관련된 기본 정보를 제공한다.
버튼 컴포넌트는 클릭시 동작을 수행하기 위한 기능을 제공한댜.
버튼 컴포넌트는 배경, 경계선등을 처리하기 위한 BUTTON 요소와 BUTTON 내부에 배경 이미지를 표시하기 위한 DIV 요소와 DIV 요소 내부에 문자열을 표시히가 위한 SPAN 요소로 구성된다.
버튼 생성 방법은 아래와 같다.
버튼 삭제는 아래의 방법중 한가지를 사용합니다.
버튼 컴포넌트 주요 속성은 아래와 같다.
| 용어 | 설명 |
|---|---|
| text | 표시할 문자열 |
| style_class | CSS 속성이 미리 정의된 버튼 CSS 클래스 유형(아래 내용 참조) |
| font | 문자열에 적용될 폰트 정보 |
| fore_color | 문자열 표시에 적용될 색상 |
| horz_align | 문자열 수평 정렬 방식 |
| text_margin | 문자열 외부 여백 |
속성값이 “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 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 텍스트 |