RealGrid2 스타일

RealGrid2 스타일은 이전 버전의 RealGrid와 달리 거의 모든 영역의 스타일을 표준 스타일시트 언어인 CSS (opens in a new tab)의 Rule에 따른 클래스 형태로 제공합니다.

기본 스타일

RealGrid2 패키지에는 기본 스타일 및 테마 스타일이 제공됩니다. 패키지에 포함된 realgrid-style.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>

스타일 파일이 적용된 그리드

이번에는 스타일 파일의 주석을 제거하고 기본 스타일을 적용해 보겠습니다.

<!-- 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>

사용자 스타일

RealGrid2는 기본 스타일에 지정된 클래스를 이용해 사용자 스타일을 만들수 있습니다.

사용자 스타일의 주요 클래스에 대한 자세한 설명은 사용자 스타일 가이드를 참고하세요.