클래스 선택자
USS 클래스 선택자는 특정 USS 클래스가 할당된 요소와 매칭됩니다. USS 클래스 선택자는 CSS 클래스 선택자와 유사합니다.
구문
클래스 선택자는 마침표로 시작하는 클래스명으로 구성됩니다. 클래스명은 대소문자를 구분하며 숫자로 시작할 수 없습니다.
.className { ... }
USS 파일에 선택자를 작성할 때만 마침표를 사용하십시오. 클래스를 UXML 또는 C# 파일의 요소에 할당할 때는 마침표를 사용하지 마십시오. 예를 들어 <Button class=".yellow" /> 같이 사용하지 마십시오.
일반적으로 클래스명에는 마침표를 사용하지 마십시오. Unity의 USS 파서는 마침표를 새 클래스의 시작으로 해석합니다. 예를 들어 yellow.button이라는 클래스를 생성하고 다음 USS 규칙인 .yellow.button{...}을 생성합니다. 파서는 선택자를 다중 선택자로 해석하고, .yellow 클래스와 .button 클래스 모두와 매칭하는 요소를 찾습니다.
요소에 두 개 이상의 클래스가 할당된 경우 선택자는 요소와 매칭되기 위해 이 중 하나와만 매칭되어야 합니다.
선택자에서 여러 클래스를 지정할 수도 있습니다. 이 경우 요소는 매칭을 위해 해당 클래스를 모두 할당해야 합니다. 자세한 내용은 다중 선택자를 참조하십시오.
예제
다음 예시__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 문서는 간단한 선택자로 요소를 일치시키는 방법을 보여줍니다.
<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;
}
스타일을 적용하면 UI는 다음과 같이 표시됩니다.
