javaFX - CSS스타일 (외부 CSS스타일 : 선택자, css파일 적용)

외부 CSS 스타일

 

 인라인 스타일보다 중복 코드를 줄이고, 재사용성을 높이면서 유지보수도 편리한 방법.

 

 

선택자 

 

 중괄호 {} 에 정의된 CSS 속성을 적용할 컨테이너 or 컨트롤을 선택하는 역할.

 

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

 

선언 방법

 

선택자 {

           속성 : 값; 속성 : 값;

 }

 

선택자           작성 방법

 

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

 

id 선택자       #id { 속성:값; 속성:값;}

 

class 선택자   .class { 속성:값; 속성:값;}

 

HTML에서 CSS 적용방법과 큰 차이 X

 

ex)

/* 전체 Label 선택 */

Label {

-fx-padding: 5;

}


/* id="blog" 을 가진 컨트롤 선택 */

#blog {

-fx-background-color: black;

-fx-text-fill: yellow;

}



/* styleClass="navaerClass"을 가진 컨트롤 선택 */

.naverClass {

-fx-background-color: blue;

-fx-text-fill: white;

 

}

 

컨트롤은 세 가지 상태를 가질 수 있음.

 

상태                                상태별 선택자

 

입력 가능한 상태                    선택자:focused {속성:값; 속성:값;}

 

마우스가 컨트롤 위에 있는 상태    선택자:hover {속성:값; 속성:값;}

 

마우스로 컨트롤을 누른 상태       선택자:pressed {속성:값; 속성:값;}

 

---

<컨테이너 stylesheets="@cssFileName.css">

 

Scene에 적용하려면 Java 코드로 Scene의 getStylesheets() 메서드를 호출해서 ObservableList를 얻고

 

CSS 파일 경로를 추가하면 됨.

 

 scene.getStylesheets().add(getClass().getResource("cssFileName.css").toString());

 

FXML

<?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="blog" text="검정바탕,노란글씨"/>

<Label styleClass="naverClass" text="빨간바탕,흰글씨"/>

<Label styleClass="naverClass" text="빨간바탕,흰글씨"/>

   </children>

 

</HBox>



CSS

/* 전체 Label 선택 */

Label {

-fx-padding: 5;

}



/* id="lblId" 을 가진 컨트롤 선택 */

#blog {

-fx-background-color: black;

-fx-text-fill: yellow;

}



/* styleClass="lblClass"을 가진 컨트롤 선택 */

.naverClass {

-fx-background-color: red;

-fx-text-fill: white;

 

}

 

FXML
<?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;

}