CSS 스타일 적용하기

PySide6 CSS(QSS) 스타일 적용

PySide6에서는 Qt StyleSheet(QSS)를 사용하여 위젯의 디자인을 꾸밀 수 있다. QSS는 웹에서 사용하는 CSS와 문법이 비슷하지만, HTML 태그 대신 Qt 위젯 클래스를 대상으로 스타일을 적용한다.

기본 예제

먼저 스타일을 적용할 간단한 프로그램을 작성해보자.

# main.py
import sys
from PySide6.QtCore import Qt
from PySide6.QtWidgets import QApplication, QMainWindow, QLabel

class WeatherApp(QMainWindow):
    def __init__(self):
        super().__init__()

        # 윈도우 기본 설정
        self.setWindowTitle("CSS Styling 예제")
        self.setGeometry(100, 100, 400, 300)

        # 라벨 생성
        label = QLabel("Temperature 25°C", self)

        # 위치와 크기 지정
        label.setGeometry(50, 50, 300, 50)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = WeatherApp()
    window.show()
    sys.exit(app.exec())

위 코드를 실행하면 기본 스타일이 적용된 창이 나타난다.

스타일 시트 작성

styles.css 파일을 생성하고 아래와 같이 작성한다.

/* styles.css */

/* 전체 QMainWindow 스타일 */
QMainWindow {
    background-color: #F2F2F2;
}

/* 모든 QLabel 스타일 */
QLabel {
    color: #333333;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #E0E0E0;
}

Qt 스타일 시트는 웹 CSS와 비슷하지만 body, div 같은 HTML 태그 대신 Qt 위젯 클래스명을 사용한다.

CSS 파일 적용하기

작성한 styles.css 파일을 프로그램에 적용한다.

# main.py
import sys
from PySide6.QtCore import Qt, QFile, QIODevice
from PySide6.QtWidgets import QApplication, QMainWindow, QLabel

class WeatherApp(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("CSS Styling 예제")
        self.setGeometry(100, 100, 400, 300)

        label = QLabel("Temperature 25°C", self)
        label.setGeometry(50, 50, 300, 50)

        self.apply_css()

    def apply_css(self):
        file = QFile("styles.css")

        if file.open(QIODevice.ReadOnly | QIODevice.Text):
            data = file.readAll()

            style_sheet = data.data().decode()

            self.setStyleSheet(style_sheet)

            file.close()
        else:
            print("styles.css 파일을 열 수 없습니다.")

if __name__ == "__main__":
    app = QApplication([])
    window = WeatherApp()
    window.show()
    sys.exit(app.exec())

QFile과 QIODevice를 사용하여 CSS 파일을 읽고, setStyleSheet()를 통해 현재 윈도우에 적용한다. 현재 윈도우에 적용된 스타일은 해당 윈도우의 자식 위젯들에게도 함께 적용된다.

---

추가로 알아두면 좋은 QSS 기능

1. 특정 위젯만 스타일 적용하기

모든 QLabel이 아닌 특정 QLabel에만 스타일을 적용할 수 있다.

QLabel {
    color: black;
}

#titleLabel {
    color: red;
    font-size: 24px;
}

label = QLabel("제목")
label.setObjectName("titleLabel")

ObjectName을 이용하면 특정 위젯만 선택하여 스타일을 지정할 수 있다.

2. 버튼 상태별 스타일

버튼은 상태에 따라 다른 스타일을 적용할 수 있다.

QPushButton {
    background-color: #4CAF50;
    color: white;
}

QPushButton:hover {
    background-color: #45A049;
}

QPushButton:pressed {
    background-color: #388E3C;
}

QPushButton:disabled {
    background-color: gray;
}

상태	설명
:hover	마우스를 올렸을 때
:pressed	버튼을 누르고 있을 때
:disabled	비활성화 상태
:checked	체크된 상태
:focus	포커스를 받은 상태

3. 위젯 종류별 스타일 적용

QLabel {
    color: blue;
}

QPushButton {
    background-color: green;
}

QLineEdit {
    border: 1px solid gray;
}

위젯 클래스마다 서로 다른 스타일을 적용할 수 있다.

4. QLineEdit 꾸미기

로그인 화면에서 자주 사용하는 스타일이다.

QLineEdit {
    border: 2px solid #CCCCCC;
    border-radius: 5px;
    padding: 5px;
}

QLineEdit:focus {
    border: 2px solid #4CAF50;
}

입력창이 선택되면 테두리 색상이 변경된다.

5. 이미지 사용하기

버튼이나 위젯에 이미지를 적용할 수 있다.

QPushButton {
    border-image: url(images/login.png);
}

또는 image 속성을 사용할 수도 있다.

QPushButton {
    image: url(images/login.png);
}

6. 하위 위젯 선택

특정 부모 위젯 안에 있는 QLabel만 선택할 수 있다.

QWidget QLabel {
    color: red;
}

7. 프로그램 전체에 스타일 적용

특정 윈도우가 아닌 프로그램 전체에 스타일을 적용할 수도 있다.

with open("styles.css", "r") as file:
    app.setStyleSheet(file.read())

8. 스타일 파일 분리

프로젝트 규모가 커지면 스타일 파일을 분리하여 관리하는 것이 좋다.

project/
│
├── main.py
├── styles/
│   ├── dark.css
│   ├── light.css
│   └── login.css
└── images/

다크모드와 라이트모드, 화면별 스타일 관리가 편해진다.

9. Qt Designer와 함께 사용하기

Qt Designer에서 ObjectName을 지정하면 특정 위젯만 쉽게 꾸밀 수 있다.

#btnLogin {
    background-color: green;
}

#btnSignup {
    background-color: blue;
}

10. QSS의 한계

QSS는 CSS와 비슷하지만 웹 CSS의 모든 기능을 지원하지는 않는다.

display: flex;
grid-template-columns;
animation;
transform;

위와 같은 웹 전용 기능은 사용할 수 없다.

---