# 헤더 영역(아이콘)

## 필수 입력 아이콘

### .IBRequired

`.IBRequired`는 Header영역에서 필수 값을 항목의 아이콘을 관리하는 클래스입니다.

    .IBRequired {
      /* 노란색 별 이미지를 빨간 색 별 이미지로 교체 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 필수 값 아이콘 | 커스텀 필수 값 아이콘

확인하기

## 정렬 아이콘

### .IBSort1Left, .IBSort1Right, .IBSort2Left, .IBSort2Right, .IBSort3Left, .IBSort3Right, .IBSort4Left, .IBSort4Right, .IBSort5Left, .IBSort5Right, .IBSort6Left, .IBSort6Right

정렬 아이콘은 최대 3순위까지의 오름차순, 내림차순 아이콘을 제공합니다.

`.IBSort1Left, .IBSort1Right`는 1순위 오름차순 정렬 아이콘을 관리하는 클래스입니다.

`.IBSort2Left, .IBSort2Right`는 2순위 오름차순 정렬 아이콘을 관리하는 클래스입니다.

`.IBSort3Left, .IBSort3Right`는 3순위 오름차순 정렬 아이콘을 관리하는 클래스입니다.

`.IBSort4Left, .IBSort4Right`는 1순위 내림차순 정렬 아이콘을 관리하는 클래스입니다.

`.IBSort5Left, .IBSort5Right`는 2순위 내림차순 정렬 아이콘을 관리하는 클래스입니다.

`.IBSort6Left, .IBSort6Right`는 3순위 내림차순 정렬 아이콘을 관리하는 클래스입니다.

    .IBSort1Left, .IBSort1Right {
      /* 1순위 오름차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }
    .IBSort4Left, .IBSort4Right {
      /* 1순위 내림차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 오름차순 아이콘 | 커스텀 1순위 오름차순 아이콘
기본 테마의 내림차순 아이콘 | 커스텀 1순위 내림차순 아이콘

확인하기

    .IBSort2Left, .IBSort2Right {
      /* 2순위 오름차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }
    .IBSort5Left, .IBSort5Right {
      /* 2순위 내림차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 오름차순 아이콘 | 커스텀 2순위 오름차순 아이콘
기본 테마의 내림차순 아이콘 | 커스텀 2순위 내림차순 아이콘

확인하기

    .IBSort3Left, .IBSort3Right {
      /* 3순위 오름차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }
    .IBSort6Left, .IBSort6Right {
      /* 3순위 내림차순 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 오름차순 아이콘 | 커스텀 3순위 오름차순 아이콘
기본 테마의 내림차순 아이콘 | 커스텀 3순위 내림차순 아이콘

확인하기

## 필터 다이얼로그 아이콘

### .IBFilterDialog0Right

`.IBFilterDialog0Right`는 필터 다이얼로그가 적용 전 상태의 아이콘을 관리하는 클래스입니다.

### .IBFilterDialog1Right

`.IBFilterDialog1Right`는 필터 다이얼로그가 적용 된 상태의 아이콘을 관리하는 클래스입니다.

    .IBFilterDialog0Right {
      /* 필터 다이얼로그 적용 전 상태 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }
    .IBFilterDialog1Right{
      /* 필터 다이얼로그 적용 된 상태 아이콘 변경 */
      background-image: url(data:image/svg+xml;base64, )
    }

기본 테마 | 커스텀 적용
--- | ---
기본 테마의 필터 다이얼로그 아이콘 | 커스텀 필터 다이얼로그 아이콘

확인하기

## 문자열 정렬

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

시트 생성 시점에서 헤더 행에서의 정렬 기능을 사용하기 위해서는 string형태로 값을 지정하던 사항을 object형태로 설정하고, 기존의 Text를 Value속성으로 설정하신 후, object 내에서 속성을 설정하셔서 정렬을 사용햐셔야 합니다.

시트가 생성이 완료된 이후에 헤더 행의 정렬 기능을 사용하시기 원하시는 경우에는 setAttribute func를 이용하시면 됩니다.

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

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

### .IBAlignLeft

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

### .IBAlignCenter

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

### .IBAlignRight

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

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

가로 정렬

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

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

### .IBVAlignTop

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

### .IBVAlignMiddle

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

### .IBVAlignBottom

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

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

세로 정렬