PYSIDE6 QT 스타일 시트(QSS)

Qt 스타일 시트(QSS)는 CSS(Cascading Style Sheets)와 유사한 구문을 사용하여 Qt 위젯의 외관을 커스터마이즈할 수 있는 강력한 도구입니다. 스타일 시트를 사용하면 위젯의 배경색, 텍스트 색상, 글꼴, 여백 등을 제어할 수 있습니다. 이 장에서는 QSS를 사용하여 애플리케이션의 외관을 커스터마이즈하는 방법을 살펴보겠습니다.

 

#### 기본 QSS 구문

QSS는 CSS와 매우 유사한 구문을 사용합니다. 기본 구문은 다음과 같습니다:

```css

QPushButton {

    background-color: lightblue;

    color: black;

    border: 1px solid black;

    border-radius: 5px;

}

```

이 예제에서는 QPushButton의 배경색, 텍스트 색상, 테두리 및 테두리 반경을 설정합니다.

 

#### QSS 적용

QSS는 위젯이나 애플리케이션 전체에 적용할 수 있습니다. `setStyleSheet` 메서드를 사용하여 스타일 시트를 설정할 수 있습니다.

 

**위젯에 QSS 적용 예제**

```python

import sys

from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton

 

app = QApplication(sys.argv)

 

window = QMainWindow()

window.setWindowTitle("QSS Example")

 

button = QPushButton("Click Me")

button.setStyleSheet("""

    QPushButton {

        background-color: lightblue;

        color: black;

        border: 1px solid black;

        border-radius: 5px;

    }

""")

window.setCentralWidget(button)

 

window.show()

app.exec()

```

이 예제에서는 QPushButton에 QSS를 적용하여 외관을 커스터마이즈합니다.

 

**애플리케이션에 QSS 적용 예제**

```python

import sys

from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton

 

app = QApplication(sys.argv)

app.setStyleSheet("""

    QMainWindow {

        background-color: #f0f0f0;

    }

    QPushButton {

        background-color: lightgreen;

        color: black;

        border: 1px solid black;

    }

""")

 

window = QMainWindow()

window.setWindowTitle("Application QSS Example")

 

button = QPushButton("Click Me")

window.setCentralWidget(button)

 

window.show()

app.exec()

```

이 예제에서는 애플리케이션 전체에 QSS를 적용하여 QMainWindow와 QPushButton의 스타일을 설정합니다.

 

#### 선택자 사용

QSS는 다양한 선택자를 사용하여 특정 위젯이나 위젯 그룹에 스타일을 적용할 수 있습니다.

 

**기본 선택자**

기본 선택자는 위젯의 클래스 이름을 사용하여 스타일을 적용합니다.

```css

QPushButton {

    background-color: lightblue;

}

```

 

**아이디 선택자**

아이디 선택자는 `#` 기호를 사용하여 특정 아이디를 가진 위젯에 스타일을 적용합니다.

```css

QPushButton#myButton {

    background-color: yellow;

}

```

 

**클래스 선택자**

클래스 선택자는 `.` 기호를 사용하여 특정 클래스를 가진 위젯에 스타일을 적용합니다.

```css

QPushButton.myClass {

    background-color: green;

}

```

 

**자식 선택자**

자식 선택자는 특정 위젯의 자식 위젯에 스타일을 적용합니다.

```css

QWidget QPushButton {

    background-color: red;

}

```

 

**상태 선택자**

상태 선택자는 위젯의 특정 상태에 따라 스타일을 적용합니다.

```css

QPushButton:hover {

    background-color: orange;

}

QPushButton:pressed {

    background-color: blue;

}

```

 

#### 스타일 시트 변수

QSS에서 변수와 상수를 사용하여 스타일 속성을 재사용할 수 있습니다.

 

**스타일 시트 변수 사용 예제**

```python

import sys

from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton

 

app = QApplication(sys.argv)

app.setStyleSheet("""

    QPushButton {

        --button-color: lightcoral;

        background-color: var(--button-color);

        border: 2px solid black;

        border-radius: 5px;

        font-size: 14px;

    }

    QPushButton:hover {

        background-color: var(--button-color);

        color: white;

    }

""")

 

window = QMainWindow()

window.setWindowTitle("QSS Variables Example")

 

button = QPushButton("Click Me")

window.setCentralWidget(button)

 

window.show()

app.exec()

```

이 예제에서는 스타일 시트 변수(`--button-color`)를 사용하여 버튼의 색상을 설정하고, 이를 재사용하여 호버 상태의 색상도 지정합니다.

 

#### QSS 디버깅

QSS를 작성할 때 발생할 수 있는 문제를 해결하기 위해 Qt Designer와 Qt Creator를 사용하여 스타일 시트를 실험하고 미리 볼 수 있습니다. 또한, `qsslint`와 같은 도구를 사용하여 QSS의 구문 오류를 검사할 수 있습니다.

 

### 결론

이 장에서는 Qt 스타일 시트(QSS)를 사용하여 애플리케이션의 외관을 커스터마이즈하는 방법을 살펴보았습니다. QSS를 사용하면 위젯의 스타일을 세밀하게 제어하고, 선택자와 변수를 사용하여 효율적으로 스타일을 적용할 수 있습니다. 다음 장에서는 모델-뷰-컨트롤러(MVC) 패턴을 사용하여 데이터를 관리하고 표시하는 방법을 알아보겠습니다.

import sys

from PySide6.QtWidgets import (

    QApplication,

    QMainWindow,

    QCheckBox,

    QLabel,

    QComboBox,

    QLineEdit,

    QPlainTextEdit,

    QPushButton,

    QSpinBox,

    QVBoxLayout,

    QWidget,

)

class MainWindow(QMainWindow):

    def __init__(self):

        super().__init__()

       

        self.setWindowTitle("QSS Tester")

       

        self.editor = QPlainTextEdit()

        self.editor.textChanged.connect(self.update_styles)

       

        layout = QVBoxLayout()

        layout.addWidget(self.editor)

       

        cb = QCheckBox("Checkbox")

        layout.addWidget(cb)

       

        combo = QComboBox()

        combo.setObjectName("thecombo")

        combo.addItems(["First", "Second", "Third", "Fourth"])

        layout.addWidget(combo)

       

        sb = QSpinBox()

        sb.setRange(0, 9999)

        layout.addWidget(sb)

       

        label = QLabel("This is a label")

        layout.addWidget(label)

       

        le = QLineEdit()

        le.setObjectName("mylineedit")

        layout.addWidget(le)

       

        pb = QPushButton("Push me")

        layout.addWidget(pb)

       

        self.container = QWidget()

        self.container.setLayout(layout)

       

        self.setCentralWidget(self.container)

       

    def update_styles(self):

        qss = self.editor.toPlainText()

        #self.setStyleSheet(qss)

        app.setStyleSheet("""

            QMainWindow {

                background-color: #f0f0f0;

            }

            QPushButton {

                background-color: lightgreen;

                color: black;

                border: 1px solid black;

            }

        """)

       

app = QApplication(sys.argv)

app.setStyle("Fusion")

window = MainWindow()

window.show()

app.exec()