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 패키지에는 기본 스타일외에 다양한 테마를 적용할 수 있는 스타일 파일도 기본 제공됩니다. 테마에 대한 내용은 테마 가이드를 참조하세요.