Unity UI 스타일링: USS 커스텀 프로퍼티(변수) 사용하기
개요
Unity에서 UI를 만들 때, 스타일을 쉽게 관리하기 위해 USS(유니티 스타일 시트) 커스텀 프로퍼티(변수)를 사용하는 방법을 소개합니다. 커스텀 프로퍼티는 다양한 UI 요소의 스타일을 더 용이하게 조정할 수 있게 해줍니다.
USS 변수 생성하기
USS 변수를 생성하려면 변수 이름 앞에 더블하이픈(--)을 붙이면 됩니다. 예를 들어:
--color-1: red;
이 변수는 다른 USS 규칙에서 사용될 수 있습니다. 변수를 참조할 때는 var() 함수를 사용합니다.
color: var(--color-1);
변수를 업데이트하면 이 변수를 사용하는 모든 USS 프로퍼티도 함께 업데이트됩니다.
예제
다음 예제는 두 개의 컬러 변수를 선언하고 이들을 사용하는 스타일 규칙을 보여줍니다.
:root {
--color-1: blue;
--color-2: yellow;
}
.paragraph-regular {
color: var(--color-1);
background: var(--color-2);
padding: 2px;
}
.paragraph-reverse {
color: var(--color-2);
background: var(--color-1);
padding: 2px;
}
색 구성표를 업데이트하고 싶다면, 두 개의 변수 값만 변경하면 됩니다. 이를 통해 복잡한 UI의 스타일을 보다 쉽게 관리할 수 있습니다.
기본값 지정하기
var() 함수는 기본값을 설정할 수 있는 옵션이 있습니다. 변수를 찾을 수 없을 경우 기본값을 사용하도록 설정할 수 있습니다. 예를 들어:
var(--color-1, #FF0000);
위 코드는 --color-1 변수를 사용하지 못할 경우 빨간색("#FF0000")을 기본값으로 사용하도록 설정합니다.
CSS 변수와의 차이점
USS 변수는 CSS 변수와 유사하게 작동하지만, 몇 가지 제한 사항이 있습니다.
- USS에서는 다른 함수 내부에서
var()함수를 사용할 수 없습니다. - USS는 변수에 대한 수학적 계산을 지원하지 않습니다.
추가 리소스
정리
USS 커스텀 프로퍼티를 활용하면 복잡한 UI의 스타일을 보다 효과적으로 관리할 수 있습니다. 기본값이라는 기능을 활용하여 유연성을 높이고, 여러 스타일 규칙에서 동일한 값을 사용할 수 있게 해주는 것은 매우 유용합니다.
이 정보를 바탕으로 여러분의 Unity 프로젝트에서 UI 스타일링을 개선해 보세요!