USS를 통한 UI 스타일링

각 VisualElement에는 요소의 크기를 설정하는 스타일 프로퍼티와 화면에 요소를 그리는 방식(예: backgroundColor 또는 borderColor)이 포함되어 있습니다.

스타일 프로퍼티는 C#으로 또는 스타일시트에서 설정됩니다. 스타일 프로퍼티에는 고유한 데이터 구조(IStyle 인터페이스)가 있습니다.

UI 툴킷은 USS(Unity 스타일시트)로 작성된 스타일시트를 지원합니다. USS 파일은 HTML의 캐스케이딩 스타일시트(CSS)에서 영감을 받은 텍스트 파일입니다. USS 포맷은 CSS 포맷과 유사하지만, USS에는 Unity 작업을 향상하는 오버라이드와 커스터마이징 옵션이 포함되어 있습니다.

이 섹션에서는 USS, USS 구문, 그리고 CSS와의 차이점에 대해 설명합니다.

지원되는 USS 프로퍼티에 대한 간략한 내용은 USS 프로퍼티 레퍼런스를 참조하십시오.

Unity 스타일시트의 정의

Unity 스타일시트(USS)의 기본 빌딩 블록은 다음과 같습니다.

• USS는 에셋으로 인식되는 텍스트 파일입니다. 텍스트 파일은 .uss 확장자를 사용해야 합니다.
• USS는 스타일 규칙만 지원합니다.
• 스타일 규칙은 선택자와 선언 블록으로 구성됩니다.
• 선택자는 스타일 규칙의 적용을 받는 시각적 요소를 식별합니다.
• 중괄호로 묶인 선언 블록에는 하나 이상의 스타일 선언이 포함됩니다. 각 스타일 선언은 프로퍼티와 값으로 구성됩니다. 각 스타일 선언은 세미콜론으로 끝납니다.
• 각 스타일 프로퍼티의 값은 리터럴이며, 파싱 시 타겟 프로퍼티 이름과 일치해야 합니다.

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

selector {
  property1:value;
  property2:value;
}

USS를 시각적 요소와 연결

Unity 스타일시트(USS)를 모든 시각적 요소와 연결할 수 있습니다. 스타일 규칙은 시각적 요소와 모든 해당 자손들에게 적용됩니다. 또한 스타일시트는 필요에 따라 자동으로 재적용됩니다.

AssetDatabase.Load() 또는 Resources.Load() 등과 같은 표준 Unity API를 사용하여 StyleSheet 오브젝트를 로드합니다. 스타일시트를 시각적 요소에 연결하려면 VisualElement.styleSheets.Add() 메서드를 사용하십시오.

EditorWindow가 실행되는 동안 USS 파일을 수정하면 스타일 변경 사항이 즉시 적용됩니다.

스타일 적용 프로세스는 UI 툴킷을 사용하는 개발자에게 투명하게 공개됩니다. 스타일시트는 필요한 경우(예: 계층 구조 변경, 스타일시트 재로드) 자동으로 다시 적용됩니다.

규칙을 통한 스타일 매칭

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

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

Button {
  width: 200px;
}

VisualElement 매칭

UI 툴킷은 다음 기준을 사용하여 시각적 요소와 스타일 규칙을 매칭합니다.

• 해당 C# 클래스명(항상 파생된 클래스)
• 문자열로 된 name 프로퍼티
• 문자열 집합으로 표시된 클래스 리스트
• 비주얼 트리에서 VisualElement의 조상과 포지션

이러한 특성들이 스타일시트의 선택자에서 사용될 수 있습니다.

CSS에 익숙하다면 HTML 태그 이름, id 속성 및 class 속성 등과 같은 유사점을 발견할 수 있을 것입니다.