8.11 Dynamic Styling

1. 학습 목표

1. Dynamic Styling(동적 스타일링) 개념 이해
2. setStyleSheet()를 이용해 실행 중에 위젯 스타일 바꾸기
3. QVBoxLayout을 사용해 기본 레이아웃 구성하기
4. QPushButton.clicked 시그널을 슬롯에 연결해서 스타일 변경 트리거 만들기

---

 

2. 예제 코드 

먼저 전체 코드를 한 번에 봅니다.

# DynamicStyling.py

import sys
from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout
from PySide6.QtGui import QColor


class DynamicStyle(QWidget):
    def __init__(self):
        super().__init__()

        # [1] 윈도우 기본 설정
        self.setWindowTitle("Dynamic Styling")
        self.setGeometry(100, 100, 400, 300)   # x, y, width, height

        # [2] 레이아웃 생성 (수직 박스 레이아웃)
        vbox = QVBoxLayout()

        # [3] 버튼 위젯 생성
        self.button = QPushButton("Click Me")
        vbox.addWidget(self.button)  # 레이아웃에 버튼 추가

        # [4] 버튼 클릭 시 색상을 바꾸는 슬롯 함수 연결
        self.button.clicked.connect(self.changeColorButton)

        # [5] 현재 윈도우에 레이아웃 설정
        self.setLayout(vbox)

    def changeColorButton(self):
        """
        버튼이 클릭될 때 호출되는 슬롯 함수.
        QColor를 이용해 배경색을 만들고, setStyleSheet로 버튼 스타일을 변경.
        """
        # [6] 색상 생성 (0.0 ~ 1.0 범위의 RGB 비율)
        color = QColor.fromRgbF(0.5, 0.7, 0.3)  # 약간 연두색 느낌

        # [7] 동적으로 스타일 시트 문자열 생성
        style_sheet = f"background-color: {color.name()};"

        # [8] setStyleSheet로 버튼에 적용
        self.button.setStyleSheet(style_sheet)


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

 

3. 윈도우 기본 틀 만들기

: STEP 1

먼저 QWidget을 상속받아 기본 창 클래스를 만듭니다.

class DynamicStyle(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Dynamic Styling")
        self.setGeometry(100, 100, 400, 300)

---

 

4. 레이아웃과 버튼 추가하기

: STEP 2

버튼 하나를 창 가운데 쪽에 올리고, 레이아웃(QVBoxLayout)으로 관리합니다.

        # [2] 레이아웃 생성 (수직 박스 레이아웃)
        vbox = QVBoxLayout()

        # [3] 버튼 위젯 생성
        self.button = QPushButton("Click Me")
        vbox.addWidget(self.button)  # 레이아웃에 버튼 추가

        # [5] 현재 윈도우에 레이아웃 설정
        self.setLayout(vbox)

---

 

5.  Python에서 CSS 파일 읽어서 적용하기

: STEP 3

버튼을 클릭했을 때 어떤 함수를 실행할지 정해야 합니다.
PySide6에서는 시그널/슬롯 기법을 사용합니다.

        # [4] 버튼 클릭 시 색상을 바꾸는 슬롯 함수 연결
        self.button.clicked.connect(self.changeColorButton)

• self.button.clicked
  • QPushButton이 제공하는 기본 시그널
  • 클릭될 때마다 emit됨
• .connect(self.changeColorButton)
  • 이 시그널이 발생할 때 실행할 함수(슬롯)를 연결
  • 즉, 버튼이 클릭될 때마다 changeColorButton() 이 호출됨

---

 

6. Dynamic Styling을 위한 changeColorButton( ) 슬롯 함수 구현

: STEP 4

    def changeColorButton(self):
        """
        버튼이 클릭될 때 호출되는 슬롯 함수.
        QColor를 이용해 배경색을 만들고, setStyleSheet로 버튼 스타일을 변경.
        """
        # [6] 색상 생성 (0.0 ~ 1.0 범위의 RGB 비율)
        color = QColor.fromRgbF(0.5, 0.7, 0.3)  # 약간 연두색 느낌

        # [7] 동적으로 스타일 시트 문자열 생성
        style_sheet = f"background-color: {color.name()};"

        # [8] setStyleSheet로 버튼에 적용
        self.button.setStyleSheet(style_sheet)

1. QColor.fromRgbF(0.5, 0.7, 0.3)
   • 0.0 ~ 1.0 사이의 실수로 RGB 값을 설정하는 함수
   • (0.5, 0.7, 0.3) ⇒ 약간 연두색 계열
2. color.name()
   • 색상을 #RRGGBB 형태의 문자열로 반환
   • 예: #7FB34C 처럼 16진수 컬러 코드
3. style_sheet = f"background-color: {color.name()};"
   • Qt 스타일 시트(QSS) 문법에 맞는 문자열 생성
   • 결과 예: "background-color: #7fb34c;"
4. self.button.setStyleSheet(style_sheet)
   • 버튼에 해당 스타일 시트를 적용
   • 이 시점에 버튼의 배경색이 즉시 변경됨

*여기서 핵심이 바로 setStyleSheet( )를 실행 중에 호출해 스타일을 바꾸는 것 = Dynamic Styling

 

7. main 블록: 애플리케이션 실행

: STEP 5

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

---

 

8. 추가 실습 과제

: (1) 스타일이 적용되어 있는지 여부를 저장해두고 토글(toggle) 방식으로 변경

위 예제는 버튼을 한 번 누르고 나면, 다시 색상을 되돌릴 수 없다. 이를 해결해본다.

# DynamicStyling.py

import sys
from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout
from PySide6.QtGui import QColor


class DynamicStyle(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Dynamic Styling")
        self.setGeometry(100, 100, 400, 300)

        # [★] 색상 적용 여부를 저장할 변수 (처음에는 False)
        self.is_colored = False

        vbox = QVBoxLayout()

        self.button = QPushButton("Click Me")
        vbox.addWidget(self.button)

        # 클릭 시 색상 변경 함수 연결
        self.button.clicked.connect(self.changeColorButton)

        self.setLayout(vbox)

    def changeColorButton(self):
        """버튼을 클릭할 때마다 색상을 토글하는 슬롯"""

        if not self.is_colored:
            # [1] 새 스타일 적용
            color = QColor.fromRgbF(0.5, 0.7, 0.3)
            style_sheet = f"background-color: {color.name()};"
            self.button.setStyleSheet(style_sheet)

            # 상태 변경
            self.is_colored = True

        else:
            # [2] 기본 스타일로 되돌리기
            self.button.setStyleSheet("")  # 빈 문자열 = 기본 스타일

            # 상태 변경
            self.is_colored = False


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

 

9. 추가 실습 과제

: (2) 색상을 랜덤으로 바꾸기

현재는 항상 같은 연두색으로만 바뀝니다.
아래 힌트를 이용해 클릭할 때마다 랜덤 색상이 나오도록 바꿔보세요.

import random

def changeColorButton(self):
    r = random.random()  # 0.0 ~ 1.0
    g = random.random()
    b = random.random()

    color = QColor.fromRgbF(r, g, b)
    style_sheet = f"background-color: {color.name()};"
    self.button.setStyleSheet(style_sheet)

main.py

0.00MB

---