스타일링

webPonent Grid 2.0  Styling

 웹포넌트 그리드는 webponent.grid.css라는 코어 CSS파일을 가지고 있습니다.

이 코어파일은 절대 수정해서는 안됩니다. 스타일링은  webponent.grid.css를 확장해서 해 주세요. 배포버전에는 기본테마인 flat테마를 비롯해서 5개의 테마가 제공됩니다.

  • webponent.grid.cosmo.css
  • webponent.grid.modern.css
  • webponent.grid.newspaper.css
  • webponent.grid.snow.css
  • webponent.grid.spacelab.css

 이상의 테마를 참조하시면 문제없이 스타일링을 하실 수 있습니다. 또한 그리드 스타일링에 사용되는 클래스는 CI-GRID라는 프리픽스를 가지고 있습니다.

그리드를 구성하는 대부분의 마크업은 고유의 클래스명을 가지고 있습니다. 따라서 CSS의 복잡한 캐스케이딩 없이도 해당 마크업의 클래스에 바로 접근해서 스타일링을 하실 수 있습니다.

다음은 그리드에서 사용되는 클래스 이름들 입니다.

js
	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'
		}
	};