스타일 시트 구문

Qt 스타일 시트의 용어와 구문 규칙은 HTML CSS의 것과 거의 동일합니다. 이미 CSS를 알고 계시다면 이 섹션을 빠르게 훑어보셔도 될 것입니다.

스타일 규칙

스타일 시트는 일련의 스타일 규칙으로 구성됩니다. 스타일 규칙은 선택자와 선언으로 이루어집니다. 선택자는 해당 규칙이 적용될 위젯을 지정하고, 선언은 위젯에 설정할 속성을 지정합니다. 예를 들어:

QPushButton { color: red }

위의 스타일 규칙에서 ` QPushButton `는 선택자이고, ` { color: red } `는 선언입니다. 이 규칙은 ` QPushButton ` 및 그 하위 클래스(예: ` MyPushButton`)의 전경색을 빨간색으로 지정합니다.

Qt 스타일 시트는 일반적으로 대소문자를 구분하지 않습니다(즉, color, Color, COLOR 및 cOloR 은 모두 동일한 속성을 가리킵니다). 유일한 예외는 클래스 이름( object names)과 Qt 속성 이름으로, 이 경우 대소문자를 구분합니다.

쉼표(,)로 구분하여 동일한 선언에 여러 선택자를 지정할 수 있습니다. 예를 들어, 다음 규칙

QPushButton, QLineEdit, QComboBox { color: red }

는 다음 세 개의 규칙 시퀀스와 동일합니다:

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

스타일 규칙의 선언 부분은 property: value 쌍의 목록으로, 중괄호({})로 묶여 있으며 세미콜론으로 구분됩니다. 예를 들어:

QPushButton { color: red; background-color: white }

Qt Widgets가 제공하는 속성 목록은 아래의 ‘속성 목록’ 섹션을 참조하십시오.

선택자 유형

지금까지 살펴본 모든 예제에서는 가장 간단한 유형의 선택자인 ‘유형 선택자(Type Selector)’를 사용했습니다. Qt 스타일 시트는 CSS2에 정의된 모든 선택자를 지원합니다. 아래 표에는 가장 유용한 선택자 유형들이 요약되어 있습니다.

하위 컨트롤

복잡한 위젯의 스타일을 지정하려면, QComboBox 의 드롭다운 버튼이나 QSpinBox 의 위/아래 화살표와 같은 위젯의 하위 컨트롤에 접근해야 합니다. 선택자에는 규칙의 적용 범위를 특정 위젯 하위 컨트롤로 제한할 수 있게 해주는 하위 컨트롤이 포함될 수 있습니다. 예를 들어:

QComboBox::drop-down { image: url(dropdown.png) }

위의 규칙은 모든 QComboBox의 드롭다운 버튼에 스타일을 적용합니다. 이중 콜론(::) 구문은 CSS3 의사 요소를 연상시키지만, Qt 하위 컨트롤은 개념적으로 이와 다르며 캐스케이딩 의미론도 다릅니다.

서브컨트롤은 항상 다른 요소, 즉 참조 요소를 기준으로 위치가 결정됩니다. 이 참조 요소는 위젯이거나 다른 서브컨트롤일 수 있습니다. 예를 들어, QComboBox 의 ::drop-down은 기본적으로 QComboBox 의 패딩 사각형 오른쪽 상단 모서리에 배치됩니다. ::drop-down은 기본적으로 ::drop-down 하위 컨트롤의 Contents 사각형 중앙에 배치됩니다. 위젯의 스타일을 지정하는 데 사용할 하위 컨트롤과 해당 기본 위치는 아래의 ‘스타일 지정 가능한 위젯 목록’을 참조하십시오.

사용할 원점 사각형은 subcontrol-origin 속성을 사용하여 변경할 수 있습니다. 예를 들어, 드롭다운을 기본 패딩 사각형 대신 QComboBox 의 여백 사각형에 배치하려면 다음과 같이 지정할 수 있습니다:

QComboBox {
    margin-right: 20px;
}
QComboBox::drop-down {
    subcontrol-origin: margin;
}

마진 사각형 내 드롭다운의 정렬은 ` subcontrol-position ` 속성을 사용하여 변경할 수 있습니다.

width 및 height 속성을 사용하여 서브컨트롤의 크기를 제어할 수 있습니다. 이미지를 설정하면 서브컨트롤의 크기가 암시적으로 설정된다는 점에 유의하십시오.

상대 위치 지정 방식(position: relative)을 사용하면 서브 컨트롤의 위치를 초기 위치에서 오프셋할 수 있습니다. 예를 들어, QComboBox 의 드롭다운 버튼을 눌렀을 때, 내부 화살표가 오프셋되어 “눌린” 효과를 주도록 하고 싶을 수 있습니다. 이를 구현하려면 다음과 같이 지정할 수 있습니다:

QComboBox::down-arrow {
    image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
    position: relative;
    top: 1px; left: 1px;
}

절대 위치 지정 방식(position: absolute)을 사용하면 기준 요소에 대해 서브 컨트롤의 위치와 크기를 변경할 수 있습니다.

일단 위치가 지정되면, 이들은 위젯과 동일하게 취급되며 박스 모델을 사용하여 스타일을 적용할 수 있습니다.

지원되는 서브 컨트롤 목록은 아래의 ‘서브 컨트롤 목록’을 참조하고, 실제 적용 예시는 ‘QPushButton의 메뉴 표시기 서브 컨트롤 사용자 정의’를 참조하십시오.

의사 상태

선택자에는 위젯의 상태에 따라 규칙의 적용을 제한하는 의사 상태가 포함될 수 있습니다. 의사 상태는 선택자의 끝에 콜론(:)을 사이에 두고 표시됩니다. 예를 들어, 다음 규칙은 마우스가 QPushButton 위에 호버될 때 적용됩니다:

QPushButton:hover { color: white }

QRadioButton의사 상태는 느낌표 연산자를 사용하여 부정할 수 있습니다. 예를 들어, 다음 규칙은 마우스가 위에 호버되지 않았을 때 적용됩니다:

QRadioButton:!hover { color: red }

의미 상태는 연쇄될 수 있으며, 이 경우 논리적 AND 연산이 암시됩니다. 예를 들어, 마우스가 선택된 상태의 QCheckBox 위에 호버할 때 다음 규칙이 적용됩니다:

QCheckBox:hover:checked { color: white }

의사 상태 연쇄에는 부정된 의사 상태가 나타날 수 있습니다. 예를 들어, 다음 규칙은 눌려 있지 않은 QPushButton 위에 마우스를 올렸을 때 적용됩니다:

QPushButton:hover:!pressed { color: blue; }

필요한 경우, 쉼표 연산자를 사용하여 논리 OR 연산을 표현할 수 있습니다:

QCheckBox:hover, QCheckBox:checked { color: white }

의사 상태는 하위 컨트롤과 함께 나타날 수 있습니다. 예를 들어:

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

Qt Widgets에서 제공하는 의사 상태 목록은 아래의 ‘의사 상태 목록’ 섹션을 참조하십시오.

충돌 해결

여러 스타일 규칙이 동일한 속성에 대해 서로 다른 값을 지정할 때 충돌이 발생합니다. 다음 스타일 시트를 살펴보겠습니다:

QPushButton#okButton { color: gray }
QPushButton { color: red }

두 규칙 모두 okButton 라는 이름의 ` QPushButton ` 인스턴스와 일치하며, ` color ` 속성에 대해 충돌이 발생합니다. 이 충돌을 해결하려면 선택자의 특이도를 고려해야 합니다. 위 예시에서 ` QPushButton#okButton `는 ` QPushButton`보다 더 특이도가 높은 것으로 간주됩니다. 이는 ` `가 (일반적으로) 클래스의 모든 인스턴스가 아닌 단일 객체를 가리키기 때문입니다.

마찬가지로, 의사 상태를 포함하는 선택자는 의사 상태를 지정하지 않은 선택자보다 더 구체적입니다. 따라서 다음 스타일시트는 QPushButton 에 마우스를 올렸을 때는 흰색 텍스트로, 그렇지 않을 때는 빨간색 텍스트로 표시되도록 지정합니다:

QPushButton:hover { color: white }
QPushButton { color: red }

다음은 다소 까다로운 예시입니다:

QPushButton:hover { color: white }
QPushButton:enabled { color: red }

여기서는 두 선택자의 특이도가 동일하므로, 버튼이 활성화된 상태에서 마우스를 버튼 위로 올리면 두 번째 규칙이 우선 적용됩니다. 이 경우 텍스트를 흰색으로 표시하려면 규칙의 순서를 다음과 같이 바꿀 수 있습니다:

QPushButton:enabled { color: red }
QPushButton:hover { color: white }

또는 첫 번째 규칙의 특이도를 높일 수도 있습니다:

QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }

유사한 문제가 타입 선택자와 관련하여 발생합니다. 다음 예제를 살펴보겠습니다:

QPushButton { color: red }
QAbstractButton { color: gray }

두 규칙 모두 ` QPushButton ` 인스턴스에 적용되며(` QPushButton `이 ` QAbstractButton`을 상속받기 때문), ` color ` 속성에 대해 충돌이 발생합니다. ` QPushButton `이 ` QAbstractButton`을 상속받기 때문에, ` QPushButton `이 ` QAbstractButton`보다 더 구체적이라고 가정하고 싶어질 수 있습니다. 그러나 스타일시트 계산에 있어 모든 타입 선택자는 동일한 구체성을 가지며, 마지막에 나타나는 규칙이 우선합니다. 다시 말해, QPushButton를 포함한 모든 QAbstractButton에 대해 색상은 gray 로 설정됩니다. 만약 QPushButton의 텍스트를 빨간색으로 표시하고 싶다면, 규칙의 순서를 변경하면 됩니다.

규칙의 특이성을 결정하는 데 있어 Qt 스타일 시트는 CSS2 사양을 따릅니다:

선택자의 특이도는 다음과 같이 계산됩니다:

• 선택자 내 ID 속성의 개수를 세고 (= a)
• 선택자 내의 다른 속성과 의사 클래스의 개수를 세십시오 (= b)
• 선택자 내의 요소 이름 개수를 세십시오 (= c)
• 의사 요소[즉, 하위 컨트롤]는 무시합니다.

세 숫자 a-b-c를 (큰 기수를 사용하는 수 체계에서) 더하면 특이도가 구해집니다.

몇 가지 예시:

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

캐스케이딩

스타일 시트는 ` QApplication`, 부모 위젯 및 자식 위젯에 설정할 수 있습니다. 임의의 위젯에 적용되는 실제 스타일 시트는 해당 위젯의 조상(부모, 조부모 등)에 설정된 스타일 시트와 ` QApplication`에 설정된 스타일 시트를 병합하여 얻습니다.

충돌이 발생할 경우, 충돌하는 규칙의 특이도(specificity)와 관계없이 위젯 자체의 스타일 시트가 상속된 스타일 시트보다 항상 우선합니다. 마찬가지로, 부모 위젯의 스타일 시트가 조부모 위젯의 스타일 시트보다 우선하며, 이와 같은 순서가 이어집니다.

QApplication 이것의 한 가지 결과는 위젯에 스타일 규칙을 설정하면, 상위 위젯의 스타일 시트나 QApplication 스타일 시트에 지정된 다른 규칙보다 자동으로 우선순위가 부여된다는 것입니다. 다음 예제를 살펴보겠습니다. 먼저, 에 스타일 시트를 설정합니다:

qApp->setStyleSheet("QPushButton { color: white }");

그런 다음 ` QPushButton ` 객체에 스타일 시트를 설정합니다:

myPushButton->setStyleSheet("* { color: blue }");

QPushButton 에 적용된 스타일 시트는, 애플리케이션 전체 스타일 시트에서 정의된 더 구체적인 규칙에도 불구하고 QPushButton (및 모든 자식 위젯)의 텍스트 색상을 파란색으로 강제 적용합니다.

다음과 같이 작성했더라도 결과는 동일했을 것입니다.

myPushButton->setStyleSheet("color: blue");

QPushButton 에 자식 요소가 있었다면(그럴 가능성은 낮지만), 스타일시트가 그 요소들에 아무런 영향을 미치지 않았을 것이라는 점만 제외하면 결과는 동일했을 것입니다.

스타일 시트의 계단식 적용은 복잡한 주제입니다. 자세한 내용은 CSS2 사양서를 참조하십시오. 현재 Qt는 ` !important`를 구현하지 않는다는 점에 유의하십시오.

상속

일반적인 CSS에서는 항목의 글꼴과 색상이 명시적으로 설정되지 않은 경우, 상위 요소로부터 자동으로 상속됩니다. 기본적으로 Qt 스타일시트를 사용할 때, 위젯은 상위 위젯의 글꼴 및 색상 설정을 자동으로 상속받지 않습니다.

예를 들어, ` QGroupBox` 내부에 있는 ` QPushButton `을 생각해 봅시다:

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton 에는 명시적인 색상이 설정되어 있지 않습니다. 따라서 부모인 QGroupBox 의 색상을 상속받지 않고 시스템 색상을 사용합니다. QGroupBox 와 그 자식 요소들의 색상을 설정하려면 다음과 같이 작성할 수 있습니다:

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

반면, ` QWidget::setFont()` 및 ` QWidget::setPalette()`를 사용하여 글꼴과 팔레트를 설정하면 해당 설정이 자식 위젯으로 전달됩니다.

글꼴과 팔레트가 자식 위젯으로 전파되기를 원한다면, 다음과 같이 Qt::AA_UseStyleSheetPropagationInWidgetStyles 플래그를 설정할 수 있습니다:

사용법:

QCoreApplication::setAttribute(Qt::AA_UseStyleSheetPropagationInWidgetStyles, true);

위젯 스타일의 글꼴 및 색상 팔레트 전파가 활성화되면, Qt 스타일 시트를 통해 이루어진 글꼴 및 색상 팔레트 변경은 마치 사용자가 스타일 시트의 적용 대상인 모든 QWidget에 대해 해당 QWidget::setPalette() 및 QWidget::setFont() 메서드를 수동으로 호출한 것과 같은 효과를 나타냅니다.

• 스타일 시트를 통해 이루어진 변경 사항은 전파됩니다. 이러한 변경 사항은 변경이 이루어지는 시점에 해당 스타일 시트와 일치하는 모든 위젯에 한 번 적용됩니다.
• QWidget::setPalette() 또는 QWidget::setFont()을 호출하여 적용된 변경 사항은 상속됩니다. 해당 브러시나 글꼴이 명시적으로 설정되지 않은 모든 기존 및 향후 자식 위젯에 상속됩니다.

C++ 네임스페이스 내의 위젯

타입 선택기를 사용하면 특정 유형의 위젯에 스타일을 적용할 수 있습니다. 예를 들어,

class MyPushButton : public QPushButton {
    // ...
};

// ...
void someFunction()
{
    qApp->setStyleSheet("MyPushButton { background: yellow; }");
   //...

Qt 스타일 시트는 위젯의 QObject::className()을 사용하여 타입 선택기를 적용할 시점을 결정합니다. 사용자 정의 위젯이 네임스페이스 내에 있을 경우, QObject::className()은 <네임스페이스>::<클래스명>을 반환합니다. 이는 하위 컨트롤의 구문과 충돌합니다. 이 문제를 해결하려면, 네임스페이스 내의 위젯에 타입 선택기를 사용할 때 :: 을 -- 로 대체해야 합니다. 예를 들어,

namespace ns {
    class MyPushButton : public QPushButton {
        // ...
    };
}

// ...
void someMethod()
{
    qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");
   //...

QObject 속성 설정

4.3 버전부터는 qproperty-<속성 이름> 구문을 사용하여 디자인 가능한 모든 Q_PROPERTY 객체의 속성을 설정할 수 있습니다.

예를 들어,

MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }

해당 속성이 ` Q_ENUM`로 선언된 열거형을 참조하는 경우, 상수의 숫자 값이 아닌 이름을 사용하여 참조해야 합니다.