사용자 스타일

RealGrid2의 스타일은 사용자가 직접 CSS 파일을 수정하여 원하는 스타일로 변경 할 수 있습니다. 스타일을 변경하기 위해서는 RealGrid2 각각의 영역에 어떤 스타일 클래스가 적용되어 있는지 아는것이 중요합니다.

본 가이드에 설명된 스타일 클래스가 RealGrid2의 모든 스타일 클래스는 아니지만 그리드를 구성하는 중요한 영역에 대한 클래스 명칭과 그 사용예를 작성해 놓았습니다.

주요 클래스 명칭

• 바디 영역
  • rg-root, rg-grid, rg-table
  • rg-body
  • rg-hscrollbar rg-vscrollbar
• 헤더, 풋터, 상태바등 주변 영역
  • rg-head, rg-header
  • rg-sum
  • rg-foot, rg-footer
  • rg-rowindicator
  • rg-statebar
  • rg-checkbar, rg-checkbox, rg-radio
• 셀, 데이터 영역
  • rg-button
  • rg-fixed
  • rg-rowgroup
  • rg-focus
  • rg-selection
• 편집 영역
  • rg-editor-*
  • rg-form-*
  • rg-dropdown-*
  • rg-multicheck, rg-multicheck-*
  • rg-calendar, rg-cal-*
• 기타 영역
  • rg-popup-menu
  • rg-group-panel
  • rg-waiting
  • rg-filter
  • rg-tooltip
  • rg-toast
  • rg-progress
  • rg-validation-*
• 렌더러
  • rg-bar-renderer
  • rg-image-renderer
  • rg-icon-renderer
  • rg-check-renderer
  • rg-button-renderer
  • rg-link-renderer
  • rg-shape-renderer
  • rg-signalbar-renderer
  • rg-spark*-renderer
  • rg-code*-renderer
• 트리 영역
  • rg-tree

index.html 파일에서 기본 스타일 파일 주석처리

본 가이드의 데모 그리드들은 모두 기본 스타일 파일을 제거하고 새로운 CSS 파일에 스타일들을 추가하며 설명했습니다. 따라서 데모를 잘 이해하려면 데모 그리드 아래에 붙어 있는 소스코드 보기 버튼을 이용해 CSS 파일의 내용을 참고하세요.

<!-- RealGrid -->
<!-- <link href="/public/realgrid.2.0.2/realgrid-style.css" rel="stylesheet" /> -->
<script src="/public/realgrid.2.0.2/realgrid-lic.js"></script>
<script src="/public/realgrid.2.0.2/realgrid.2.0.2.min.js"></script>