8.4 CSS 스타일 적용하기
1. 학습 목표
- PySide6에서 QMainWindow / QLabel 기본 창 만들기
- styles.css(QSS) 파일을 따로 만들어 스타일 정의하기
- QFile, QIODevice 를 사용해 CSS 파일을 읽어와 setStyleSheet()로 적용하기
- 스타일을 수정하면서 즉시 UI 변화 확인해보기
2. 프로젝트 구조 만들기
qt_css_example/
├─ main.py # 우리가 작성할 파이썬 코드
└─ styles.css # Qt 스타일 시트(QSS) 파일- main.py : PySide6 앱, QMainWindow, QLabel, CSS 적용 코드
- styles.css : 배경색, 글자색, 폰트 크기 등을 지정하는 스타일 정의
3. 기본 QMainWindow + QLabel 만들기
: STEP 1
# main.py
import sys
from PySide6.QtCore import Qt
from PySide6.QtWidgets import QApplication, QMainWindow, QLabel
class WeatherApp(QMainWindow):
def __init__(self):
super().__init__()
# [1] 윈도우 기본 설정
self.setWindowTitle("CSS Styling 예제")
self.setGeometry(100, 100, 400, 300) # x, y, width, height
# [2] 라벨 생성 (부모를 self로 지정 → 메인윈도우 위에 올라감)
label = QLabel("Temperature 25°C", self)
# [3] 라벨 위치와 크기 직접 지정 (레이아웃 없이 setGeometry 사용)
label.setGeometry(50, 50, 300, 50)
if __name__ == "__main__":
app = QApplication(sys.argv)
window = WeatherApp()
window.show()
sys.exit(app.exec())먼저 CSS 없이 창과 라벨만 띄우는 기본 코드입니다.
이 상태에서 styles.css가 없어도 상관없고, CSS도 적용하지 않았으니
→ 기본 회색 윈도우 + 검은 글씨 라벨만 보입니다.
4. styles.css(QSS) 파일 작성하기
: STEP 2
/* styles.css */
/* 전체 QMainWindow에 적용할 스타일 */
QMainWindow {
background-color: #F2F2F2; /* 창 배경색 */
}
/* 모든 QLabel에 적용되는 스타일 */
QLabel {
color: #333333; /* 글자 색상 */
font-size: 20px; /* 글자 크기 */
padding: 10px; /* 안쪽 여백 */
border-radius: 5px; /* 모서리 둥글게 */
background-color: #E0E0E0; /* 라벨 배경색 */
}이제 styles.css 파일을 만들어서 Qt 스타일 시트(QSS) 를 작성합니다.
(웹 CSS와 문법이 거의 비슷하지만, 대상이 HTML 태그가 아니라 Qt 위젯 클래스입니다.)
- QMainWindow { ... } : 모든 QMainWindow에 적용
- QLabel { ... } : 모든 QLabel에 적용
- Qt 스타일 시트는 웹 CSS와 달리 body, div 같은 태그 대신 클래스명(QLabel, QPushButton, …) 을 사용합니다.
5. Python에서 CSS 파일 읽어서 적용하기
: STEP 3
# 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__()
# [1] 윈도우 기본 설정
self.setWindowTitle("CSS Styling 예제")
self.setGeometry(100, 100, 400, 300)
# [2] 라벨 생성
label = QLabel("Temperature 25°C", self)
label.setGeometry(50, 50, 300, 50)
# [3] CSS 적용 함수 호출
self.apply_css()
def apply_css(self):
"""
styles.css 파일을 읽어서
현재 윈도우(그리고 자식 위젯들)에 스타일을 적용하는 함수
"""
file = QFile("styles.css") # 같은 폴더에 있는 styles.css 오픈 시도
# ReadOnly(읽기 전용) + Text 모드로 열기
if file.open(QIODevice.ReadOnly | QIODevice.Text):
# 파일 전체 내용을 읽어옴 (QByteArray 형태)
data = file.readAll()
# QByteArray → bytes → str 로 디코딩
style_sheet = data.data().decode()
# 현재 윈도우에 스타일 시트 적용
# 이 윈도우의 모든 자식 위젯(QLabel 등)에도 함께 적용됨
self.setStyleSheet(style_sheet)
# 파일 닫기
file.close()
else:
print("styles.css 파일을 열 수 없습니다.")
if __name__ == "__main__":
app = QApplication([])
window = WeatherApp()
window.show()
sys.exit(app.exec())이제 WeatherApp 클래스에 CSS를 불러와 적용하는 메서드를 넣습니다.
QFile + QIODevice를 사용해 styles.css 내용을 읽고, 그 문자열을 setStyleSheet()에 넘깁니다.
6. 실행 결과 확인하기
: STEP 4
이 상태에서 python main.py 로 실행하면
- 배경색이 밝은 회색(#F2F2F2) 으로 바뀌고
- 라벨은
- 글자색: #333333
- 폰트 크기: 20px
- 배경색: #E0E0E0
- padding: 10px
- 둥근 모서리(border-radius: 5px)
- 로 꾸며진 것을 확인할 수 있습니다.
7. 추가 실습 과제
: (1) 색상 변경 실습
styles.css에서
QMainWindow {
background-color: #F2F2F2;
}기존 코드를
QMainWindow {
background-color: #FFCCCC;
}로 바꾼 뒤 다시 실행해 보게 합니다.
→ 색이 바로 바뀌는 것을 보고 CSS 적용 위치를 감각적으로 이해.
8. 추가 실습 과제
: (2) 특정 라벨에만 스타일 적용해 보기
현재는 모든 QLabel에 스타일이 적용됩니다.
- class="titleLabel" 같은 특별한 라벨만 스타일을 주고 싶다고 가정
- Qt에서는 objectName을 이용해 특정 위젯을 선택할 수 있습니다.
파이썬 코드에서
label = QLabel("Temperature 25°C", self)
label.setObjectName("tempLabel")styles.css에서:
QLabel#tempLabel {
color: blue;
font-weight: bold;
}
이렇게 하면 objectName이 "tempLabel"인 라벨에만 스타일이 적용됩니다.
9. 추가 실습 과제
: (3) QPushButton 스타일도 추가해 보기
styles.css에 아래 내용을 추가
QPushButton {
background-color: #4CAF50;
color: white;
padding: 8px;
border-radius: 4px;
}
QPushButton:hover {
background-color: #45A049;
}
→ 버튼 하나 만들어서 hover 효과까지 같이 실습해 볼 수 있습니다.
