스타일 지정

컨트롤 스타일링

컨트롤 스타일링은 크기조절과 동일한 원리를 따릅니다. CSS를 사용하여 글꼴, 색상, 여백, 패딩을 재정의하여 기존 컨트롤의 모든 시각적 요소를 덮어 쓰고 원하는 방식으로 표현 할수 있습니다.

.grid {
  height: auto;
  max-height: 350px;
}
.grid .wj-header.wj-cell {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  border-right: solid 1px #404040;
  border-bottom: solid 1px #404040;
}
.grid .wj-cell {
  border: none;
  background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: #fff;
}
.grid .wj-state-selected {
  background: #000;
  color: #fff;
}
.grid .wj-state-multi-selected {
  background: #222222;
  color: #fff;
}

위 예제는 CSS를 사용하여 FlexGrid 컨트롤의 모양을 수정하는 방법을 보여줍니다. FlexGrid 샘플 중에 하나에 적용을 하면 그리드가 평범한 흑백 모양임을 알 수 있습니다.

CSS를 사용하는 다른 빠른 트릭을 통해서도 그리드에 적용할 수 있습니다. 격자의 셀 스타일을 변경하려면 "wj-cell" CSS 클래스를 사용하십시오. 다음 예제는 단순히 셀에서 테두리를 제거하고 배경을 흰색으로 설정합니다.

.grid .wj-cell {
  border: none;
  background-color: #fff;
}

코드-기반 스타일링

일반적으로 Wijmo 5 컨트롤은 레이아웃과 크기 조정을 위해 CSS를 사용하지만 일부의 경우에는 코드를 사용해야 할 때도 있습니다.

예를 들어, FlexGrid는 컨트롤을 렌더링하는 데 사용되는 글꼴을 기반으로 행 높이를 계산합니다. 그렇기 때문에 이 경우에는 CSS 기반 설정을 재정의하고 정확한 행 높이를 지정하는 것이 좋습니다. 예를 들면 다음과 같이 속성을 설정하여 이 작업을 수행 할 수 있습니다:

// 스크롤 가능한 영역에 행의 높이 설정
flex.rows.defaultSize = 34;
// 열 헤더 영역에 행의 높이 설정
flex.columnHeaders.rows.defaultSize = 40;