Unity 스타일시트(USS)를 사용하면 USS 파일의 VisualElement 프로퍼티에 대한 값을 지정할 수 있습니다. 또한 VisualElement의 C# 프로퍼티를 사용하여 C#으로 프로퍼티 값을 할당할 수도 있습니다. C#에 할당된 값은 USS 파일에서 값을 오버라이드합니다.
커스텀 프로퍼티를 사용하여 USS를 확장할 수 있습니다. 커스텀 USS 프로퍼티에는 -- 접두사가 필요합니다.
이 페이지에서는 지원되는 데이터 타입을 소개합니다.
USS 데이터 타입은 USS 프로퍼티에서 허용되는 값과 키워드를 정의합니다.
| Property | Description | |
|---|---|---|
<length> |
Represents a distance value. | |
<number> |
Represents either an integer or a number with a fractional component. | |
<integer> |
Represents a whole number. | |
<color> |
Represents a color. You can define a color with a #hexadecimal code, the rgb() or rgba() function, or a color keyword (for example, blue or transparent). |
|
<resource> |
Represents an asset in a Resources folder. | |
<url> |
Represents an asset specified by a path. You can express it as either a relative path or an absolute path. | |
<length>{1,4} |
Represents one to four options for properties that are sharthand for -top-, -bottom-, -left-, and -right- properties, such as padding-top, or border-top-width. |
|
| 1 length | Applies to all four properties. | |
| 2 lengths | The first applies to -top- and -bottom-. The second applies to -left- and -right-. |
|
| 3 lengths | The first applies to -top-. The second applies to -left and -right-. The third is applied to -bottom-. |
|
| 4 lengths | Applies in this order : -top-, -right, -bottom-, -left-
|
|
UI 툴킷은 길이 측정 단위로 픽셀(px)과 백분율(%)을 지원합니다. 픽셀 값은 절대적이지만, 백분율은 대개 요소의 부모에 대해 상대적입니다.
예제:
width:200px; 200픽셀의 너비를 표현합니다.width:50%; 부모 요소 너비의 절반을 표현합니다.측정 단위를 지정하는 것이 중요합니다. 측정 단위를 지정하지 않으면 UI 툴킷은 프로퍼티 값이 픽셀 단위로 표시된다고 가정합니다.
참고: 0은 측정 단위가 필요하지 않은 특수 값입니다.
숫자 값은 부동 소수점 또는 정수 리터럴로 표시됩니다(예: flex:1.0).
특정한 키워드는 일부 빌트인 프로퍼티에서 지원됩니다 .키워드는 숫자가 아니라 설명적인 이름을 제공합니다(예: position:absolute). 모든 프로퍼티는 프로퍼티를 기본값으로 재설정하는 initial 전역 키워드를 지원합니다. 키워드 리스트는 USS 프로퍼티를 참조하십시오.
UI 툴킷은 다음의 리터럴 컬러 값 및 함수를 지원합니다.
#FFFF00 (채널당 rgba 1바이트), #0F0 (rgb)rgb(255, 255, 0)
rgba(255, 255, 0, 1.0)
blue, transparent
USS 파일에서 폰트 및 텍스처와 같은 프로젝트 에셋을 참조할 수 있습니다. 예를 들어 텍스처를 참조하여 요소의 배경 이미지로 사용할 수 있습니다.
에셋을 참조하려면 url() 함수 또는 resource() 함수를 사용하십시오. 참조된 에셋은 스타일시트가 임포트될 때 확인됩니다.
예를 들어 아래 스타일 선언은 resource() 함수를 사용하여 Images 디렉토리의 img.png라는 텍스처 에셋을 참조하고 이를 배경 이미지로 지정합니다.
`background-image: resource("Images/img.png");
Unity는 대부분의 경우 url() 함수를 사용할 것을 권장합니다. 하지만 resource() 함수는 화면 밀도에 따라 다른 버전의 이미지 에셋을 자동으로 로드하도록 지원합니다.
url() 함수를 사용하여 에셋을 참조할 때 지정하는 경로는 상대 경로 또는 절대 경로일 수 있습니다.
경로는 파일 확장자를 포함해야 합니다.
예를 들어 모든 스타일시트가 포함된 USS 폴더와 모든 이미지 에셋이 포함된 Resources 폴더가 프로젝트에 있다고 가정해보겠습니다.
Assets
└─ Editor
└─ Resources
└─ USS
thumb.png라는 이미지를 참조하기 위해 다음 경로 중 하나를 사용할 수 있습니다.
| 상대 경로 | 절대 경로 |
|---|---|
url("../Resources/thumb.png") |
url("/Assets/Editor/Resources/thumb.png")url("project:/Assets/Editor/Resources/thumb.png") url("project:///Assets/Editor/Resources/thumb.png")
|
resource() 함수는 Unity의 리소스 폴더(Resources 및 Editor Default Resources)에 있는 에셋을 참조할 수 있습니다. 에셋은 이름별로 참조합니다.
Editor Default Resources Resources 폴더에 있는 경우 파일 확장자를 포함해야 합니다.Resources 폴더에 있는 경우 파일 확장자를 포함하지 않아야 합니다.예제:
| 파일 경로 | 레퍼런스 구문 |
|---|---|
Assets/Resources/Images/my-image.png |
resource("Images/my-image") |
Assets/Editor Default Resources/Images/my-image.png |
resource("Images/default-image.png") |
화면 밀도(DPI)가 다른 화면을 지원해야 하는 경우 resource() 함수를 사용하면 올바른 버전의 텍스처 에셋을 자동으로 로드할 수 있습니다.
다음을 수행해야 합니다.
@2x 접미사가 있는지 확인합니다. 예를 들어 myimage.png의 높은 DPI 버전은 myimage@2x.png여야 합니다.Unity는 에셋을 로드할 때 현재 화면 DPI에 대한 올바른 버전을 자동으로 선택합니다.
예를 들어 USS에서 resource("myimage")를 사용하는 경우 Unity는 Resources/myimage.png 또는 Resources/myimage@2x.png를 로드합니다.
큰따옴표를 사용하여 문자열 값을 지정하십시오. 예: --my-property: "foo"