스타일

styleclassname
데이터/헤더 영역 스타일(글자 정렬, 헤더 표시 등)

styleclassname 속성은 QCELL 컬럼 정의에서 열(Cell)의 데이터/헤더 영역에 커스텀 CSS 클래스를 적용하기 위해 사용됩니다.

이 속성을 통해 글자 정렬, 색상, 배경, 아이콘 등 다양한 스타일을 자유롭게 지정할 수 있습니다.
화면 페이지에 직접 CSS 클래스를 정의하여 사용하거나 qcell.css 파일(사용자 정의 테마)을 통해 CSS 클래스를 불러와 사용할 수 있습니다.

저희는 qcell.css 파일(사용자 정의 테마)에서 헤더/데이터 영역의 CSS 클래스를 정의하고 불러와 사용하도록 권장하고 있습니다.

1️⃣ 데이터 영역

styleclassname"data" 를 설정하면, 해당 영역에 지정한 CSS 클래스가 동적으로 적용됩니다.

.align-center {
text-align: center !important;
}
.align-right {
text-align: center !important;
}
.align-left {
text-align: center !important;
}

예시로 qcell.css 파일(커스터 마이징한 테마)에 데이터 영역 글자의 중앙, 오른쪽, 왼쪽 정렬을 사용할 css 클래스를 정의합니다.

이후 컬럼에 styleclassname를 통해 정의한 css 클래스를 불러옵니다.

Ex)

{
  key: "index",
  width: "40px",
  title: ["번호",],
  styleclassname: { "data": "align-center" } 
}

☑️ styleclassname.data를 통해 데이터 셀에만 스타일을 적용합니다.

2️⃣ 헤더 영역

styleclassname "header" 를 통해 컬럼 헤더에 배경색, 텍스트 색상, 배경 이미지 등 다양한 CSS 스타일을 적용할 수 있습니다.

.rt-qc-colheaderrequired  {
  background: url(../img/required.png) no-repeat;
  background-color: #FDF4E3;
  color: red
}

예시로 qcell.css 파일(커스터 마이징한 테마)에 헤더 영역의 필수 컬럼을 표시할 이미지, 이미지 경로, 글자 색상 등을 사용할 css 클래스를 정의합니다.

이후 컬럼에 styleclassname를 통해 정의한 css 클래스를 불러옵니다.

Ex)

{
  key: "index",
  width: "40px",
  title: ["번호",],
  styleclassname: { "header": "rt-qc-colheaderrequired" } 
  options: { required: true },
}

☑️ required: true와 함께 사용할 경우, 필수 입력 필드 스타일링에 적합합니다.

💡 참고사항

▪️CSS 클래스는 직접 정의하거나 QCELL에서 제공하는 테마(qcell.css)에 따라 추가할 수 있습니다.

▪️스타일 클래스는 셀 단위 스타일보다 우선순위가 낮으며, 동적 스타일(setCellStyle 등) 보다 적용 시점이 빠릅니다.

▪️실제 스타일 우선순위:
styleclassname < 동적 스타일 < 포커스/선택 스타일

---