웹포넌트 그리드는 webponent.grid.css라는 코어 CSS파일을 가지고 있습니다.
이 코어파일은 절대 수정해서는 안됩니다. 스타일링은 webponent.grid.css를 확장해서 해 주세요. 배포버전에는 기본테마인 flat테마를 비롯해서 5개의 테마가 제공됩니다.
이상의 테마를 참조하시면 문제없이 스타일링을 하실 수 있습니다. 또한 그리드 스타일링에 사용되는 클래스는 CI-GRID라는 프리픽스를 가지고 있습니다.
그리드를 구성하는 대부분의 마크업은 고유의 클래스명을 가지고 있습니다. 따라서 CSS의 복잡한 캐스케이딩 없이도 해당 마크업의 클래스에 바로 접근해서 스타일링을 하실 수 있습니다.
다음은 그리드에서 사용되는 클래스 이름들 입니다.
var GRID_CLASS = { AREA : 'CI-GRID-AREA', WRAPPER : 'CI-GRID-WRAPPER', MAIN : { WRAPPER : 'CI-GRID-MAIN-WRAPPER', HEADER : { WRAPPER : 'CI-GRID-HEADER-WRAPPER', SCROLLER : 'CI-GRID-HEADER-SCROLLER', INNER : 'CI-GRID-HEADER-INNER', TABLE : 'CI-GRID-HEADER-TABLE' }, BODY : { WRAPPER : 'CI-GRID-BODY-WRAPPER', SCROLLER : 'CI-GRID-BODY-SCROLLER', INNER : 'CI-GRID-BODY-INNER', TABLE : 'CI-GRID-BODY-TABLE' } }, FIXED : { WRAPPER : 'CI-GRID-FIXED-WRAPPER', HEADER : { WRAPPER : 'CI-GRID-FIXED-HEADER-WRAPPER', SCROLLER : 'CI-GRID-FIXED-HEADER-SCROLLER', INNER : 'CI-GRID-FIXED-HEADER-INNER', TABLE : 'CI-GRID-FIXED-HEADER-TABLE' }, BODY : { WRAPPER : 'CI-GRID-FIXED-BODY-WRAPPER', SCROLLER : 'CI-GRID-FIXED-BODY-SCROLLER', INNER : 'CI-GRID-FIXED-BODY-INNER', TABLE : 'CI-GRID-FIXED-BODY-TABLE' } }, DESIGN : { BORDER : { BOTTOM : 'CI-GRID-BORDER-BOTTOM', RIGHT : 'CI-GRID-BORDER-RIGHT', FIXED : 'CI-GRID-BORDER-FIXED' }, RECT : { RIGHT_TOP : 'CI-GRID-RECT-RIGHT-TOP' } }, STYLE : { EVEN : 'CI-GRID-EVEN', ODD : 'CI-GRID-ODD', CELL_HIDDEN : 'CI-GRID-CELL-HIDDEN ', ALIGN_LEFT : 'CI-GRID-ALIGN-LEFT', ALIGN_CENTER : 'CI-GRID-ALIGN-CENTER', ALIGN_RIGHT : 'CI-GRID-ALIGN-RIGHT' }, FUNCTIONAL : { HEADER : { TITLE : 'CI-GRID-HEADER-TITLE', MICELINOUS : 'CI-GRID-HEADER-MICELINOUS' }, RESIZE : { WRAPPER : 'CI-GRID-RESIZER', INNER : 'CI-GRID-RESIZER-INNER', HELPER : 'CI-GRID-RESIZER-HELPER' }, FREEZE : { SCROLLER : 'CI-FREEZE-SCROLLER', INNER : 'CI-FREEZE-SCROLLER-INNER' }, PAGING : { WRAPPER : 'CI-GRID-PAGING', A : 'CI-GRID-PAGING-A', SELECTED_A : 'CI-GRID-PAGING-A-SELECTED', LEFT : 'CI-GRID-PAGING-LEFT', RIGHT : 'CI-GRID-PAGING-RIGHT', START : 'CI-GRID-PAGING-START', END : 'CI-GRID-PAGING-END', DISABLED_LEFT : 'CI-GRID-PAGING-LEFT-DISABLED', DISABLED_RIGHT : 'CI-GRID-PAGING-RIGHT-DISABLED', DISABLED_START : 'CI-GRID-PAGING-START-DISABLED', DISABLED_END : 'CI-GRID-PAGING-END-DISABLED' }, SORTING : { SORTER : 'CI-GRID-SORTER', NONE : 'CI-GRID-SORTER-NONE', DESC : 'CI-GRID-SORTER-DESC', ASC : 'CI-GRID-SORTER-ASC' }, GROUPING_INDI : 'CI-GRID-GROUPING-INDI', ROW_SELECTED : 'CI-GRID-ROW-SELECTED' } };