Day 29 : JavaFX CSS 스타일 - 외부 CSS 파일

외부 CSS 파일

: 인라인 스타일은 컨테이너와 style 속성으로 CSS를 직접 적용하기 때문에 동일한 스타일을 적용하는 컨테이너와 컨트롤이 많아질수록 중복 코드가 늘어나는 단점 존재

: 레이아웃과 CSS가 뒤섞여 추후 유지보수가 어려움

: 중복 코드를 줄이고, 재사용성을 높이면서 유지보수도 편리한 외부 CSS 파일을 작성해서 적용하는 것이 일반적

 

- 선택자

: 외부 CSS 파일은 스타일을 적용할 컨테이너와 컨트롤을 선택해주는 선택자가 필요

- 선택자의 종류

1. Type 선택자 : Type {속성:값; 속성:값; ...}

: 같은 타입의 컨테이너 또는 컨트롤을 모두 선택

2. id 선택자 : #id {속성:값, 속성:값, ...}

: 동일한 id 속성값을 가지고 있는 컨테이너 또는 컨트롤을 실행

3. class 선택자 : .class {속성:값, 속성:값, ...}

: 동일한 styleClass 속성값을 가지고 있는 컨테이너 또는 컨트롤을 선택

4. 상태별 선택자

 

CSS 파일 적용

: 개별 컨테이너 또는 컨트롤에 적용하거나 Scene에 추가하여 Scene 내부의 모든 컨테이너와 컨트롤러에 적용 가능

 

실행 클래스

package sec10.exam03_state_selector;

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

public class AppMain extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		Parent root = (Parent)FXMLLoader.load(getClass().getResource("root.fxml"));
		Scene scene = new Scene(root);
		scene.getStylesheets().add(getClass().getResource("app.css").toString());
		
		primaryStage.setTitle("AppMain");
		primaryStage.setScene(scene);
		primaryStage.show();
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

 

id와 styleClass 속성이 있는 Label 배치

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

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

<HBox xmlns:fx="http://javafx.com/fxml"
	prefHeight="50" prefWidth="400" alignment="CENTER" spacing="20">
   <children>
		<Label id="lblId" text="검정바탕,노란글씨"/>
		<Label styleClass="lblClass" text="파란바탕,흰글씨"/>
		<Label styleClass="lblClass" text="파란바탕,흰글씨"/>
   </children>
</HBox>

 

CSS 파일

/* 전체 Label 선택 */
Label {
	-fx-padding: 5;
}

/* id="lblId" 을 가진 컨트롤 선택 */
#lblId {
	-fx-background-color: black;
	-fx-text-fill: yellow;
}

/* styleClass="lblClass"을 가진 컨트롤 선택 */
.lblClass {
	-fx-background-color: blue;
	-fx-text-fill: white;
}

 

TextField와 Button 배치

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

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

<HBox xmlns:fx="http://javafx.com/fxml" spacing="10"> 							
	<padding>																
		<Insets topRightBottomLeft="10"/>
	</padding>

	<children>	
		<TextField prefWidth="200"/>															
		<Button prefWidth="50" text="확인"/>
	</children>
</HBox>

 

CSS 파일

TextField:focused{
	-fx-border-color: skyblue;
	-fx-background-color: yellow;
}

Button:hover {
	-fx-border-color: skyblue;
	-fx-background-color: yellow;
}

Button:pressed {
	-fx-border-color: skyblue;
	-fx-background-color: red;
}