헤더 영역(아이콘)

필수 입력 아이콘

.IBRequired

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

.IBRequired {
  /* 노란색 별 이미지를 빨간 색 별 이미지로 교체 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ny45NCA0Ny45NCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0Ny45NCA0Ny45NCI+PHBhdGggZD0iTTI2LjI4NSAyLjQ4Nmw1LjQwNyAxMC45NTZjLjM3Ni43NjIgMS4xMDMgMS4yOSAxLjk0NCAxLjQxMmwxMi4wOTEgMS43NTdjMi4xMTguMzA4IDIuOTYzIDIuOTEgMS40MzEgNC40MDNsLTguNzQ5IDguNTI4Yy0uNjA4LjU5My0uODg2IDEuNDQ4LS43NDIgMi4yODVsMi4wNjUgMTIuMDQyYy4zNjIgMi4xMDktMS44NTIgMy43MTctMy43NDYgMi43MjJsLTEwLjgxNC01LjY4NWMtLjc1Mi0uMzk1LTEuNjUxLS4zOTUtMi40MDMgMGwtMTAuODE0IDUuNjg1Yy0xLjg5NC45OTYtNC4xMDgtLjYxMy0zLjc0Ni0yLjcyMmwyLjA2NS0xMi4wNDJjLjE0NC0uODM3LS4xMzQtMS42OTItLjc0Mi0yLjI4NWwtOC43NDktOC41MjhjLTEuNTMyLTEuNDk0LS42ODctNC4wOTYgMS40MzEtNC40MDNsMTIuMDkxLTEuNzU3Yy44NDEtLjEyMiAxLjU2OC0uNjUgMS45NDQtMS40MTJsNS40MDctMTAuOTU2Yy45NDYtMS45MTkgMy42ODItMS45MTkgNC42MjkgMHoiIGZpbGw9IiNmZjAwMDAiLz48L3N2Zz4=)
}
기본 테마 커스텀 적용
기본 테마의 필수 값 아이콘
기본 테마의 필수 값 아이콘		 커스텀 필수 값 아이콘
커스텀 필수 값 아이콘 적용

확인하기확인하기

정렬 아이콘

.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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4=)
}
.IBSort4Left, .IBSort4Right {
  /* 1순위 내림차순 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIuMDAxIDk3LjQwMnYxMjUuMTk2TTI3Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4=)
}
기본 테마 커스텀 적용
기본 테마의 오름차순 아이콘
기본 테마의 오름차순 아이콘		 커스텀 1순위 오름차순 아이콘
커스텀 1순위 오름차순 아이콘 적용
기본 테마의 내림차순 아이콘
기본 테마의 내림차순 아이콘		 커스텀 1순위 내림차순 아이콘
커스텀 1순위 내림차순 아이콘 적용

확인하기확인하기

.IBSort2Left, .IBSort2Right {
  /* 2순위 오름차순 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4=)
}
.IBSort5Left, .IBSort5Right {
  /* 2순위 내림차순 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM3IDIyMi41OTh2LTEyNS4xOTZNMjkxLjEyMiAxNjguNDc3bC01NC4xMjIgNTQuMTIxLTU0LjEyMi01NC4xMjEiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODEuMDAxIDk3LjQwMnYxMjUuMTk2TTI2Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4=)
}
기본 테마 커스텀 적용
기본 테마의 오름차순 아이콘
기본 테마의 오름차순 아이콘		 커스텀 2순위 오름차순 아이콘
커스텀 2순위 오름차순 아이콘 적용
기본 테마의 내림차순 아이콘
기본 테마의 내림차순 아이콘		 커스텀 2순위 내림차순 아이콘
커스텀 2순위 내림차순 아이콘 적용

확인하기확인하기

.IBSort3Left, .IBSort3Right {
  /* 3순위 오름차순 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiPjxwYXRoIGQ9Ik0yMzcuOTk5IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjMgNTQuMTIyLTU0LjEyMS01NC4xMjIiLz48L2c+PC9nPjwvc3ZnPg==)
}
.IBSort6Left, .IBSort6Right {
  /* 3순위 내림차순 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiI+PHBhdGggZD0iTTgyLjAwMSA5Ny40MDJ2MTI1LjE5Nk0yNy44NzggMTUxLjUyNGw1NC4xMjMtNTQuMTIyIDU0LjEyMSA1NC4xMjIiLz48L2c+PC9nPjwvc3ZnPg==)
}
기본 테마 커스텀 적용
기본 테마의 오름차순 아이콘
기본 테마의 오름차순 아이콘		 커스텀 3순위 오름차순 아이콘
커스텀 3순위 오름차순 아이콘 적용
기본 테마의 내림차순 아이콘
기본 테마의 내림차순 아이콘		 커스텀 3순위 내림차순 아이콘
커스텀 3순위 내림차순 아이콘 적용

확인하기확인하기

필터 다이얼로그 아이콘

.IBFilterDialog0Right

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

.IBFilterDialog1Right

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

.IBFilterDialog0Right {
  /* 필터 다이얼로그 적용 전 상태 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+IDwvZz48L3N2Zz4=)
}
.IBFilterDialog1Right{
  /* 필터 다이얼로그 적용 된 상태 아이콘 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+IDwvZz48L3N2Zz4=)
}
기본 테마 커스텀 적용
기본 테마의 필터 다이얼로그 아이콘
기본 테마의 필터 다이얼로그 아이콘		 커스텀 필터 다이얼로그 아이콘
커스텀 필터 다이얼로그 아이콘 적용

확인하기확인하기

문자열 정렬

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},
  ]
}

세로 정렬

세로 정렬