Unity UI 스타일링 가이드
이 문서는 Unity의 UI 스타일링에 대해 설명하고, 특히 Unity 스타일시트(USS)의 사용법을 중점적으로 다룹니다. 아래에서 스타일링의 기본 개념과 사용 예제에 대해 자세히 설명하겠습니다.
Unity 스타일시트(USS) 소개
Unity 스타일시트(USS)는 게임과 애플리케이션의 UI 요소를 스타일링하는 데 사용되는 텍스트 파일입니다. USS 파일의 확장자는 .uss이며, 스타일 규칙을 정의하여 UI 요소의 모양과 스타일을 관리합니다. 이를 통해 UI 디자인을 보다 효과적으로 조정하고 유지할 수 있습니다.
주요 특징
- UI 요소의 스타일을 별도의 파일로 관리
- 코드 변경 없이도 디자인 수정 가능
- 선택자와 선언 블록을 사용한 스타일 규칙 정의
USS 구문
USS의 기본 구문은 다음과 같습니다:
selector {
property1: value;
property2: value;
}
스타일 매칭
선택자는 특정 요소와 매칭하여 스타일 규칙이 적용되는 방식을 정의합니다. 예를 들어, 다음 규칙은 모든 Button 객체에 적용됩니다:
Button {
width: 200px;
}
선택자 타입
USS에서는 다양한 선택자 타입을 지원합니다. 각 선택자 유형과 그 구문은 다음 표와 같습니다.
| 선택자 타입 | 구문 | 매치 설명 |
|---|---|---|
| Type 선택자 | Type {...} | 특정 C# 또는 시각적 타입의 요소 |
| Class 선택자 | .class {...} | USS 클래스가 할당된 요소 |
| Name 선택자 | #name {...} | name 속성이 할당된 요소 |
| Universal 선택자 | * {...} | 임의의 요소 |
복잡 선택자
USS는 복잡 선택자의 하위 세트를 지원합니다. 다음은 복잡 선택자에 대한 표입니다.
| 선택자 타입 | 구문 | 매치 설명 |
|---|---|---|
| Descendant 선택자 | selector1 selector2 {...} | 다른 요소의 자손인 요소 |
| Child 선택자 | selector1 > selector2 {...} | 다른 요소의 자식인 요소 |
| Multiple 선택자 | selector1 selector2 {...} | 모든 단순 선택자와 일치하는 요소 |
스타일 요소 연결 방법
디자인을 요소에 연결하는 방법은 여러 가지가 있습니다.
- UI 빌더: 인라인 스타일 또는 USS 선택자를 사용하여 스타일을 지정합니다.
- UXML: 인라인 스타일로 지정하거나 선택자가 있는 스타일시트를 첨부합니다.
- C# 스크립트: 'style' 속성이나 'styleSheet' 프로퍼티를 사용하여 스타일을 설정합니다.
활용 및 응용 예제
예제 1: 버튼 스타일링
다음은 버튼의 배경색과 크기를 설정하는 USS 규칙입니다.
Button {
background-color: #4CAF50;
width: 150px;
height: 50px;
}
예제 2: 레이블 스타일링
사용자의 이름을 표시하는 레이블의 스타일을 다음과 같이 설정할 수 있습니다.
Label {
font-size: 20px;
color: #FFFFFF;
}
예제 3: 이미지 스타일링
이미지를 전체 화면에 꽉 차게 만들기 위한 규칙입니다.
Image {
width: 100%;
height: 100%;
}
추가 자료
이 문서를 통해 Unity에서의 스타일링 개념과 실질적인 사용 예제를 이해하는 데 도움이 되길 바랍니다.