# 컬럼 유형에 따른 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, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 체크해제 checkbox | 커스텀 체크해제 checkbox

확인하기

### .IBBool1, Bool1RO

`.IBBool1, Bool1RO`은 checkbox형태에서 체크가 된 상태일 때 사용되는 형태의 이미지를 관리하는 클래스입니다.

    .IBBool1, IBBool1RO {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교 */
      background-image: url(data:image/svg+xml;base64, );
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 체크 checkbox | 커스텀 체크 checkbox

확인하기

### .IBBool2, IBBool2RO

`.IBBool2, Bool2RO`은 radio형태에서 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBBool2, IBBool2RO {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 체크해제 radio | 커스텀 체크해제 checkbox

확인하기

### .IBBool3, IBBool3RO

`.IBBool3, IBBool3RO`은 radio형태에서 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBBool3, IBBool3RO {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 체크 radio | 커스텀 체크 checkbox

확인하기

### .IBRadio0Left, .IBRadio0Right

`.IBRadio0Left, .IBRadio0Right`은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBRadio0Left, .IBRadio0Right {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 다중 체크해제 radio | 커스텀 다중 체크해제 radio

확인하기

### .IBRadio1Left, .IBRadio1Right

`.IBRadio1Left, .IBRadio1Right`은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBRadio1Left, .IBRadio1Right {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 다중 체크 radio | 커스텀 다중 체크 radio

확인하기

### .IBRadio2Left, .IBRadio2Right

`.IBRadio0Left, .IBRadio0Right`은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBRadio2Left, .IBRadio2Right {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 다중 체크해제 checkbox | 커스텀 다중 체크해제 checkbox

확인하기

### .IBRadio3Left, .IBRadio3Right

`.IBRadio1Left, .IBRadio1Right`은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다.

    .IBRadio3Left, .IBRadio3Right {
      /* 이미지 크기 조정 */
      background-size: 18px 18px;
      /* 이미지 교 */
      background-image: url(data:image/svg+xml;base64, );
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 다중 체크 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, );
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 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, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 파일 정보 제거 아이콘 | 커스텀 파일 정보 제거 아이콘

확인하기

### .IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom

`.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom`은 File type에서 파일 업로드 아이콘을 관리하는 클래스입니다.

    .IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom {
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 파일 업로드 아이콘 | 커스텀 파일 업로드 아이콘

확인하기

## 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, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 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, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 TimePicker 아이콘 | 커스텀 TimePicker 아이콘

확인하기