USS 커스텀 프로퍼티(변수)

스타일시트 작성

빌트인 Unity 변수

Unity의 빌트인 스타일시트는 에디터와 런타임 UI의 기본값을 지정하는 USS 변수를 정의합니다. 자체 스타일시트에서 이러한 변수를 사용하여 커스텀 인터페이스가 Unity 스타일과 매칭되는지 확인할 수 있습니다.

특정 변수에 대한 자세한 내용은 빌트인 Unity 변수 리스트를 참조하십시오.

Unity 변수 이름

Unity는 빌트인 변수에 특정 명명 규칙을 사용하여 변수를 사용하는 방법과 위치를 나타냅니다. 변수 이름은 하이픈으로 구분된 하나 이상의 부분으로 구성되고, 각 부분은 밑줄로 구분된 하나 이상의 단어로 구성됩니다.

--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

이름의 각 부분은 변수를 사용하는 USS 규칙의 타입에 대해 알려줍니다.

그룹: 변수가 나타내는 데이터의 종류.
역할/컨트롤: 변수가 영향을 미치는 요소에 대한 개념적 그룹화.
하위 요소: 변수가 영향을 미치는 요소 또는 컨트롤의 부분.
유사 상태: Unity가 변수를 사용하는 상태 나열.

다음의 변수 이름을 예로 들 수 있습니다.

--unity-colors-button-text-hover

이 변수 이름은 Unity가 변수를 사용하는 방법에 대한 다음의 정보를 제공합니다.

	Value:	의미:
그룹	`colors`	변수가 컬러 데이터를 나타냅니다.
역할/컨트롤	`button`	변수가 버튼에 영향을 줍니다.
하위 요소	`text`	변수가 텍스트에 영향을 줍니다. `group`이 `colors`이므로 텍스트 컬러에 영향을 미칩니다.
유사 상태	`hover`	Unity는 마우스 포인터가 요소 위에 있을 때 요소에 적용되는 스타일에 변수를 사용합니다.

즉 Unity는 사용자가 버튼 위에 포인터를 올려 놓을 때 버튼 텍스트의 컬러를 변경하는 스타일에 이 변수를 사용합니다.

이 섹션의 나머지 부분에서는 변수 이름 포맷의 각 부분에 대한 상세 정보를 제공합니다.

그룹

그룹은 변수가 나타내는 데이터의 종류를 지정합니다. 각 그룹에는 여러 개의 가능 하위 요소가 있습니다.

Unity 변수 이름은 다음의 그룹을 포함할 수 있습니다.

그룹:	사용 대상:
`colors`	`background-color`, `border-color` 등과 같은 컬러 프로퍼티
`metrics`	크기와 모양을 제어하는 프로퍼티. 예: `border-radius`, `border-width`, `margin`, `padding`
`icons`	일반 Unity 아이콘 이미지

역할과 컨트롤

역할과 컨트롤은 요소를 개념적으로 그룹화하는 두 가지 방법입니다.

역할은 각 요소의 타입에 관계없이 목적이 동일한 요소 그룹을 나타냅니다. 예를 들어 error 역할에는 사용자에게 오류 메시지를 표시하는 것과 관련된 모든 요소가 포함됩니다.
컨트롤은 기능에 관계없이 타입이 동일한 요소 그룹을 나타냅니다. 예를 들어 buttons에는 에디터의 모든 버튼이 포함됩니다.

모든 Unity 변수에는 역할 또는 제어 중 하나만 포함되어 있습니다.

Unity 변수 이름은 다음의 역할 및 컨트롤을 포함할 수 있습니다.

역할:

역할:	설명:
`default`	텍스트 컬러, 배경, 여백 등과 같은 기본 스타일 설정.
`alternated_rows`	번갈아 나오는 행 컬러의 표 데이터를 표시하는 요소. 예: 리스트 뷰의 리스트 항목.
`error`	사용자에게 오류 상태를 전달하는 요소.
`highlight`	강조 표시된 UI 부분. 예: 텍스트 선택 항목, 또는 트리 뷰의 선택된 항목.
`link`	클릭 가능한 링크인 UI(일반적으로 텍스트)의 일부. 클릭되지 않은 상태입니다.
`play_mode`	에디터가 플레이 모드일 때 표시되는 요소.
`visited_link`	클릭 가능한 링크인 UI(일반적으로 텍스트)의 일부. 사용자가 이미 클릭한 상태입니다.
`warning`	사용자에게 경고 메시지를 전달하는 요소.

컨트롤:

컨트롤:	설명:
`app_toolbar`	메인 Unity 툴바
`app_toolbar_button`	메인 Unity 툴바의 버튼
`box`	에디터 UI에서 요소를 그룹화하는 데 사용되는 상자
`button`	UI의 버튼(툴바 제외)
`dropdown`	드롭다운 리스트 또는 메뉴
`helpbox`	도움말 정보를 표시하는 데 사용되는 상자
`input_field`	텍스트 또는 숫자 값을 입력하는 데 사용되는 필드
`label`	에디터 UI의 텍스트 레이블
`object_field`	오브젝트 값에 사용되는 필드. 예: 게임 오브젝트 또는 에셋의 프로퍼티 값.
`popup`	팝업 메뉴 및 기타 팝업 컨트롤
`preview`	미리보기를 표시하는 데 사용되는 뷰. 예: 메시, 텍스처 등과 같은 에셋.
`scrollbar_groove`	사용자가 스크롤바 썸을 드래그하는 스크롤바의 배경 요소
`scrollbar_thumb`	스크롤바의 드래그 가능한 핸들 요소
`slider_groove`	사용자가 슬라이더 썸을 드래그하는 슬라이더의 배경 요소
`slider_thumb`	슬라이더의 드래그 가능한 핸들 요소
`slider_thumb_halo`	사용자가 드래그할 때 슬라이더 썸 주위에 표시되는 오버레이
`tab`	탭 컨트롤의 탭 항목
`toolbar`	메인 Unity 툴바(`app_toolbar`)를 제외한 모든 에디터 툴바
`toolbar_button`	에디터 툴바의 버튼
`window`	에디터 창

하위 요소

하위 요소는 변수가 영향을 미치는 요소의 일부입니다. 하위 요소는 변수의 group과 변수가 나타내는 데이터의 종류를 정확하게 알려줍니다.

예를 들어 colors 그룹과 text 하위 요소가 있는 이름이 표시되면 Unity가 텍스트 컬러에 영향을 미치는 스타일에 변수를 사용한다는 의미입니다.

Unity 변수 이름은 다음의 하위 요소를 포함할 수 있습니다.

그룹:	하위 요소:	설명:
`colors`
	`background`	요소의 배경 컬러
	`border`	요소의 바깥쪽 테두리 컬러
	`border_accent`	요소의 안쪽 테두리 컬러. 예: 인스펙터 창에 있는 투톤 테두리
	`text`	텍스트를 표시하는 요소의 텍스트 컬러
`metrics`
	`margin_{left, top, right, bottom}`	요소의 여백 값
	`padding_{left, top, right, bottom}`	요소의 패딩 값
	`border_{left, top, right, bottom}_width`	요소의 테두리 너비 값
	`border_{left_top, left_bottom, right_top, right_bottom}_radius`	요소의 테두리 반지름 값
	`width, height`	요소의 너비 및 높이 값

유사 상태

유사 상태 시퀀스는 Unity가 변수를 사용하는 UI 상태의 리스트입니다.

예를 들어 ’hover 유사 상태의 변수 이름이 표시되면 Unity가 사용자가 요소 위에 포인터를 올려 놓을 때 요소에 영향을 미치는 스타일에 변수를 사용한다는 의미입니다.

예: --unity-colors-toolbar_button-text-hover.

변수 이름은 두 개 이상의 유사 상태를 가질 수 있습니다. 여러 개의 유사 상태는 밑줄(_)로 구분된 알파벳순으로 표시됩니다.

예: --unity-colors-toolbar_button-text-focus_selected.

Unity 변수 이름은 다음의 유사 상태 조합을 가질 수 있습니다.

유사 상태:	설명:
(없음)	일반 상태
`checked`	체크박스 타입의 컨트롤이 선택됨
`disabled`	컨트롤이 비활성화됨
`focus`	컨트롤에 포커스가 있음
`hover`	사용자가 컨트롤에 마우스 포인터를 올려 놓음
`inactive`	컨트롤에 포커스가 없음
`pressed`	컨트롤을 누름
`selected`	컨트롤을 선택함