JavaFX | FXML GUI 디자인 | 스타일 시트 작성
그럼 스타일 시트를 작성해 보자. 먼저 FXML 파일과 같은 위치에 “app.css"라는 파일명으로 생성하자.
그리고 파일 안에 FXML에 작성한 <Label fx:id="label1"/>
컨트롤의 스타일을 여기에 작성한다. 아래 코드가 간단한 예제이다.
@CHARSET "utf-8";
Label#label1 {
-fx-font-family:Serif;
-fx-font-size:24pt;
}
문자 코드의 지정
시작 부분에 @CHARSET "utf-8";
이 작성되어 있다. 기본적으로 스타일 시트는 UTF-8로 인코딩한다. 이것은 필수는 아니지만, 작성하는 것이 기본이라고 생각하자.
컨트롤러의 스타일
여기에서는 label1이라는 ID의 Label에 대해 스타일이 작성되어 있다.
Label#label1 {...}
이와 같이 스타일의 지정은 “클래스 이름#ID 이름"와 같은 형식으로 스타일을 작성한다. HTML 스타일 이 “태그 이름#ID 이름"이라고 작성하는 것과 같은 느낌이다.
물론 클래스 이름만 지정하면, 그 클래스의 컨트롤 전부 스타일을 적용 할 수 있다. 예를 들어, Label {...}
라고 하면, 모든 Label의 스타일을 모와서 설정할 수 있다.
폰트 속성에 대해
여기에서는 두 가지 스타일이 작성되어 있다. -fx-font-family
와 -fx-font-size
이다. 이것들은 폰트 패밀리 이름과 폰트 크기를 지정하는 것이다.
JavaFX의 스타일은 모두 이 처럼 “-fx-OO"으로 시작하는 이름으로 되어 있다. 대부분은 HTML로 사용되고 있는 스타일 이름 앞에 “-fx-“를 붙이는 것만으로 사용할 수 있지만, 반드시 다 그런건 아니다.
예를 들어, 배경 색상은 -fx-background-color
이지만, 텍스트의 색상은 -fx-text-fill
으로 되어 있다. JavaFX 자체의 값도 있으므로 주의하도록 하자.