1.5.3 스타일 시트를 사용하여 로그인 화면 만들기

 이제 다음 단계를 사용하여 로그인 양식을 생성해 보겠습니다.

1. 로고 레이아웃과 수직 스페이서 사이에 수평 레이아웃을 추가합니다. layoutTopMargin 속성을 큰 수(100)로 설정하면 위젯을 더 쉽게 추가할 수 있습니다.
   
   
   
2. 방금 만든 가로 레이아웃 안에 세로 레이아웃을 추가합니다. 이 레이아웃은 로그인 양식의 컨테이너로 사용됩니다. 위젯을 배치할 수 있도록 layoutTopMargin을 수평 레이아웃보다 낮은 숫자(20)로 설정합니다.
   
   
   
3. 방금 만든 세로 레이아웃을 마우스 오른쪽 버튼으로 클릭하고 Morph into | QWidget을 클릭한다. 세로 레이아웃이 빈 위젯으로 변환된다. 이 단계는 로그인 양식에 대한 컨테이너의 너비와 높이를 조정할 것이기 때문에 필수적입니다. 레이아웃 위젯은 너비와 높이에 대한 속성을 포함하지 않고 여백만 포함합니다. 레이아웃이 주변의 빈 공간으로 확장된다는 사실 때문에 크기 속성이 없다는 점을 고려하면 의미가 있습니다. 레이아웃을 QWidget 객체로 변환한 후에는 자동으로 위젯 클래스의 모든 속성을 상속하므로 이제 필요에 맞게 크기를 조정할 수 있습니다.
4. 레이아웃에서 방금 변환한 QWidget 객체의 이름을 loginForm으로 바꾸고 수평 정책 및 수직 정책 속성을 모두 고정으로 변경합니다. minimumSize 매개변수를 350 x 200으로 설정합니다.
5. 가로 레이아웃 안에 이미 loginForm 위젯을 배치했으므로 이제 layoutTopMargin 속성을 다시 0으로 설정할 수 있습니다.
   
   
   
6. 로고와 동일한 스타일 시트를 loginForm 위젯에 추가하여 일시적으로 표시되도록 합니다. 단, 이번에는 ID 선택기를 앞에 추가하여 하위 위젯이 아닌 loginForm에만 스타일을 적용해야 한다는 점을 제외하고는 다음과 같습니다.
   

   << code >>

   #loginForm { border: 1px solid; }

   
   

7. UI는 다음과 같아야 합니다