Unity 사용자 매뉴얼: 사용자 인터페이스(UI) 생성
UI 툴킷
USS 선택자
- 이름 선택자는 요소의 이름을 기준으로 요소를 매칭하는 방식입니다. 이는 CSS ID 선택자와 유사한 기능을 합니다.
이름 선택자 설정 방법:
- C# 스크립트에서
VisualElement.name사용 - UXML에서
name속성 사용
<VisualElement name="my-nameName">
예기치 않은 매칭을 방지하기 위해, 패널의 모든 요소 이름은 고유해야 합니다.
구문
이름 선택자는 다음 형식으로 구성됩니다:
# ElementName { ... }
참고: USS 파일에서 선택자를 작성할 때는 숫자 기호(#)만 사용해야 하며, UXML이나 C# 파일에서 요소에 이름을 부여할 때는 사용하지 않아야 합니다. 숫자 기호가 포함된 요소 이름은 유효하지 않습니다. 예를 들어:
<Button name="#OK" /> // 유효하지 않음
예제
다음 UXML 문서는 간단한 선택자를 사용하여 요소를 일치시키는 방법을 보여줍니다.
<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 요소와 매칭됩니다:
# Cancel {
border-width: 2px;
border-color: DarkRed;
background-color: pink;
}
스타일을 적용하면, UI는 다음과 같이 변경됩니다: - Cancel 버튼에는 진한 빨간색 테두리와 분홍색 배경이 표시됩니다.
추가 리소스
본 매뉴얼에서는 Unity의 UI 툴킷과 USS 선택자에 대해 설명하였습니다. 각 방법을 이해하고 활용하여 효과적인 사용자 인터페이스를 설계해보세요.