setStyleSheet 에서 사용할 수 있는 스타일 항목과 특징
setStyleSheet를 사용하면 PySide6에서 위젯의 스타일을 CSS와 유사한 방식으로 설정할 수 있습니다. 사용할 수 있는 스타일 항목은 매우 다양하며, 각 항목은 위젯의 특정 속성을 제어합니다. 여기서는 QLabel과 같은 기본 위젯에서 자주 사용되는 스타일 속성을 중심으로 설명하겠습니다.
setStyleSheet에서 사용할 수 있는 스타일 항목은 HTML/CSS에서 사용되는 대부분의 속성을 포함하여 PySide6에서 정의한 속성까지 포함합니다. 여기서는 자주 사용되는 주요 항목들을 정리합니다.
주요 스타일 항목과 특징
1. color
- 설명: 텍스트의 색상을 설정합니다.
- 사용 예: color: red;
- 특징: 텍스트의 가독성을 높이거나 강조할 때 유용합니다.
2. background-color
- 설명: 위젯의 배경색을 설정합니다.
- 사용 예: background-color: blue;
- 특징: 위젯을 시각적으로 구분하거나 강조할 때 사용합니다.
3. font-size
- 설명: 텍스트의 크기를 설정합니다.
- 사용 예: font-size: 14px;
- 특징: 텍스트의 가독성을 높이거나 시각적인 위계를 설정할 때 유용합니다.
4. font-family
- 설명: 텍스트의 글꼴을 설정합니다.
- 사용 예: font-family: Arial, Helvetica, sans-serif;
- 특징: 특정 글꼴을 사용하여 UI의 느낌을 사용자 정의할 수 있습니다.
5. font-weight
- 설명: 텍스트의 굵기를 설정합니다.
- 사용 예: font-weight: bold;
- 특징: 텍스트를 강조하거나 시각적 효과를 더할 때 사용합니다.
6. font-style
- 설명: 텍스트의 스타일(이탤릭 등)을 설정합니다.
- 사용 예: font-style: italic;
- 특징: 텍스트에 변화를 주고자 할 때 사용합니다.
7. padding
- 설명: 위젯 내부의 여백을 설정합니다.
- 사용 예: padding: 10px;
- 특징: 콘텐츠와 테두리 간의 간격을 조정하여 레이아웃을 개선합니다.
8. margin
- 설명: 위젯 외부의 여백을 설정합니다.
- 사용 예: margin: 5px;
- 특징: 위젯 간의 간격을 조정하여 배치를 개선합니다.
9. border
- 설명: 위젯의 테두리를 설정합니다.
- 사용 예: border: 2px solid black;
- 특징: 테두리를 통해 위젯을 시각적으로 구분할 수 있습니다.
10. border-radius
- 설명: 테두리의 모서리를 둥글게 만듭니다.
- 사용 예: border-radius: 10px;
- 특징: 모서리를 둥글게 하여 부드러운 느낌을 줄 수 있습니다.
11. box-shadow
- 설명: 위젯에 그림자를 추가합니다.
- 사용 예: box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
- 특징: 위젯에 깊이감을 부여하여 입체적인 효과를 줄 수 있습니다.
12. text-align
- 설명: 텍스트의 정렬을 설정합니다.
- 사용 예: text-align: center;
- 특징: 텍스트를 중앙, 왼쪽, 오른쪽에 정렬할 수 있습니다.
13. vertical-align
- 설명: 수직 정렬을 설정합니다.
- 사용 예: vertical-align: middle;
- 특징: 텍스트나 요소의 수직 방향 정렬을 조정할 수 있습니다.
14. min-width / min-height
- 설명: 위젯의 최소 너비와 높이를 설정합니다.
- 사용 예: min-width: 100px; min-height: 50px;
- 특징: 위젯의 크기를 제한하여 레이아웃이 깨지지 않도록 할 수 있습니다.
15. max-width / max-height
- 설명: 위젯의 최대 너비와 높이를 설정합니다.
- 사용 예: max-width: 200px; max-height: 100px;
- 특징: 위젯의 크기를 제한하여 특정 범위 내에서만 크기를 변화시킬 수 있습니다.
16. background-image
- 설명: 위젯에 배경 이미지를 설정합니다.
- 사용 예: background-image: url('image.png');
- 특징: 이미지로 배경을 꾸밀 수 있습니다.
17. opacity
- 설명: 위젯의 투명도를 설정합니다.
- 사용 예: opacity: 0.5;
- 특징: 위젯의 불투명도를 조정하여 투명한 효과를 줄 수 있습니다.
18. hover
- 설명: 마우스 오버 시에만 적용되는 스타일을 설정합니다.
- 사용 예: QLabel:hover { color: red; }
- 특징: 사용자와의 상호작용을 강조할 수 있습니다.
스타일 항목의 갯수와 종류
CSS와 유사하게 PySide6의 setStyleSheet에서 사용할 수 있는 스타일 속성은 수십 가지가 넘습니다. 이들 속성은 위젯의 외관과 느낌을 세밀하게 제어할 수 있도록 해줍니다. 위에서 설명한 스타일 속성들은 가장 자주 사용되며, PySide6에서 UI 요소의 모양과 동작을 제어하는 데 매우 유용합니다.
setStyleSheet에서는 단일 속성뿐만 아니라, 속성을 복합적으로 사용하여 복잡한 스타일을 적용할 수 있습니다. 여러 스타일을 동시에 적용하고 싶다면 각 속성을 세미콜론(;)으로 구분하여 사용할 수 있습니다.
사용 예시
다음은 위에서 설명한 다양한 스타일 속성을 사용하는 예시입니다.
from PySide6.QtWidgets import QApplication, QLabel, QWidget, QVBoxLayout
class MyWidget(QWidget):
def __init__(self):
super().__init__()
# QLabel 생성
label = QLabel("Styled QLabel Example")
# 스타일 시트 설정
label.setStyleSheet("""
QLabel {
color: white;
background-color: #3498db;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px;
margin: 10px;
border: 2px solid #2980b9;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
QLabel:hover {
background-color: #2980b9;
color: #ecf0f1;
}
""")
# 레이아웃 설정
layout = QVBoxLayout()
layout.addWidget(label)
self.setLayout(layout)
# QApplication 생성 및 실행
app = QApplication([])
window = MyWidget()
window.show()
app.exec()
* 참고링크
QLabel Sunken 그림자 방향 바꾸기 + setFrameStyle 과 setStyleSheet 차이점
출처: https://hobbylife.tistory.com/entry/QLabel-Sunken-그림자-방향-바꾸기-setFrameStyle-과-setStyleSheet-차이점 [취미생활 : 프로그래밍 스터디:티스토리]
setFrameStyle 로 설정할 수 있는 프레임 스타일 종류
출처: https://hobbylife.tistory.com/entry/setFrameStyle-로-설정할-수-있는-프레임-스타일-종류 [취미생활 : 프로그래밍 스터디:티스토리]
'코딩취미 > Python' 카테고리의 다른 글
문자열을 파이썬 코드로 해석해서 실행하는 함수 : eval(), exec() 비교 (0) | 2024.09.04 |
---|---|
파이썬 그래프 패키지 설치 방법과 특징 (Matplotlib, Seaborn, Plotly ) (0) | 2024.09.03 |
setFrameStyle 로 설정할 수 있는 프레임 스타일 종류 (0) | 2024.08.30 |
QLabel Sunken 그림자 방향 바꾸기 + setFrameStyle 과 setStyleSheet 차이점 (0) | 2024.08.30 |
파이썬 3.12의 "Typed Syntax Enhancements" 특징과 개선사항 (0) | 2024.08.21 |