Unity 사용자 매뉴얼 2022.3 (LTS) - UI 스타일링
사용자 인터페이스(UI) 생성
UI 툴킷
USS 선택자
범용 선택자
범용 선택자(또는 와일드카드 선택자)는 모든 UI 요소와 매칭됩니다. CSS에서의 범용 선택자와 유사한 기능을 합니다.
구문
* { ... }
예제 다음은 간단한 선택자로 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는 다음과 같이 표시됩니다. 마진과 얇은 파란색 테두리가 있는 예시 버튼.
다음 범용 클래스 선택자 스타일 규칙은 모든 요소와 매칭되며 배경색을 노란색으로 변경합니다.
* {
background-color: yellow;
}
스타일을 적용하면 UI는 모든 요소의 배경색이 노란색으로 변경되어 다음과 같이 표시됩니다.
추가 리소스
저작권 © 2022 Unity Technologies. Publication 2022.3
활용 및 응용 예제
예제 1: 버튼 스타일 변경
버튼의 배경색과 글자색을 변경하여 인터랙티브한 UI를 만드는 방법을 알아봅시다.
.button {
background-color: blue;
color: white;
}
예제 2: 특정 클래스 선택
특정 클래스명을 가진 요소에만 스타일을 적용하도록 설정합니다.
.green {
background-color: green;
}
예제 3: 자손 선택자 활용
부모 요소의 특정 클래스가 있는 경우 자식 요소에 스타일을 적용:
.container .button {
margin: 10px;
}
예제 4: 버튼 상태에 따른 색상 변화
버튼에 마우스를 올렸을 때 색상을 변경하여 사용자 피드백을 제공합니다.
.button:hover {
background-color: orange;
}
이 예제를 통해 Unity의 UI 스타일링을 통해 보다 매력적이고 사용자 친화적인 인터페이스를 만들 수 있습니다. 다양한 선택자를 조합하여 UI 요소를 세밀하게 컨트롤하고 스타일링하세요.