Unity 사용자 매뉴얼: UI 스타일링 및 선택자 사용법
개요
Unity의 UI Toolkit에서는 다양한 스타일링 방법을 제공하여 사용자 인터페이스(UI)를 구축할 수 있습니다. 이 문서에서는 CSS와 유사한 스타일 규칙을 통해 UI 요소를 선택하고 스타일링하는 방법을 설명합니다.
선택자 유형
자식 선택자
자식 선택자는 특정 요소의 직접적인 자식을 일치시키기 위해 사용됩니다. 일반적인 구문은 다음과 같습니다:
selector1 > selector2 {...}
이러한 선택자는 복잡한 선택자와 함께 사용될 수 있으며, 와일드카드 선택자도 포함할 수 있습니다.
예제
다음은 자식 선택자를 사용하여 버튼을 스타일링하는 방법을 설명합니다.
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>
이 예시는 두 개의 버튼이 포함된 두 개의 VisualElement를 보여줍니다. 여기서 container2는 yellow 클래스를 가지고 있으며, OK 버튼도 동일한 클래스를 가집니다.
스타일링 예제
스타일을 적용하지 않으면 UI는 기본 상태로 표시됩니다. 다음 코드 스니펫을 통해 자식 선택자를 사용하여 스타일을 적용할 수 있습니다.
#container1 > .yellow {
background-color: yellow;
}
이 코드는 container1의 직접 자식인 container2의 배경색을 노란색으로 변환합니다.
적용 결과
스타일을 적용한 후 UI는 container2의 배경색이 노란색으로 변경되어 표시됩니다. UI 요소들이 어떻게 보이는지 시각적으로 확인하는 것이 중요합니다.
추가 리소스
결론
Unity에서는 다양한 선택자와 스타일링 기술을 통해 효율적으로 UI를 디자인할 수 있습니다. 자식 선택자를 활용하여 직관적인 UI를 구성하고, 각 요소의 외관을 조정하여 사용자 경험을 개선할 수 있습니다.