이 예에서는 스타일 시트와 리소스를 사용하여 프로그램의 모양과 느낌을 변경하고 보다 전문적으로 보이게 하는 방법을 배웁니다. Qt를 사용하면 웹 디자이너가 웹사이트를 장식하는 데 사용하는 CSS(Cascading Style Sheets)와 매우 유사한 Qt 스타일 시트라는 스타일 시트 언어를 사용하여 그래픽 사용자 인터페이스(GUI)를 장식할 수 있습니다.
- Qt Creator를 열고 새 프로젝트를 만듭니다. Qt Creator를 처음 사용하는 경우 New Project라는 버튼을 클릭하거나 File | New File or Project 클릭 합니다.
- Projects 창에서 Application을 선택하고 Qt Widgets Application을 선택합니다.
- 프로젝트 이름과 위치를 입력하라는 창이 나타납니다.
- 프로젝트 이름과 위치를 지정하고Next을 여러 번 클릭하고 마침 버튼을 클릭하여 프로젝트를 생성합니다. 지금은 기본 설정을 그대로 사용하겠습니다. 프로젝트가 생성되면 가장 먼저 표시되는 것은 모드 선택기 패널이라고 하는 창 왼쪽에 여러개의 아이콘이 있는 패널 입니다.
- 모드 선택기 패널 옆에 있는 사이드바 패널에서 나열된 모든 소스 파일을 볼 수 있습니다. 여기에서 편집할 파일을 선택할 수 있습니다. 이 경우 프로그램의 UI 디자인을 시작하려고 하기 때문에 Forms/mainwindow.ui을 클릭합니다.
- mainwindow.ui 파일을 두 번 클릭하면 다른 인터페이스가 갑자기 나타나는 것을 볼 수 있습니다. Qt Creator는 실제로 열려고 하는 파일에서 .ui 확장자를 감지했기 때문에 스크립트 편집기에서 UI 편집기(Qt Designer)로 전환합니다. 모드 선택기 패널에서 강조 표시된 버튼이 편집 버튼에서 디자인 버튼으로 변경되었음을 알 수 있습니다. 모드 선택기 패널의 상단에 있는 버튼 중 하나를 클릭하여 스크립트 편집기로 다시 전환하거나 다른 도구로 변경할 수 있습니다.
- 위젯 상자(Buttons 범주 아래)에서 Push Button을 Form편집기의 main window으로 끌어서 UI에 푸시 버튼을 추가해 보겠습니다. 푸시 버튼을 선택된 상태로 유지하면 창 오른쪽의 속성 편집기에서 이 버튼의 모든 속성을 볼 수 있습니다. 스크롤하여 styleSheet라는 속성을 찾습니다. 여기에서 위젯에 스타일을 적용할 수 있습니다. 위젯은 스타일 시트를 설정하는 방법에 따라 자식이나 손자에게 재귀적으로 상속되거나 상속되지 않을 수 있습니다. 또는 양식 편집기에서 UI의 위젯을 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 스타일시트 변경...을 선택할 수 있습니다.
- styleSheet 속성의 입력 필드를 클릭하여 스타일 시트 코드를 직접 작성하거나 입력 필드 옆에 있는 … 버튼을 클릭하여 스타일 시트에 대한 코드를 작성할 수 있는 Edit Style Sheet 창을 열 수 있습니다. 창 상단에는 속성 이름이 기억나지 않는 경우 코딩을 시작하는 데 도움이 되는 Add Resource, Add Gradient, Add Color및 Add Font와 같은 여러 버튼이 있습니다. 스타일 시트 편집 창을 사용하여 간단한 스타일링을 시도해 보겠습니다.
- Add Color의 아래 화살표를 클릭하여 color를 선택하고 원하는 색상을 선택합니다.
- 스타일 시트 편집 창의 텍스트 필드에 코드 줄이 추가되었습니다. 제 경우에는 다음과 같습니다.
- OK 버튼을 클릭하면 Push Button의 텍스트가 빨간색으로 변경되어야 합니다.
이전 섹션에서 우리는 C++ 코딩을 통해 Qt 위젯에 스타일 시트를 적용하는 방법에 대해 논의했습니다. 대부분의 경우 프로그램의 UI 디자인을 담당하는 사람은 프로그래머가 아니라 사용자 친화적인 UI 디자인을 전문으로 하는 UI 디자이너입니다. 이 경우 UI 디자이너가 코드를 어지럽히지 않고 다른 도구로 프로그램의 레이아웃과 스타일 시트를 디자인하도록 하는 것이 좋습니다. Qt는 Qt Creator라는 올인원 편집기를 제공합니다.
Qt Creator는 스크립트 편집기, 컴파일러, 디버거, 프로파일러 및 UI 편집기와 같은 여러 도구로 구성됩니다. Qt Designer라고도 하는 UI 편집기는 디자이너가 코드를 작성하지 않고도 프로그램의 UI를 디자인할 수 있는 완벽한 도구입니다.
댓글 없음:
댓글 쓰기