바디 영역

본 페이지는 스타일 영역 구분중 바디 영역에 대한 설명입니다.

다른 영역에 대한 설명은 아래 링크를 참고하세요.

• 사용자 스타일 개요
• 바디 영역
• 헤더, 풋터, 상태바등 주변 영역
• 셀, 데이터 영역
• 편집 영역

rg-root, rg-grid, rg-table

그리드의 최상위 스타일 클래스들로 기본 폰트, 색, 행 높이 등의 스타일을 결정합니다. 아래 기본 스타일에 포함되어 있는 속성값은 대한민국의 한글을 메인으로 선택하고 있습니다.

.rg-root {
  font-family: "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif;
  font-size: 12px;
  color: #000000;
  /* ... */
}

.rg-root .rg-table,
.rg-root .rg-table tr,
.rg-root .rg-table td {
  position: relative;
  margin: 0 !important;
  /* 0과 다르면 자동 행 계산 시 틀어진다! content div 전에서 설정할 것!*/
  padding: 0 !important;
  /* 0과 다르면 자동 행 계산 시 틀어진다! content div 전에서 설정할 것! */
  border-spacing: 0 !important;
  border-collapse: separate !important;
  box-sizing: border-box !important;
  line-height: 1.5em;
}

rg-empty-grid

그리드에 데이터가 없을때 그리드의 스타일을 지정합니다.

.rg-empty-grid {
  display: table;
  padding: 10%;
  background: #ffffff;
  /* 데이터 없음 안내 메시지를 파란색으로 변경 */
  color: #0000ff;
  font-size: 32px;
  text-align: center;
}

rg-body

그리드의 데이터 표시 영역에 대한 스타일을 지정합니다. 하지만, 이 스타일 클래스는 여러가지 하위 스타일 클래스와 중첩되기 때문에 이 클래스를 변경하는 것은 좋은 방법이 아닙니다.

아래 데모는 바디 영역의 색깔을 변경하는 예 입니다.

.rg-body,
.rg-fixed-body {
  /* 바디 영역의 색깔 변경 */
  background-color: #00f;
}

rg-hscrollbar, rg-vscrollbar

가로 세로 스크롤바 영역에 대한 스타일을 지정합니다. 스크롤바에는 여러개의 조각 영역들이 존재하기 때문에 스크롤바의 스타일을 변경하는 것은 주의가 필요합니다. 또, 스크롤바 스타일에는 화살표 버튼부분에 사용되는 base64 형식의 이미지가 포함되어 있습니다. 이 이미지도 사용자 스타일에 맞게 수정이 가능합니다.

아래 사용예는 세로 스크롤바의 색깔을 변경했습니다. 가로 스크롤바의 색깔과 세로 스크롤바의 색깔이 서로 다른것을 확인하세요.

.rg-vscrollbar .rg-scrollthumb {
  box-sizing: border-box;
  /* 스크롤바 버튼 색깔 변경 */
  background: #0000ff;
  border: 1px solid #b6bbc3;
  border-radius: 0.5em;
  touch-action: none;
  -ms-touch-action: none;
}

/* ... */

.rg-hscrollbar .rg-scroll-left {
  box-sizing: border-box;
  background: #eeeff1
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGRkZGRjt9LnN0MXtmaWxsOiM2NzY3Njc7fS5zdDJ7ZmlsbDojNjlCNjMxO30uc3Qze2ZpbGw6I0ZGQ0MwMjt9LnN0NHtmaWxsOiM5RTcyMTU7fS5zdDV7ZmlsbDojRTU2NjE1O30uc3Q2e2ZpbGw6IzJDM0U1MDt9LnN0N3tmaWxsOiNCM0IzQjM7fS5zdDh7ZmlsbDojMzQ2QkE5O30uc3Q5e2ZpbGw6I0IyM0EzQTt9LnN0MTB7ZmlsbDojMTcxNzE3O30uc3QxMXtmaWxsOiNGRkZGQjQ7fS5zdDEye2ZpbGw6IzY3QTQ1Qzt9PC9zdHlsZT48Zz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNOS41LDMuOWMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC40LDAuMywwLjQsMC43LDAsMS4xTDcuNSw4bDIuNiwyLjdjMC40LDAuNCwwLjQsMC44LDAsMS4xQzEwLDEyLDkuOCwxMi4xLDkuNiwxMi4xYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJMNS44LDguNUM1LjcsOC40LDUuNiw4LjIsNS42LDhjMC0wLjIsMC4xLTAuNCwwLjItMC42QzcuOSw1LjMsOSw0LjIsOSw0LjJDOS4xLDQsOS4zLDMuOSw5LjUsMy45eiIvPjwvZz48L3N2Zz4=)
    no-repeat 50% 50%;
  border: 1px solid #b6bbc3;
}