QLabel Sunken 그림자 방향 바꾸기 + setFrameStyle 과 setStyleSheet 차이점

QLabel Sunken 그림자 방향 바꾸기 + setFrameStyle 과 setStyleSheet 차이점

PySide6을 사용해 사용자 인터페이스를 디자인할 때, 위젯의 시각적 스타일을 조정하는 것은 중요한 요소입니다. QLabel과 같은 기본적인 UI 요소는 애플리케이션의 전반적인 분위기와 사용자 경험에 큰 영향을 미칩니다. 특히, QLabel의 프레임 스타일을 설정하거나, 특정 상태에서의 스타일을 변경하는 것은 다양한 디자인 요구를 충족하는 데 필수적입니다.

 

이 글에서는 QLabel의 "Sunken" 스타일에서 그림자 방향을 변경하는 방법을 탐구하고, 이러한 스타일 설정 시  setFrameStyle과 setStyleSheet 두 가지 접근 방식의 차이점을 비교해보겠습니다. 이를 통해 각 방법이 제공하는 유연성과 제약 사항을 이해하고, 상황에 맞는 올바른 스타일링 방법을 선택할 수 있을 것입니다.

1. QLabel Sunken 그림자 방향 바꾸기

여러 개의 QLabel 객체가 있을 때 동일한 폰트와 굵기를 설정하고 패널 스타일을 적용하는 방법입니다. 이 코드는 QLabel 객체들을 생성한 후, 공통된 스타일을 적용하는 방식으로 구현했습니다.

from PySide6.QtWidgets import QApplication, QLabel, QWidget, QVBoxLayout
from PySide6.QtGui import QFont

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()

        # 폰트 설정
        font = QFont("Arial", 14, QFont.Bold)  # Arial 폰트, 크기 14, 굵게

        # QLabel 객체 생성
        label1 = QLabel("Label 1")
        label2 = QLabel("Label 2")
        label3 = QLabel("Label 3")

        # QLabel에 동일한 폰트와 스타일 적용
        for label in (label1, label2, label3):
            label.setFont(font)  # 폰트 설정
            label.setFrameStyle(QLabel.Panel | QLabel.Raised)  # 패널 스타일 설정
            label.setLineWidth(2)  # 테두리 두께 설정
            label.setStyleSheet("""
                QLabel {
                    padding: 10px;
                    margin: 5px;
                    background-color: lightgray;  /* 배경 색상 */
                    border-radius: 5px;            /* 모서리 둥글게 */
                }
            """)

        # 레이아웃 설정
        layout = QVBoxLayout()
        layout.addWidget(label1)
        layout.addWidget(label2)
        layout.addWidget(label3)
        self.setLayout(layout)

# QApplication 생성 및 실행
app = QApplication([])
window = MyWidget()
window.show()
app.exec()

 

• 폰트 설정:
  • QFont("Arial", 14, QFont.Bold)를 사용하여 폰트를 설정합니다. 여기서 "Arial"은 폰트 이름, 14는 폰트 크기, QFont.Bold는 굵기를 나타냅니다.
• QLabel 객체 생성:
  • label1, label2, label3와 같이 여러 개의 QLabel 객체를 생성합니다.
• QLabel에 동일한 스타일 적용:
  • for 루프를 사용하여 각 QLabel에 동일한 폰트와 스타일을 설정합니다.
  • setFont()로 폰트를 설정하고, setFrameStyle(QLabel.Panel | QLabel.Raised)로 패널 스타일을 "Raised"로 설정합니다.
  • setStyleSheet()로 각 QLabel에 동일한 CSS 스타일을 적용하여, 배경색, 여백, 테두리 둥글기를 설정합니다.
• 레이아웃 설정:
  • QVBoxLayout을 사용하여 QLabel들을 수직으로 배치합니다.

반응형

 

2. setFrameStyle 과 setStyleSheet 차이점

QLabel의 스타일을 설정할 때, setFrameStyle과 setStyleSheet는 서로 다른 방법을 제공합니다. 이 두 가지 방법의 특징, 장단점, 그리고 각각의 사용 방법에 대해 정리했습니다.

1. setFrameStyle 사용

setFrameStyle은 QLabel에 미리 정의된 프레임 스타일을 적용하는 방법입니다. 이 방법은 QLabel의 프레임 스타일을 간단하게 설정할 수 있으며, PyQt 또는 PySide의 기본 기능에 의존합니다.

 

[ 특징 ]

• 미리 정의된 스타일: QLabel에서 제공하는 미리 정의된 프레임 스타일(예: Sunken, Raised 등)을 쉽게 적용할 수 있습니다.
• 단순함: 코드가 간단하고 이해하기 쉽습니다.
• 효율적: 스타일을 변경할 때 시스템 리소스를 적게 사용합니다.

[ 장점 ]

• 사용이 간단하고, 시스템과의 호환성이 좋습니다.
• 기본 스타일을 쉽게 설정할 수 있습니다.
• 스타일 변경 시 성능이 우수합니다.

[ 단점 ]

• 커스터마이징에 한계가 있습니다. 기본 제공 스타일 이외의 스타일을 적용할 수 없습니다.
• 복잡한 스타일을 적용하기 어렵습니다.

아래 코드는 QLabel.Panel의 프레임 스타일을 패널로 설정하고, QLabel.Sunken은 프레임을 눌린 형태로 설정합니다. setLineWidth는 프레임의 두께를 설정합니다.

from PySide6.QtWidgets import QLabel

label = QLabel("Sample Text")
label.setFrameStyle(QLabel.Panel | QLabel.Sunken)
label.setLineWidth(2)

2. setStyleSheet 사용

setStyleSheet는 CSS와 유사한 구문을 사용하여 QLabel의 스타일을 설정하는 방법입니다. 이 방법은 QLabel의 모양과 느낌을 세부적으로 제어할 수 있게 해줍니다.

 

[ 특징 ]

• 높은 커스터마이징 가능성: CSS와 유사한 문법을 사용해 다양한 스타일을 적용할 수 있습니다.
• 복잡한 스타일 적용 가능: 텍스트 색상, 배경색, 테두리, 그림자 등 다양한 스타일 요소를 설정할 수 있습니다.
• HTML/CSS 기반 스타일링: 웹 개발에 익숙한 사용자에게 친숙한 방식입니다.

[ 장점 ]

• 매우 세밀한 스타일 설정이 가능합니다.
• 다양한 스타일 속성을 한꺼번에 설정할 수 있습니다.
• 애플리케이션의 디자인 일관성을 유지하기 쉽습니다.

[ 단점 ]

• 성능이 약간 저하될 수 있습니다. 특히 복잡한 스타일을 여러 요소에 적용할 경우.
• 코드가 길어질 수 있으며, 읽기 어렵습니다.
• 미리 정의된 기본 스타일을 적용하는 것이 다소 번거로울 수 있습니다.

이 코드에서는 setStyleSheet를 사용하여 QLabel의 텍스트 색상, 배경색, 폰트 크기, 테두리, 테두리 둥글기, 패딩, 그림자 등을 설정했습니다.

from PySide6.QtWidgets import QLabel

label = QLabel("Sample Text")
label.setStyleSheet("""
    QLabel {
        color: white;
        background-color: blue;
        font-size: 18px;
        border: 2px solid black;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }
""")

---

 

• setFrameStyle: 단순한 프레임 스타일을 설정해야 하고, 성능이 중요하거나 커스터마이징이 필요하지 않은 경우에 적합합니다. 예를 들어, 기본 제공되는 Sunken 또는 Raised 스타일을 사용하고자 할 때 유용합니다.
• setStyleSheet: 세부적인 스타일링이 필요하고, 사용자 정의 디자인을 구현해야 하는 경우에 적합합니다. 복잡한 UI를 구축하거나, 애플리케이션의 디자인을 웹과 비슷하게 만들고자 할 때 사용합니다.