스타일 시트 구문

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 위젯에서 제공하는 속성 목록은 아래의 속성 목록 섹션을 참조하십시오.

선택기 유형

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

하위 컨트롤

복잡한 위젯을 스타일링하려면 QComboBox 의 드롭다운 버튼이나 QSpinBox 의 위아래 화살표와 같은 위젯의 하위 컨트롤에 액세스해야 합니다. 셀렉터에는 특정 위젯 하위 컨트롤에 규칙 적용을 제한할 수 있는 하위 컨트롤이 포함될 수 있습니다. 예를 들어

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

위의 규칙은 모든 QComboBox의 드롭다운 버튼에 스타일을 지정합니다. 이중 콜론(::) 구문은 CSS3 의사 요소와 비슷하지만, Qt 하위 컨트롤은 개념적으로 다르며 계단식 의미도 다릅니다.

서브 컨트롤은 항상 다른 요소, 즉 참조 요소를 기준으로 배치됩니다. 이 참조 요소는 위젯 또는 다른 하위 컨트롤일 수 있습니다. 예를 들어 QComboBox 의 ::드롭다운은 기본적으로 QComboBox 의 패딩 사각형 오른쪽 상단 모서리에 배치되며, : :드롭다운 하위 컨트롤의 ::드롭다운은 기본적으로 목차 사각형 중앙에 배치됩니다. 위젯의 스타일을 지정하는 데 사용할 하위 컨트롤과 기본 위치는 아래의 스타일 지정 가능 위젯 목록을 참조하세요.

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

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

여백 직사각형 내 드롭다운의 정렬은 하위 컨트롤 위치 속성을 사용하여 변경합니다.

너비 및 높이 속성을 사용하여 하위 컨트롤의 크기를 제어할 수 있습니다. 이미지를 설정하면 하위 컨트롤의 크기가 암시적으로 설정된다는 점에 유의하세요.

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

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

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

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

지원되는 하위 컨트롤 목록은 아래의 하위 컨트롤 목록을 참조하고, 실제 예제는 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 위젯에서 제공하는 의사 상태 목록은 아래의 의사 상태 목록 섹션을 참조하십시오.

충돌 해결

여러 스타일 규칙이 서로 다른 값으로 동일한 속성을 지정할 때 충돌이 발생합니다. 다음 스타일 시트를 고려해 보세요:

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 을 상속하므로) 색상 속성에 대한 충돌이 있습니다. 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 에 설정된 모든 스타일시트를 병합하여 얻을 수 있습니다.

충돌이 발생하면 충돌하는 규칙의 특수성에 관계없이 위젯의 자체 스타일 시트가 항상 상속된 스타일 시트보다 우선합니다. 마찬가지로 부모 위젯의 스타일시트가 조부모 위젯의 스타일시트보다 우선합니다.

그 결과 위젯에 스타일 규칙을 설정하면 자동으로 상위 위젯의 스타일 시트 또는 QApplication 스타일 시트에 지정된 다른 규칙보다 우선순위가 부여됩니다. 다음 예시를 살펴봅시다. 먼저 QApplication 에 스타일 시트를 설정합니다:

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

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

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

QPushButton 의 스타일 시트는 애플리케이션 전체 스타일 시트에서 제공하는 보다 구체적인 규칙 집합에도 불구하고 QPushButton (및 모든 하위 위젯)에 파란색 텍스트를 사용하도록 강제합니다.

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

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

를 작성했다면 결과는 동일했을 것입니다. 다만 QPushButton 에 자식이 있는 경우(가능성은 낮지만) 스타일 시트가 영향을 미치지 않습니다.

스타일시트 캐스케이딩은 복잡한 주제입니다. 자세한 내용은 CSS2 사양을 참조하십시오. Qt XML은 현재 !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++ 네임스페이스 내부의 위젯

유형 선택기는 특정 유형의 위젯 스타일을 지정하는 데 사용할 수 있습니다. 예를 들어

MyPushButton 클래스: public QPushButton { // ...}// ...qApp->setStyleSheet("MyPushButton { background: yellow; }");

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

네임스페이스 ns { 클래스 MyPushButton : public QPushButton { // ...} }// ...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 로 선언된 열거형을 참조하는 경우 숫자 값이 아닌 이름으로 해당 상수를 참조해야 합니다.