CSS

JavaFX CSS

JavaFX CSS는 UI 구성 요소의 모양과 스타일을 정의하는 언어로, HTML의 CSS처럼 Scene과 Node에 색상, 글꼴, 여백, 효과 등을 지정해 일관된 디자인을 구현할 수 있다.

CSS 란?

CSS(Cascading Style Sheets)는 웹 페이지나 애플리케이션의 UI 요소에 색상, 글꼴, 레이아웃, 간격 등 시각적 스타일을 정의하는 스타일시트 언어로, HTML이나 JavaFX 같은 마크업 구조와 디자인을 분리하여 일관되고 효율적인 UI 개발을 가능하게 한다.

Java FX CSS 문법

JavaFX CSS 문법 기본

JavaFX CSS는 웹 CSS와 유사하지만, 모든 속성명 앞에 -fx- 접두사를 붙여야 한다.

-fx- 접두사란?

•

JavaFX 전용 CSS 속성임을 나타내는 접두사

•

웹 CSS의 background-color는 JavaFX에서 -fx-background-color로 사용

•

표준 CSS와 구분하여 JavaFX Scene Graph에만 적용되도록 설계됨

자주 사용하는 -fx- 속성

속성명	설명	예시
-fx-background-color	배경 색상	#4CAF50,red
-fx-text-fill	텍스트 색상	white,#333
-fx-font-size	글꼴 크기	14px,1.2em
-fx-font-family	글꼴 종류	"Nanum Gothic"
-fx-padding	내부 여백	10px,5 10 15 20
-fx-border-color	테두리 색상	black
-fx-border-width	테두리 두께	2px
-fx-background-radius	모서리 둥글게	8px
-fx-effect	그림자 등 효과	dropshadow(...)

예시 코드

/* ID 선택자 */
#mainButton {
    -fx-background-color: #2196F3;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
}

/* 클래스 선택자 */
.primary-button {
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-text-fill: white;
    -fx-font-weight: bold;
}

/* 노드 선택자 */
Label {
    -fx-text-fill: #333333;
    -fx-font-family: "Malgun Gothic";
}
CSS
복사

핵심 요약: JavaFX CSS는 일반 CSS와 문법이 비슷하지만, 모든 속성 앞에 -fx-를 붙여야 한다는 점을 반드시 기억해야 한다.

JavaFX에서 CSS의 역할

•

JavaFX는 HTML/CSS 기반 웹 스타일링 개념을 GUI에 적용할 수 있음.

•

Scene, Node(Label, Button, Pane 등)에 스타일 적용 가능.

•

.css 파일을 프로젝트 리소스 폴더(resources)에 추가하여 사용.

CSS 적용 방법 3가지

•

인라인 스타일

•

Scene 단위 CSS 적용

•

FXML 내 CSS 지정

(1) 인라인 스타일

button.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white;");
Java
복사

•

간단하지만 재사용 불가 → 작은 프로젝트에만 적합.

(2) Scene 단위 CSS 적용

Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
stage.setScene(scene);
Java
복사

•

가장 일반적이고 유지보수가 좋음.

•

하나의 Scene 전체에 CSS 일괄 적용.

(3) FXML 내 CSS 지정

<AnchorPane stylesheets="@style.css">
    <Button text="클릭" styleClass="main-button"/>
</AnchorPane>
XML
복사

•

FXML 기반 UI에서 손쉽게 스타일 적용 가능.

CSS 선택자 기초

구분	예시	설명
ID 선택자	#mainPane	setId("mainPane")로 지정한 노드 대상
클래스 선택자	.main-button	getStyleClass().add("main-button")
노드 선택자	Button	모든 버튼에 공통 적용

CSS 속성 예시

.root {
    -fx-font-family: "Nanum Gothic";
    -fx-font-size: 14px;
}

.button {
    -fx-background-color: linear-gradient(#6db3f2, #1e69de);
    -fx-text-fill: white;
    -fx-background-radius: 8;
}
CSS
복사

실습

style.css 파일을 작성하고 Scene에 적용해보기

버튼 hover 시 색상 변경 효과 추가

ID/Class 기반으로 선택자 지정해보기

실습 1: style.css 파일 작성 및 Scene 적용

1) style.css 파일 생성

프로젝트의 src/main/resources 폴더에 style.css 파일을 생성합니다.

/* style.css */
.root {
    -fx-font-family: "Malgun Gothic";
    -fx-font-size: 14px;
    -fx-background-color: #f5f5f5;
}

.main-button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
}

#titleLabel {
    -fx-font-size: 24px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
}
CSS
복사

2) Java 코드에서 CSS 적용

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CSSExample extends Application {
    @Override
    public void start(Stage stage) {
        Label label = new Label("JavaFX CSS 실습");
        label.setId("titleLabel");
        
        Button button = new Button("클릭하세요");
        button.getStyleClass().add("main-button");
        
        VBox root = new VBox(20, label, button);
        root.setAlignment(javafx.geometry.Pos.CENTER);
        
        Scene scene = new Scene(root, 400, 300);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        
        stage.setScene(scene);
        stage.setTitle("CSS 적용 예제");
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
Java
복사

실습 2: 버튼 hover 시 색상 변경 효과

CSS에 hover 효과 추가

/* style.css에 추가 */
.main-button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
}

.main-button:hover {
    -fx-background-color: #45a049;
    -fx-scale-x: 1.05;
    -fx-scale-y: 1.05;
}

.main-button:pressed {
    -fx-background-color: #3d8b40;
}
CSS
복사

설명:

•

:hover - 마우스를 버튼 위에 올렸을 때 스타일

•

:pressed - 버튼을 클릭했을 때 스타일

•

-fx-scale-x, -fx-scale-y - 버튼 크기를 약간 확대하는 효과

실습 3: ID/Class 기반 선택자 지정

1) FXML 파일 작성 (sample.fxml)

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      stylesheets="@style.css"
      alignment="CENTER" spacing="20"
      prefWidth="400" prefHeight="300">
    
    <Label id="titleLabel" text="JavaFX CSS 실습"/>
    
    <Button styleClass="main-button" text="기본 버튼"/>
    <Button styleClass="secondary-button" text="보조 버튼"/>
    <Button styleClass="danger-button" text="삭제 버튼"/>
    
</VBox>
XML
복사

stylesheets="@style.css" 처럼 지정해놓으면 Java 코드에서 따로 CSS를 지정하지 않아도 된다.

2) CSS 파일에 다양한 선택자 추가

/* ID 선택자 - 특정 요소 하나만 지정 */
#titleLabel {
    -fx-font-size: 24px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
}

/* 클래스 선택자 - 여러 요소에 재사용 가능 */
.main-button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
}

.main-button:hover {
    -fx-background-color: #45a049;
}

.secondary-button {
    -fx-background-color: #2196F3;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
}

.secondary-button:hover {
    -fx-background-color: #0b7dda;
}

.danger-button {
    -fx-background-color: #f44336;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
}

.danger-button:hover {
    -fx-background-color: #da190b;
}

/* 노드 선택자 - 모든 Button에 공통 적용 */
Button {
    -fx-cursor: hand;
    -fx-font-family: "Malgun Gothic";
}
CSS
복사

3) Controller 클래스

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class CSSPracticeApp extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.setTitle("CSS 선택자 실습");
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
Java
복사

전체 실습 프로젝트 구조

실습 완료 체크리스트:

•

 style.css 파일 생성 및 Scene에 적용

•

 버튼에 :hover 효과 추가

•

 ID 선택자(#titleLabel) 사용

•

 클래스 선택자(.main-button) 사용

•

 노드 선택자(Button) 사용

추가 실습 – CSS 동적 변경

public void applyTheme(String cssFile) {
    Scene scene = button.getScene();
    scene.getStylesheets().clear();
    scene.getStylesheets().add(getClass().getResource(cssFile).toExternalForm());
}
Java
복사

•

CSS를 매개변수로 받아 현재 Scene에 즉시 적용

•

다크모드 / 라이트모드 전환에 유용