Unity UI 툴킷 - 클래스 선택자
개요
Unity의 USS(스타일 시트 언어)는 UI 요소의 스타일을 지정하는 데 사용되는 도구입니다. 이 문서에서는 USS의 클래스 선택자에 대해 설명합니다. 클래스 선택자는 특정 클래스가 할당된 UI 요소와 매칭되어 해당 요소의 스타일을 정의합니다.
클래스 선택자란?
클래스 선택자는 CSS의 클래스 선택자와 유사한 방식으로 작동합니다. 클래스 명 앞에 마침표가 붙으며, 대소문자를 구분합니다. 클래스는 숫자로 시작할 수 없습니다.
구문
- 클래스명은
className형식으로 작성합니다. - 스타일 규칙은 다음과 같이 정의합니다:
.className {
/* 스타일 속성들 */
}
조심해야 할 점은 USS 파일 내에서만 마침표를 사용하는 것입니다. UXML이나 C# 파일에서 클래스 이름을 할당할 때는 마침표를 포함하지 않아야 합니다.
예시
잘못된 예:
<Button class=".yellow" />
올바른 예:
<Button class="yellow" />
다중 선택자
한 요소에 두 개 이상의 클래스가 할당된 경우 선택자는 요소와 매칭되기 위해 이 중 하나의 클래스와만 일치해야 합니다. 여러 클래스를 지정하면 요소가 모든 클래스를 할당해야 매칭됩니다.
예제
아래의 UXML 예시는 클래스 선택자를 사용하여 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는 기본적으로 마진이 있고 얇은 파란색 테두리가 있는 버튼으로 표시됩니다. 다음과 같이 이름 클래스 선택자 스타일 규칙을 적용하면 container2 요소와 OK 버튼 요소의 배경이 노란색으로 변경됩니다.
.yellow {
background-color: yellow;
}
스타일 적용 후
스타일을 적용하면 배경이 노란색인 container2와 OK 버튼이 표시됩니다.
추가 리소스
- USS 베스트 프랙티스
- 이름 선택자
- 범용 선택자
요약
이 문서는 Unity에서 클래스 선택자를 사용하여 UI 요소의 스타일을 정의하는 방법을 설명했습니다. 클래스 선택자는 다양한 UI 요소에 스타일을 적용하는 데 유용하며, 다중 선택자를 통해 더 복잡한 스타일링도 가능합니다.