Version: 2022.2
언어: 한국어
UI 스타일링
USS 선택자

USS 소개

Unity 스타일시트(USS)는 스타일 규칙을 지원하는 에셋으로 인식되는 텍스트 파일입니다.USS 텍스트 파일의 확장자는 ’.uss’여야 합니다.

USS 파일을 사용하여 게임과 애플리케이션에서 UI 요소의 모양과 스타일을 정의할 수 있습니다.USS는 UI 요소의 모양과 스타일을 나머지 코드에서 분리하는 방법을 제공하므로 애플리케이션의 디자인(look and feel)을 더 쉽게 관리하고 유지할 수 있습니다.

USS를 사용하면 버튼, 레이블, 이미지 및 기타 UI 요소의 스타일을 별도의 USS 파일에 정의한 다음, 게임 또는 애플리케이션 코드에서 해당 스타일을 적용할 수 있습니다.이렇게 하면 코드를 변경하지 않고도 USS 파일을 수정하여 애플리케이션의 모양을 변경할 수 있습니다.

USS는 다음으로 구성됩니다.

  • 선택자와 선언 블록을 포함하는 스타일 규칙
  • 스타일 규칙의 적용을 받는 시각적 요소를 식별하는 선택자
  • 하나 이상의 스타일 선언이 있는 중괄호 안에 있는 선언 블록각 스타일 선언에는 프로퍼티와 값이 있습니다.각 스타일 선언은 세미콜론으로 끝납니다.

구문

다음은 스타일 규칙의 일반적인 구문입니다.

selector {
  property1: value;
  property2: value;
}

규칙을 통한 스타일 매칭

스타일시트를 정의하면 비주얼 트리에 적용할 수 있습니다.선택자는 요소와 일치하여 USS 파일에서 어떤 프로퍼티가 적용되는지 확인합니다.선택자가 요소와 일치하면 스타일 선언이 해당 요소에 적용됩니다.

예를 들어 다음의 규칙은 모든 Button 오브젝트와 매칭됩니다.

Button {
  width: 200px;
}

지원되는 선택자 타입

USS는 다음과 같이 다양한 기준에 따라 요소를 매칭시키는 여러 유형의 단순 및 복잡 선택자를 지원합니다.

  • 요소 C# 타입 이름
  • 할당된 name 프로퍼티
  • USS 클래스 리스트
  • 시각적 트리에서 요소의 위치 및 다른 요소와의 관계

USS는 또한 특정 상태의 요소를 타겟팅하거나 ‘:root’ 요소를 선택하기 위해 선택자와 함께 사용할 수 있는 유사 클래스를 지원합니다.

요소가 둘 이상의 선택자와 일치하는 경우 USS는 [우선권을 갖는] 선택자의 스타일을 적용합니다(UIE-uss-selector-priority).

참고:모든 선택자는 대소문자를 구분합니다.

단순 선택자

USS는 CSS의 단순 선택자와 유사하지만 동일하지는 않은 단순 선택자 집합을 지원합니다.다음 표는 USS 단순 선택자에 대한 빠른 레퍼런스를 제공합니다.

선택자 타입 구문 매치
Type 선택자 Type {...} 특정 C# 또는 시각적 요소 타입의 요소입니다.
Class 선택자 .class {...} USS 클래스가 할당된 요소입니다.
Name 선택자 #name {..} name 속성이 할당된 요소입니다.
Universal 선택자 * {...} 임의의 요소입니다.

복잡 선택자

USS는 CSS 복잡 선택자의 하위 세트를 지원합니다.다음 표는 USS 복잡 선택자에 대한 빠른 레퍼런스를 제공합니다.

선택자 타입 구문 매치
Descendant 선택자 selector1 selector2 {...} 시각적 트리에서 다른 요소의 자손인 요소입니다.
Child 선택자 selector1 > selector2 {...} 시각적 트리에서 다른 요소의 자식인 요소입니다.
Multiple 선택자 selector1selector2 {...} 모든 단순 선택자와 일치하는 요소입니다.

요소에 스타일 연결

다음과 같은 방법으로 스타일을 요소에 연결할 수 있습니다.

  • UI 빌더에서는 인라인 스타일 또는 USS 선택자를 사용하여 요소의 스타일을 지정할 수 있습니다.자세한 내용은 UI 빌더로 UI 스타일링을 참조하십시오.
  • UXML에서는 인라인 스타일로 요소에 스타일을 지정하거나 이 요소와 매칭되는 선택자가 있는 스타일시트를 첨부합니다.자세한 내용은 UXML에 스타일 추가를 참조하십시오.
  • C# 스크립트에서 ‘style’ 속성에 직접 스타일을 설정하거나 해당 요소에 매칭되는 선택자를 사용하여 ‘styleSheet’ 프로퍼티에 USS 스타일시트를 추가합니다.자세한 내용은 C# 스크립트에 스타일 적용을 참조하십시오.

추가 리소스

UI 스타일링
USS 선택자