# 데이터(본문 영역)

## 짝/홀수 행 배경색

짝수 혹은 홀수 행일 때 강조 배경색은 Alternate cfg의 설정에 따라 적용됩니다.

### .IBColorDefault

`.IBColorDefault`는 Alternate 대상이 아닌 일반 데이터행의 배경색을 관리하는 클래스입니다.

### .IBColorAlternate

`.IBColorAlternate`는 Alternate 대상인 데이터행의 배경색을 관리하는 클래스입니다.

`.IBColorDefault`와 `.IBColorAlternate` 클래스는 시트 생성 시점에 읽어서 적용되기 때문에 생성 이후 css를 변경하더라도 적용되지 않습니다.

Alternate cfg는 `.IBColorAlternate`외에 AlternateColor row와 외부 클래스를 이용하는 AlternateClass row를 통해 배경색을 설정하실 수 있습니다.

    var OPT = {
      Def: {
        Row: {
          AlternateColor: 'skyblue'
        }
      }
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 Alternate | 커스텀 Alternate

## 행 높이 설정

행의 높이가 css를 통해 수정되었을 때에는 정상적으로 스크롤 동작이 이뤄지지 않을 수 있습니다.

행 높이 변경이 필요한 경우, css가 아니라 속성을 통해서 설정을 진행해주시기 바랍니다.

먼저, 행의 최소 높이는 Size cfg에 맞춰 설정해주시기 바랍니다.

그 외의 행 높이 설정은 Height row를 통해 설정하셔야 합니다.

    var OPT = {
      Def: {
        Row: {
          Height: 100
        }
      }
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 행의 기본 높이 | 행의 높이 100px

## 셀 여백 설정

### .IBType

`.IBType`은 시트의 여백을 관리하는 클래스입니다.

    .IBType {
      /* 좌우 여백 제거 */
      padding: 6px 0px 5px 0px;
    }

기본 테마의 여백

셀의 좌우 여백 제거

확인하기

## 셀 데이터 정렬

IBSheet에서 내에서 문자열 정렬 기능을 사용하실 경우, 별도의 css를 이용하여 정렬하시지 마시고, 정렬 속성 (`Align`, `VAlign`)을 통해 정렬하시기를 권장 드립니다.

왼쪽, 가운데, 오른쪽의 가로 정렬은 Align속성 Align row, Align col, Align cell을 통해 이루어집니다.

해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다.

### .IBAlignLeft

`.IBAlignLeft`은 왼쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

### .IBAlignCenter

`.IBAlignCenter`은 가운데 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

### .IBAlignRight

`.IBAlignRight`은 오른쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

    var OPT = {
      Def: {
        Row: {
          Height: 50
        }
      }
      Cols: [
        {"Header": "Align Left","Type": "Text","Name": "TextData1","Width": 120,"Align": "Left","CanEdit": 1},
        {"Header": "Align Center","Type": "Text","Name": "TextData2","Width": 120,"Align": "Center","CanEdit": 1},
        {"Header": "Align Right","Type": "Text","Name": "TextData3","Width": 120,"Align": "Right","CanEdit": 1},
      ]
    }

가로 정렬

상단, 중단, 단의 세로 정렬은 VAlign속성 VAlign row, VAlign col, VAlign cell을 통해 이루어집니다.

해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다.

### .IBVAlignTop

`.IBVAlignTop`은 상단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

### .IBVAlignMiddle

`.IBVAlignMiddle`은 중단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

### .IBVAlignBottom

`.IBVAlignBottom`은 하단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

    var OPT = {
      Def: {
        Row: {
          Height: 50
        }
      }
      Cols: [
        {"Header": "VAlign Top","Type": "Text","Name": "TextData1","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Top'},
        {"Header": "VAlign Middle","Type": "Text","Name": "TextData2","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Middle'},
        {"Header": "VAlign Bottom","Type": "Text","Name": "TextData3","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Bottom'},
      ]
    }

세로 정렬

## NoData행 (조회된 데이터가 없을 때 사용)

NoDataMessage cfg 설정을 통해, 생성 후 혹은 조회 후 데이터가 없을 경우 데이터 영역에 '조회된 데이터가 없습니다.' 문구를 출력합니다.

NoDataMessage cfg가 설정되어 있을 때, NoDataMiddle cfg를 설정하여 해당 메시지의 위치를 데이터 영역의 중단 영역으로 위치하도록 조정할 수 있습니다.

### .IBNoDataRow

`.IBNoDataRow`는 조회된 데이터가 없는 경우, 데이터가 없음을 표시하는 NoData 행을 관리하는 클래스입니다.

    .IBNoDataRow {
      /* NoData행의 배경색을 연한 파랑색으로 */
      background-color: #c1edff;
      /* 출력 되는 문구의 글씨 굵기를 굵게 */
      font-weight: bold;
    }

기본 테마에서 NoDataMessage: 3 적용

기본 테마에서 NoDataMessage: 3, NoDataMiddle: true 적용

커스텀 배경색 및 글자 굵기 적용

확인하기

## 편집 모드 스타일

### .IBEditInput, .IBEditTextarea

`.IBEditInput, .IBEditTextarea`는 별도의 편집 기능을 가지는 Enum, Radio, Bool Type 외에 편집 모드 활성화 시 해당 셀의 데이터를 수정 가능한 Input 혹은 TextArea를 관리하는 클래스입니다.

    .IBEditInput, .IBEditTextarea {
      /* 글자색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */
      color: yellow !important;
      /* 배경색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */
      background-color: green !important;
    }

기본 테마의 편집 모드 활성화 시

커스텀 배경색 및 글자색 적용

확인하기

### .IBEditCellBorder

`.IBEditCellBorder`는 편집 모드가 활성화 되었을 때, 해당 영역의 border를 관리하는 클래스입니다.

    .IBEditCellBorder {
      /* border 색상 변경 */
      border-color: red;
    }

기본 테마의 편집 모드 활성화 시

커스텀 Border 색 적용

확인하기