# Focus, Hover, Select에 따른 스타일 적용

## 포커스 영역

시트에서 Focus 시, Focus 된 셀은 FocusCell로, 해당 행에서 그 외의 영역은 FocusRow로 나뉘어집니다.

### .IBFocusCellBorder

`.IBFocusCellBorder`은 Focus 된 Cell의 Border를 관리하는 클래스입니다.

    .IBFocusCellBorder {
      /* border 색상 변경 */
      border: 2px solid #ec5151;
    }

기본 테마의 Focus 행

커스텀 Focus Cell Border

확인하기

### .IBFocusRowBackground

`.IBFocusRowBackground`은 Focus 된 행에 배경색을 관리하는 클래스입니다.

    .IBFocusRowBackground {
      /* 포커스 행 배경색 변경 */
      background-color: #ba37e333;
    }

기본 테마의 Focus 행

커스텀 Focus Row Background

확인하기

### .IBFocusRowBorder

`.IBFocusRowBorder`은 Focus 된 행에 출력 되는 Border를 관리하는 클래스입니다.

    .IBFocusRowBorder {
      /* border 두께  색상 변경 */
      border: 2px solid #ff8500;
    }

기본 테마의 Focus 행

커스텀 Focus Row Border

확인하기

## Hover 행, 셀

시트에서 Hover 시, Hover 된 셀은 HoverCell로, 해당 행에서 그 외의 영역은 HoverRow로 나뉘어집니다.

### .IBColorHoveredCell

`.IBColorHoveredCell`은 Hover 된 셀의 배경색을 관리하는 클래스입니다.

시트 생성 시점에 해당 클래스의 정보를 읽어 Hover 된 셀의 배경색에 적용됩니다. 시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다.

예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다.

    .IBColorHoveredCell {
      /* 배경색 변경 */
      background-color: #ffaffb !important;
    }

기본 테마의 Hover 행

커스텀 Hover Cell Background

확인하기

### .IBHoverCellBorder

`.IBHoverCellBorder`은 Hover 된 셀의 Border를 관리하는 클래스입니다.

    .IBHoverCellBorder {
      /* border 두께 및 색상 변경 */
      border: 2px solid #f81313;
    }

기본 테마의 Hover 행

커스텀 Hover Cell Border

확인하기

### .IBHoverRowBackground

`.IBHoverRowBackground`은 Hover 된 행의 배경색을 관리하는 클래스입니다.

    .IBHoverRowBackground {
      /* 배경색 변경 */
      background: #5a19ff1a;
    }

기본 테마의 Hover 행

커스텀 Hover Row Background

확인하기

### .IBHoverRowBorder

`.IBHoverRowBorder`은 Hover 된 행에 출력 되는 Border를 관리하는 클래스입니다.

    .IBHoverRowBorder {
      /* border 두께 및 색상 변경 */
      border: 2px solid #ae59ff;
    }

기본 테마의 Hover 행

커스텀 Hover Row Border

확인하기

## 선택(Select) 영역

### .IBColorSelected,.IBColorSelectedCell

`.IBColorSelected,.IBColorSelectedCell`은 시트 생성 시점에 해당 클래스의 정보를 읽어 선택(Selct)된 영역에 해당하는 셀에 배경색을 적용됩니다.

시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다.

예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다.

    .IBColorSelected,.IBColorSelectedCell {
      /* 배경색 변경 */
      background-color: #dcbdff;
    }

기본 테마의 Selected

커스텀 Selected

확인하기