[QT] QT 5.0 Widget에 CSS 적용하기

QT 5.0 Widget에 CSS 적용하기

QT에서 각 Widget에 CSS문법을 이용하여 스타일을 입힐 수 있으며

방법으로 2가지가 존재한다.

첫 번째 방법은 QT Creator Design 화면에서 CSS를 적용하는 방법이다.

[그림1] 기본 버튼

[그림1]은 QT에서 제공하는 기본 버튼이다. 이 버튼에 CSS를 적용하기 위해 선택하고

QT Creator 화면구성 오른쪽 하단에 Widget 속성창을 찾아간다.

[그림2] Widget 속성 창

Widget의 종류에 따라 속성 창의 구성은 달라질 수 있다.

속성(Property) 중 styleSheet를 찾아 오른쪽 값(Value)에 있는 '...'을 클릭한다.

[그림3] 속성 styleSheet 팝업 창

'...'을 클릭하면 새 창으로 나타나는 Edit Style Sheet창을 볼 수 있다.

이 창에서 Add Resource와 같은 상단 메뉴를 통해 CSS를 자동으로 적용할 수도 있으며

텍스트 박스에 직접 CSS문법을 이용하여 적용할 수도 있다.

[그림4] CSS이 적용된 Edit Style Sheet

CSS가 입력된 Edit Style Sheet 창이다. 여기에 적힌 CSS가 의미하는 것은 아래와 같다.

#btn_startshare : btn_startshare라는 이름의 widget에 적용되는 것이다.

#btn_startshare:pressed : btn_startshare라는 이름의 widget이 눌렸을 때 적용되는 것이다.

background-image: 이미지 파일을 배경으로 사용한다.

※ 이미지 경로는 QT Resources에 등록된 이미지 자원주소이다.

 

두 번째 방법은 코드를 사용하는 방법이다.

QT Creator의 Design 기능을 이용하여 Widget을 사용한 경우, 

mainwindow.cpp 내에서 ui라는 변수를 이용하여 각 widget을 참조할 수 있다.

예를 들면 Window Form에 'btn_startshare'라는 버튼이 배치되어 있는 경우

코드적으로 'ui->btn_startshare'로 접근가능하다.

이를 이용하여 아래와 같이 코드적으로 위와 동일한 CSS를 적용할 수 있다.

ui->btn_startshare->setStyleSheet (      "#btn_startshare{background-image: url(:/images/images/btn_stop_n.png);}" "#btn_startshare:pressed{background-image: url(:/images/images/btn_stop_p.png);}" );

추가적으로 아래와 같은 다양한 이벤트에서의 CSS 적용이 가능하다.

QPushButton{ background-color: blue; }

QPushButton:disabled{ background-color: yellow; }

QPushButton:pressed{ background-color: orange; }

QPushButton:focus:pressed{ background-color: black; }

QPushButton:focus{ background-color: green; }

QPushButton:hover{ background-color: red; }

QPushButton:checked{ background-color: pink; }

Written by HoSeok Seo

2013. 03. 27