자바 FX CSS 디자인 정리
자바 fx 개발에 CSS로 디자인 입힐 때 자주 사용하는 클래스 스타일을 정리해 봤다.
border 스타일
| -fx-border-color | 경계선의 색상 |
| -fx-border-insects | 내부 경계선의 위치 |
| -fx-border-radius | border 모서리 부분의 원의 반지금 |
| -fx-border-style | 경계선 스타일 |
| -fx-border-width | 경계선 굵기 |
background 스타일
| -fx-background-color | 배경 색상 |
| -fx-background-image | 배경 이미지 |
| -fx-background-position | 배경 위치 |
| -fx-background-repeat | 배경 이미지 반복 여부 |
font 스타일
| -fx-font-family | 폰트 종류 |
| -fx-font-size | 폰트 사이즈 |
| -fx-font-style | 폰트 스타일 |
| -fx-font-weight | 폰트 굵기 |
tableview 스타일
| .table-view | 테이블뷰 클래스 |
| .table-view-focused | 테이블뷰 선택 클래스 |
| .table-row-cell | 테이블뷰 row 클래스 |
| .table-row-cell:odd | 테이블뷰 짝수 row 클래스 |
| .table-row-cell:seleected | 테이블뷰 row 선택 클래스 |
| .table-view .column-header | 테이블뷰의 컬럼 헤더 클래스 |
테이블뷰 스타일 적용
- -fa-background-color : 테이블뷰 백그라운드 투명 처리(투명처리를 하지 않으면 선택 시 테두리에 색상이 적용된다.)
- -fx-border-color : 테이블뷰 보더 색상
- -fx-border-width : 테이블뷰 보더 넓이 (top, right, bottom, left)
.table-view{
-fx-background-color: transparent;
-fx-border-color: #ccc;
-fx-border-width: 2 0 0 0;
}
테이블 로우 셀 스타일 적용
- -fx-cell-size : 테이블뷰 로우의 높이값 설정
.table-row-cell{
-fx-cell-size: 34px;
-fx-background-color: white;
-fx-border-width: 0 0 1 0;
-fx-border-color: #ccc;
}
테이블 cell 스타일 적용
- .table-row-cell에서 백그라운드를 white로 변경하면 컬럼 선택 시 글씨도 흰색으로 바뀌기 때문에 -fx-text-fill로 글자색을 변경
.table-view .table-cell{
-fx-text-fill: black;
}
테이블 헤더 스타일 적용
.table-view .column-header{
-fx-background-color: linear-gradient(#fff, #000);
-fx-pref-height: 40px;
-fx-border-color: #bfbfbf;
-fx-border-width: 0 0 1 0;
}
테이블 컬럼 스타일 적용
- baseline-left, baseline-center, baseline-right: vertical 중간에 왼쪽, 가운데, 오른쪽 정렬
- bottom-center, bottom-right : vertical bottom에 중간, 오른쪽 정렬
- top-center, top-left, top-right : vertical top에 중간, 왼쪽, 오른쪽 정렬
.table-column{
-fx-alignment: baseline-left;
}