컬럼 유형에 따른 class 적용
Bool/Radio 아이콘
Bool type에서는 BoolIcon col속성을 통해 체크/언체크 checkbox 아이콘을 다른 이미지나 Html 객체로 설정하실 수 있습니다.
Radio type에서는 RadioIcon col속성을 통해 체크/언체크 radio 아이콘을 다른 이미지나 Html 객체로 설정하실 수 있습니다.
.IBBool0, Bool0RO
.IBBool0, Bool0RO은 checkbox형태에서 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBBool0, IBBool0RO {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+IDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+IDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J+OqENvbG9yIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 언체크 checkbox |
커스텀 언체크 checkbox |
확인하기.IBBool1, Bool1RO
.IBBool1, Bool1RO은 checkbox형태에서 체크가 된 상태일 때 사용되는 형태의 이미지를 관리하는 클래스입니다.
.IBBool1, IBBool1RO {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=);
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 체크 checkbox |
커스텀 체크 checkbox |
.IBBool2, IBBool2RO
.IBBool2, Bool2RO은 radio형태에서 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBBool2, IBBool2RO {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg+IDwvZz48L3N2Zz4=)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 언체크 radio |
커스텀 언체크 checkbox |
.IBBool3, IBBool3RO
.IBBool3, IBBool3RO은 radio형태에서 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBBool3, IBBool3RO {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 체크 radio |
커스텀 체크 checkbox |
.IBRadio0Left, .IBRadio0Right
.IBRadio0Left, .IBRadio0Right은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBRadio0Left, .IBRadio0Right {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg+IDwvZz48L3N2Zz4=)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 다중 언체크 radio |
커스텀 다중 언체크 radio |
.IBRadio1Left, .IBRadio1Right
.IBRadio1Left, .IBRadio1Right은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBRadio1Left, .IBRadio1Right {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 다중 체크 radio |
커스텀 다중 체크 radio |
.IBRadio2Left, .IBRadio2Right
.IBRadio0Left, .IBRadio0Right은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBRadio2Left, .IBRadio2Right {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+IDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+IDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J+OqENvbG9yIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 다중 언체크 checkbox |
커스텀 다중 언체크 checkbox |
.IBRadio3Left, .IBRadio3Right
.IBRadio1Left, .IBRadio1Right은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBRadio3Left, .IBRadio3Right {
/* 이미지 크기 조정 */
background-size: 18px 18px;
/* 이미지 교 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=);
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 다중 체크 checkbox |
커스텀 다중 체크 checkbox |
.IBRadioChecked
.IBRadioChecked은 하나의 셀 안에 여러 개의 radio나 checkbox형태를 사용할 때, 선택된 대상의 Text를 관리하는 클래스입니다.
.IBRadioChecked {
/* 글자색 변경 */
color: red;
/* 폰트 굵기 변경 */
font-weight: bold;
}
| 기본 테마 | 커스텀 적용 |
|---|---|
| 기본 테마의 다중 체크 중 체크 대상의 Text |
커스텀 다중 체크 중 체크 대상의 Text |
Enum(DropDown) 아이콘
.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom
.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom은 DropDown에서 접힘 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom {
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCBmaWxsPSIjZmYwMDAwIiBkPSJNMTEuMzcsNy43NzZsLTMuMDYzLDMuMDYzYy0wLjA4MiwwLjA4Mi0wLjE5MSwwLjEzLTAuMzA4LDAuMTNzLTAuMjI2LTAuMDQ4LTAuMzA4LTAuMTNMNC42Myw3Ljc3Ng0KCUM0LjU0OCw3LjY5NCw0LjUsNy41ODUsNC41LDcuNDY5YzAtMC4yMzksMC4xOTgtMC40MzgsMC40MzgtMC40MzhoNi4xMjVjMC4yMzksMCwwLjQzOCwwLjE5OCwwLjQzOCwwLjQzOA0KCUMxMS41LDcuNTg1LDExLjQ1Miw3LjY5NCwxMS4zNyw3Ljc3NnoiLz4NCjwvc3ZnPg==);
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DropDown 접힙 상태 |
커스텀 DropDown 접힙 상태 |
.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom
.IBEnumHeaderLeft,.IBEnumHeaderRight은 DropDown에서 펼침 상태일 때 사용되는 이미지를 관리하는 클래스입니다.
.IBEnumHeaderLeft,.IBEnumHeaderRight {
/* 이미지 교체 */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSgxODAgOCA4KSIgZmlsbD0iI2ZmMDAwMCIgZD0iTTExLjM3LDcuNzc2bC0zLjA2MywzLjA2M2MtMC4wODIsMC4wODItMC4xOTEsMC4xMy0wLjMwOCwwLjEzcy0wLjIyNi0wLjA0OC0wLjMwOC0wLjEzTDQuNjMsNy43NzYNCglDNC41NDgsNy42OTQsNC41LDcuNTg1LDQuNSw3LjQ2OWMwLTAuMjM5LDAuMTk4LTAuNDM4LDAuNDM4LTAuNDM4aDYuMTI1YzAuMjM5LDAsMC40MzgsMC4xOTgsMC40MzgsMC40MzgNCglDMTEuNSw3LjU4NSwxMS40NTIsNy42OTQsMTEuMzcsNy43NzZ6Ii8+DQo8L3N2Zz4=);
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DropDown 펼침 상태 |
커스텀 DropDown 펼침 상태 |
.IBMenuFocus
.IBMenuFocus은 DropDown이 펼침 상태에서 값 선택 영역에서 선택 된 값이 있는 영역에 적용되는 클래스입니다.
.IBMenuFocus {
/* 배경색 변경 */
background: #87f344;
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DropDown 펼침 상태의 Focus |
커스텀 DropDown 펼침 상태의 Focus |
.IBMenuHover
.IBMenuHover은 DropDown이 펼침 상태에서 값 선택 영역에서 마우스가 Hover된 영역에 적용되는 클래스입니다.
.IBMenuHover {
/* 배경색 변경 */
background: #ddff1d;
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DropDown 펼침 상태의 Hover |
커스텀 DropDown 펼침 상태의 Hover |
.IBMenuFocus.IBMenuHover
.IBMenuFocus.IBMenuHover은 DropDown이 펼침에서 값 선택 영역에서 선택된 값이 있는 영역에 마우스가 Hover되었을 때 해당 영역에 적용되는 클래스입니다.
.IBMenuFocus.IBMenuHover {
/* 배경색 변경 */
background: #b46eff;
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DropDown 펼침 상태의 FocusHover |
커스텀 DropDown 펼침 상태의 FocusHover |
File 아이콘
.IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom
.IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom은 File정보가 존재할 경우, 출력 되는 파일 정보 제거 아이콘을 관리하는 클래스입니다.
.IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmYwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZjAwMDAiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+PGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c+PGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPjx0aXRsZT48L3RpdGxlPjxwYXRoIGQ9Ik0xMTQsMTAwbDQ5LTQ5YTkuOSw5LjksMCwwLDAtMTQtMTRMMTAwLDg2LDUxLDM3QTkuOSw5LjksMCwwLDAsMzcsNTFsNDksNDlMMzcsMTQ5YTkuOSw5LjksMCwwLDAsMTQsMTRsNDktNDksNDksNDlhOS45LDkuOSwwLDAsMCwxNC0xNFoiPjwvcGF0aD48L2c+PC9zdmc+)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 파일 정보 제거 아이콘 |
커스텀 파일 정보 제거 아이콘 |
.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom
.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom은 File type에서 파일 업로드 아이콘을 관리하는 클래스입니다.
.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDg1IDQ4NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8cG9seWdvbiBwb2ludHM9IjE2My4wNywyNjguNjI2IDMyMS45MywyNjguNjI2IDMyMS45MywxNTMuMDU2IDM4MC45MjYsMTUzLjA1NiAyNDIuNSwxLjM3NCAxMDQuMDc0LDE1My4wNTYgMTYzLjA3LDE1My4wNTYgIj48L3BvbHlnb24+IDxwYXRoIGQ9Ik0wLDMwOC42MjZ2MTc1aDQ4NXYtMTc1SDB6IE0zMzAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFMzMzguMjg0LDQxMS4xMjYsMzMwLDQxMS4xMjZ6IE00MDAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFM0MDguMjg0LDQxMS4xMjYsNDAwLDQxMS4xMjZ6Ij48L3BhdGg+IDwvZz4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 파일 업로드 아이콘 |
커스텀 파일 업로드 아이콘 |
Date/TimePicker등
.IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom
.IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom은 DatePicker의 아이콘을 관리하는 클래스입니다.
.IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik03IDExQzcgMTAuNDQ3NyA3LjQ0NzcyIDEwIDggMTBDOC41NTIyOCAxMCA5IDEwLjQ0NzcgOSAxMUM5IDExLjU1MjMgOC41NTIyOCAxMiA4IDEyQzcuNDQ3NzIgMTIgNyAxMS41NTIzIDcgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik03IDE2QzcgMTUuNDQ3NyA3LjQ0NzcyIDE1IDggMTVDOC41NTIyOCAxNSA5IDE1LjQ0NzcgOSAxNkM5IDE2LjU1MjMgOC41NTIyOCAxNyA4IDE3QzcuNDQ3NzIgMTcgNyAxNi41NTIzIDcgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMSAxMUMxMSAxMC40NDc3IDExLjQ0NzcgMTAgMTIgMTBDMTIuNTUyMyAxMCAxMyAxMC40NDc3IDEzIDExQzEzIDExLjU1MjMgMTIuNTUyMyAxMiAxMiAxMkMxMS40NDc3IDEyIDExIDExLjU1MjMgMTEgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMSAxNkMxMSAxNS40NDc3IDExLjQ0NzcgMTUgMTIgMTVDMTIuNTUyMyAxNSAxMyAxNS40NDc3IDEzIDE2QzEzIDE2LjU1MjMgMTIuNTUyMyAxNyAxMiAxN0MxMS40NDc3IDE3IDExIDE2LjU1MjMgMTEgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xNSAxMUMxNSAxMC40NDc3IDE1LjQ0NzcgMTAgMTYgMTBDMTYuNTUyMyAxMCAxNyAxMC40NDc3IDE3IDExQzE3IDExLjU1MjMgMTYuNTUyMyAxMiAxNiAxMkMxNS40NDc3IDEyIDE1IDExLjU1MjMgMTUgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xNSAxNkMxNSAxNS40NDc3IDE1LjQ0NzcgMTUgMTYgMTVDMTYuNTUyMyAxNSAxNyAxNS40NDc3IDE3IDE2QzE3IDE2LjU1MjMgMTYuNTUyMyAxNyAxNiAxN0MxNS40NDc3IDE3IDE1IDE2LjU1MjMgMTUgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCAyQzguNTUyMjggMiA5IDIuNDQ3NzIgOSAzVjRIMTVWM0MxNSAyLjQ0NzcyIDE1LjQ0NzcgMiAxNiAyQzE2LjU1MjMgMiAxNyAyLjQ0NzcyIDE3IDNWNEMxOS43NjE0IDQgMjIgNi4yMzg1OCAyMiA5VjE3QzIyIDE5Ljc2MTQgMTkuNzYxNCAyMiAxNyAyMkg3QzQuMjM4NTggMjIgMiAxOS43NjE0IDIgMTdWOUMyIDYuMjM4NTggNC4yMzg1OCA0IDcgNFYzQzcgMi40NDc3MiA3LjQ0NzcyIDIgOCAyWk03IDZDNS4zNDMxNSA2IDQgNy4zNDMxNSA0IDlWMTdDNCAxOC42NTY5IDUuMzQzMTUgMjAgNyAyMEgxN0MxOC42NTY5IDIwIDIwIDE4LjY1NjkgMjAgMTdWOUMyMCA3LjM0MzE1IDE4LjY1NjkgNiAxNyA2QzE3IDYuNTUyMjkgMTYuNTUyMyA3IDE2IDdDMTUuNDQ3NyA3IDE1IDYuNTUyMjkgMTUgNkg5QzkgNi41NTIyOSA4LjU1MjI4IDcgOCA3QzcuNDQ3NzIgNyA3IDYuNTUyMjkgNyA2WiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPiA8L2c+PC9zdmc+)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 DatePicker 아이콘 |
커스텀 DatePicker 아이콘 |
.IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom
.IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom은 TimePicker의 아이콘을 관리하는 클래스입니다.
.IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0yNTYsMEMxMTQuNiwwLDAsMTE0LjYsMCwyNTZzMTE0LjYsMjU2LDI1NiwyNTZzMjU2LTExNC42LDI1Ni0yNTZTMzk3LjQsMCwyNTYsMHogTTI1Niw0NjkuMyBjLTExNy44LDAtMjEzLjMtOTUuNS0yMTMuMy0yMTMuM2MwLTExNy44LDk1LjUtMjEzLjMsMjEzLjMtMjEzLjNjMTE3LjgsMCwyMTMuMyw5NS41LDIxMy4zLDIxMy4zIEM0NjkuMywzNzMuOCwzNzMuOCw0NjkuMywyNTYsNDY5LjN6IE0yNzcuMyw4NS4zaC00Mi43djE5MkgzODR2LTQyLjdIMjc3LjNWODUuM3oiPjwvcGF0aD4gPC9nPjwvc3ZnPg==)
}
| 기본 테마 | 커스텀 적용 |
|---|---|
기본 테마의 TimePicker 아이콘 |
커스텀 TimePicker 아이콘 |