JavaFx 07. CSS 스타일 하기

앞선 포스트의 자료에서 CSS 를 스타일링 해 보도록 하겠습니다.

/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
/* .button 으로 써도 된다. */
#clickme {
    -fx-font-size: 30px ;
    -fx-background-color: rgba(255, 255, 255, .80);
    -fx-text-fill: #f08080;
    -fx-padding: 6 6 6 6;
    -fx-border-radius: 8;
    -fx-font-weight: bold;
}

#myMessage {
    -fx-font-size: 30px ;
    -fx-background-color: rgba(255, 255, 255, .80);
    -fx-text-fill: blue;
    -fx-padding: 6 6 6 6;
    -fx-border-radius: 8;
    -fx-font-weight: bold;
}

.root{
    -fx-background-color: gray ;
}

다른 코드는 같지만 application.css 파일에 위와 같이 입력합니다.

그런 다음 Main.java 에서

package styling_with_CSS_in_JavaFX;
    
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
 
 
public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            
            Parent root = FXMLLoader.load(getClass().getResource("/styling_with_CSS_in_JavaFX/Main.fxml"));
            Scene scene = new Scene(root);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
 

18번 줄을 보면 css 파일을 자바파일과 연결하고 있는것을 볼 수 있습니다.

위와 같이 스타일이 변경됩니다. 

CSS 를 스타일링 할 수 있는 유용한 소스들은 아래 링크에서 참조 가능합니다.

https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html