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) 패턴을 사용하여 데이터를 관리하고 표시하는 방법을 알아보겠습니다.
'PYTHON(파이썬) > PYSIDE6(GUI)' 카테고리의 다른 글
| PYSIDE6 QT의 모델 뷰 아키텍처 (3) | 2024.10.24 |
|---|---|
| PYSIDE6 MVC 소개 (2) | 2024.10.24 |
| PYSIDE6 아이콘 (1) | 2024.10.24 |
| PYSIDE6 팔레트 (0) | 2024.10.24 |
| PYSIDE6 스타일 (1) | 2024.10.24 |
