오늘날의 GUI 애플리케이션의 디자인과 사용자 경험(UI/UX)은 점점 더 중요해지고 있습니다. 이를 위해 PyQt 프레임워크에서는 위젯의 스타일을 쉽게 커스터마이징할 수 있는 방법을 제공합니다. 이 글에서는 PyQt 위젯에 CSS 스타일 시트를 적용하여 사용자 인터페이스의 외관을 개선하는 방법을 자세히 설명하고, 실제 예제를 통해 이를 구현해 보겠습니다.
CSS 스타일 시트란?
CSS(캐스케이딩 스타일 시트)는 웹 페이지의 스타일을 정의하는 데 사용하는 언어입니다. PyQt에서는 이러한 CSS 개념을 적용하여 애플리케이션의 위젯을 스타일링할 수 있습니다. CSS 스타일 시트를 사용하면 색상, 글꼴, 여백, 테두리와 같은 다양한 속성을 설정할 수 있으며, 위젯이나 레이아웃의 외형을 쉽게 변경할 수 있습니다.
PyQt에서 CSS 스타일 시트를 사용하는 방법
PyQt에서 CSS 스타일 시트를 사용하기 위해서는 `setStyleSheet()` 메서드를 호출하여 위젯에 적용할 스타일 시트를 문자열 형태로 전달하면 됩니다. 이 스타일 시트는 PyQt 위젯의 여러 속성을 설정하는 데 사용됩니다. 다음은 기본적인 사용 방법입니다.
스타일 시트의 기본 구조
#widgetName {
property1: value1;
property2: value2;
}
여기서 `#widgetName`은 스타일을 적용할 위젯의 이름이고, `property1`, `property2`는 적용할 속성입니다. 예를 들어, QPushButton 위젯의 배경색과 글자색을 변경하려면 다음과 같이 작성할 수 있습니다.
button {
background-color: #3498db;
color: white;
}
예제 1: 기본 PyQt 애플리케이션
먼저, 기본적인 PyQt 애플리케이션을 생성하고, CSS 스타일 시트를 적용하는 방법을 알아보겠습니다. 다음은 PyQt 애플리케이션의 기본 구조 및 스타일 시트를 적용한 예제입니다.
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout
class MyApp(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('기본 PyQt 애플리케이션')
self.setGeometry(100, 100, 300, 200)
layout = QVBoxLayout()
button = QPushButton('클릭하세요!')
layout.addWidget(button)
self.setLayout(layout)
# CSS 스타일 시트 적용
self.setStyleSheet('''
QWidget {
background-color: #f5f5f5;
}
QPushButton {
background-color: #3498db;
color: white;
font-size: 18px;
padding: 10px;
border-radius: 5px;
}
QPushButton:hover {
background-color: #2980b9;
}
''')
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = MyApp()
ex.show()
sys.exit(app.exec_())
위의 코드에서는 PyQt5를 사용하여 기본 애플리케이션을 만들고, CSS 스타일 시트를 적용하여 위젯의 외관을 변경하였습니다. 위젯의 배경색, 버튼의 색상, 폰트 크기, 패딩, 테두리 반경 등을 설정할 수 있습니다.
위젯 스타일의 세부 조정
각 위젯에서 어떻게 CSS 속성을 활용하여 더욱 세부적으로 스타일을 조정할 수 있는지 알아보겠습니다. 다음 예제에서는 QPushButton 외에도 QLabel, QLineEdit과 같은 여러 위젯에 CSS 스타일을 적용해 보겠습니다.
예제 2: 다양한 위젯 스타일 적용
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QVBoxLayout
class CustomStyleApp(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('다양한 위젯 스타일 적용')
self.setGeometry(100, 100, 400, 300)
layout = QVBoxLayout()
label = QLabel('이메일 주소를 입력하세요:')
line_edit = QLineEdit()
button = QPushButton('제출')
layout.addWidget(label)
layout.addWidget(line_edit)
layout.addWidget(button)
self.setLayout(layout)
# CSS 스타일 시트 적용
self.setStyleSheet('''
QWidget {
background-color: #ffffff;
font-family: 'Arial';
}
QLabel {
font-size: 16px;
color: #34495e;
}
QLineEdit {
border: 2px solid #3498db;
padding: 5px;
border-radius: 4px;
}
QLineEdit:focus {
border: 2px solid #2980b9;
}
QPushButton {
background-color: #3498db;
color: white;
font-size: 18px;
border-radius: 4px;
}
QPushButton:hover {
background-color: #2980b9;
}
''')
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = CustomStyleApp()
ex.show()
sys.exit(app.exec_())
위 코드에서 보듯이, QLabel, QLineEdit 및 QPushButton의 스타일을 각각 지정하여 애플리케이션의 사용자 인터페이스를 더욱 매력적으로 만들었습니다. 특히 QLineEdit의 포커스 상태에 따라 테두리 색상을 변화시키는 것을 볼 수 있습니다.
스타일 시트의 상속과 구분
스타일 시트는 상속 개념이 적용되어, 부모 위젯에서 설정한 스타일이 자식 위젯에서도 적용될 수 있습니다. 따라서 효율적으로 스타일을 관리할 수 있습니다. 하지만 때로는 특정 위젯에만 적용되는 개별적인 스타일을 정의해야할 필요도 있습니다.
상속 예제
class InheritedStyleApp(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('스타일 상속 예제')
self.setGeometry(100, 100, 400, 300)
outer_layout = QVBoxLayout()
inner_widget = QWidget()
inner_layout = QVBoxLayout()
label = QLabel('아래는 자식 위젯입니다:')
button = QPushButton('자식 버튼')
inner_layout.addWidget(label)
inner_layout.addWidget(button)
inner_widget.setLayout(inner_layout)
outer_layout.addWidget(inner_widget)
self.setLayout(outer_layout)
# 부모 위젯 스타일
self.setStyleSheet('''
QWidget {
background-color: #eaeaea;
font-family: 'Arial';
border: 1px solid #ccc;
}
QPushButton {
background-color: #3498db;
color: white;
border-radius: 4px;
}
''')
# 자식 위젯 스타일
inner_widget.setStyleSheet('''
QWidget {
background-color: #ffffff;
border: 1px solid #3498db; /* 자식 위젯의 테두리 */
}
QLabel {
font-size: 14px;
color: #555;
}
''')
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = InheritedStyleApp()
ex.show()
sys.exit(app.exec_())
이 예제에서는 부모 위젯과 자식 위젯에 서로 다른 스타일을 지정하였습니다. 자식 위젯은 부모 위젯의 스타일을 상속 받지만, 내부에서 별도의 스타일을 적용할 수 있습니다.
부가적인 스타일 속성들
PyQt의 CSS 스타일 시트는 다양한 속성을 지원합니다. 다음은 유용하게 사용할 수 있는 추가 속성들입니다.
버튼과 링크의 스타일
QPushButton {
padding: 10px; /* 여백 설정 */
border: none; /* 테두리 없애기 */
}
QPushButton:pressed {
background-color: #2980b9; /* 클릭 상태 색상 */
}
a {
color: #3498db; /* 링크 색상 */
text-decoration: none; /* 밑줄 없애기 */
}
a:hover {
text-decoration: underline; /* 마우스 오버 시 밑줄 */
}
위와 같이 버튼의 상태에 따라 다르게 스타일을 설정할 수 있습니다. 이러한 다양한 속성을 조합하여 훨씬 더 세련된 UI를 만들 수 있습니다.
결론
CSS 스타일 시트를 통해 PyQt 애플리케이션의 위젯을 손쉽게 커스터마이징할 수 있습니다. 오늘 배우신 내용들을 통해 더욱 매력적이고 사용하기 편리한 사용자 인터페이스를 만들 수 있는 능력을 키우시길 바랍니다. PyQt의 무한한 가능성을 활용하여 독창적인 애플리케이션을 만들어보세요!
추가 자료
PyQt 관련 자료는 공식 문서 및 커뮤니티에서 찾아보실 수 있습니다. 추가적인 예제나 스타일 시트 문법에 대한 구체적인 내용은 다음 링크를 통해 확인하실 수 있습니다:
여러분의 PyQt 애플리케이션에 다양한 스타일을 적용해 보시고, 이 경험이 여러분에게 도움이 되길 바랍니다.