Unity 사용자 매뉴얼 - UI 스타일링
개요
이 문서는 Unity UI 툴킷에서의 USS(유니티 스타일 시트) 선택자에 대해 설명합니다. 특히 타입 선택자의 개념과 사용법을 다룹니다.
타입 선택자
USS 타입 선택자는 특정 오브젝트의 타입에 따라 스타일을 적용합니다. 이는 HTML의 CSS 선택자와 유사하게 작동합니다.
문법
타입 선택자를 정의할 때는 다음과 같은 문법을 사용합니다:
TypeName { ... }
- 타입 이름에는 네임스페이스를 포함하지 않아야 합니다.
- 예를 들어,
Button { ... }는 유효하지만UnityEngine.UIElements.Button { ... }는 유효하지 않습니다.
예제
다음은 기본적인 UI 구성 요소입니다:
<UXML xmlns="UnityEngine.UIElements">
<VisualElement name="container1">
<VisualElement name="container2" class="yellow">
<Button name="OK" class="yellow" text="OK" />
<Button name="Cancel" text="Cancel" />
</VisualElement>
</VisualElement>
</UXML>
스타일이 적용되지 않은 경우 UI는 기본적인 버튼만 표시됩니다.
스타일링 예시
다음과 같은 스타일 규칙이 있을 경우:
Button {
border-radius: 8px;
width: 100px;
}
이 규칙은 두 개의 버튼 요소에 적용됩니다. 스타일을 적용하면 버튼의 모서리가 둥글고 너비가 100px로 설정됩니다.
추가 리소스
활용 및 응용 예제
다음은 타입 선택자를 활용한 다양한 예제입니다.
| 예제 설명 | 코드 |
|---|---|
| 버튼에 색상 적용 | csharp Button { background-color: blue; } |
| 폰트 스타일 설정 | csharp Button { font-size: 14px; font-weight: bold; } |
| 마우스 호버 효과 | csharp Button:hover { background-color: green; } |
위의 표는 UI 버튼에 다양한 스타일을 적용하는 예를 보여줍니다. 각각의 스타일은 사용자 경험을 개선하는 데 중요한 역할을 합니다.
결론
이 문서에서 소개한 타입 선택자를 사용하여 Unity에서 UI 요소를 효과적으로 스타일링할 수 있습니다. USS의 다양한 기능을 활용하여 더 매력적이고 사용자 친화적인 인터페이스를 디자인해보세요.