Unity 스타일링 개요
Unity의 UI 툴킷은 UI 요소를 효율적으로 스타일링 할 수 있는 강력한 기능을 제공합니다. 이 문서는 스타일의 우선순위와 선택자의 특정성에 대한 설명과 함께, 다양한 활용 예제를 제공합니다.
1. 선택자 우선순위 이해하기
Unity에서 스타일을 적용할 때, 여러 선택자가 같은 요소에 적용될 수 있습니다. 이때 어떤 선택자가 더 우선적으로 적용되는지를 결정하는 기준은 다음과 같습니다:
- 동일한 스타일시트 내:
- 특정성이 높은 선택자가 우선합니다.
- 특정성이 동일하면, 마지막으로 나타난 선택자가 우선합니다.
- 서로 다른 스타일시트 간:
- 사용자 정의 스타일시트의 선택자가 기본 Unity 스타일시트의 선택자보다 우선합니다.
- 특정성이 높은 선택자가 우선하며, 특정성이 동일할 경우 스타일시트의 위치에 따라 결정됩니다.
| 조건 | 우선순위 결정 요소 |
|---|---|
| 동일한 스타일시트 내 | 특정성, 파일에서의 마지막 위치 |
| 서로 다른 스타일시트 간 | 스타일시트 타입, 특정성, 위치 |
2. 선택자 특정성 이해하기
선택자 특정성은 선택자가 해당 요소와 얼마나 관련이 있는지를 나타내는 척도입니다. 특정성이 높을수록 더 구체적인 선택자입니다.
| 타입 | 구체성 |
|---|---|
| Name | 높음 |
| Class | 중간 |
| Type | 낮음 |
| Universal* | 가장 낮음 |
3. 스타일 오버라이드
UI 요소를 스타일링 하는 방법은 여러 가지가 있습니다:
- USS 파일에서 선택자 작성:
- 이 방법으로 작성된 스타일은 해당 요소에 영향을 줍니다.
- UXML 문서에서 인라인 스타일 설정:
- 요소에 직접적인 영향을 줄 수 있습니다.
- C# 스크립트에서 인라인 스타일 설정:
- C# 코드에서 요소에 대한 레퍼런스를 가져와 스타일을 설정할 수 있습니다.
상속된 프로퍼티: 요소는 부모 요소에서 스타일 값을 가져오며, 더 높은 우선권을 가진 스타일이 적용됩니다.
4. 추가 리소스
- C# 스크립트에 스타일 적용하기
- USS 베스트 프랙티스
- 유사 클래스 스타일링
활용 예제
예제 1: 여러 스타일시트 간의 스타일 오버라이드
가정: 기본 스타일시트와 사용자 정의 스타일시트가 존재합니다.
- 기본 스타일시트:
csharp .button { background-color: red; // 기본적으로 빨간 배경 } - 사용자 정의 스타일시트:
csharp .custom-button { background-color: blue; // 사용자 정의로 파란 배경 }
이 경우, 사용자 정의 스타일시트의 .custom-button이 우선 적용됩니다.
예제 2: C# 스크립트로 스타일 오버라이드
public class StyleManager : MonoBehaviour
{
public VisualElement myElement;
void Start()
{
myElement.style.backgroundColor = new Color(0, 1, 0); // 인라인 스타일을 초록색으로 설정
}
}
위 코드에서는 C# 스크립트에서 설정된 색상이 USS 스타일을 오버라이드 합니다.
마무리
Unity의 UI 스타일링은 여러 선택자와 우선순위 규칙들을 이해하는 것이 중요합니다. 이를 통해 더 효과적이고 일관된 사용자 인터페이스를 만들 수 있습니다. 다양한 방법으로 스타일을 적용하며 최적의 UI 경험을 제공하세요.