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 자체의 값도 있으므로 주의하도록 하자.