본문 바로가기
코딩취미/Python

setStyleSheet 에서 사용할 수 있는 스타일 항목과 특징

by 브링블링 2024. 8. 31.
반응형

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-로-설정할-수-있는-프레임-스타일-종류 [취미생활 : 프로그래밍 스터디:티스토리]

 

반응형