다음 표에는 UI 툴킷의 USS 프로퍼티가 나열되어 있습니다.
표는 상속된 프로퍼티와 애니메이션화 가능성을 나타냅니다. 상속된 프로퍼티의 경우 요소에 값을 지정하지 않으면 요소는 부모 요소에게서 값을 가져옵니다. 다음은 상속된 프로퍼티를 사용하여 모든 요소에 폰트를 설정하는 예시입니다.
:root {
-unity-font: resource("Font/consola.ttf");
}
프로퍼티 이름을 클릭하면 해당 프로퍼티에 대한 자세한 정보를 확인합니다.
참고: CSS 프로퍼티와 동일한 USS 프로퍼티의 사용법은 Mozilla 개발자 문서로 연결됩니다.
| 프로퍼티 | 상속 | 애니메이션화 가능성 | 설명 |
|---|---|---|---|
align-content |
지원 안 함 | 분리 | 자식이 이 컨테이너에서 여러 줄에 걸쳐 있는 경우 교차 축에 있는 자식의 전체 영역에 대한 얼라인먼트입니다. |
align-items |
지원 안 함 | 분리 | 이 컨테이너의 교차 축에 있는 자식의 얼라인먼트입니다. |
align-self |
지원 안 함 | 분리 | 이 특정 요소에 대해서만 align-items와 유사합니다. |
all |
지원 안 함 | 완전히 애니메이션화 가능 | 초기화 키워드로 모든 프로퍼티를 재설정할 수 있습니다. 커스텀 USS 프로퍼티에는 적용되지 않습니다. |
background-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 상자에 색칠하는 배경 컬러입니다. |
background-image |
지원 안 함 | 분리 | 요소의 상자에 색칠하는 배경 이미지입니다. |
border-bottom-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 하단 경계 컬러입니다. |
border-bottom-left-radius |
지원 안 함 | 완전히 애니메이션화 가능 | 모서리가 둥글게 깎인 사각형이 요소의 상자 안에 드로우될 때 하단 왼쪽 코너 반지름입니다. |
border-bottom-right-radius |
지원 안 함 | 완전히 애니메이션화 가능 | 모서리가 둥글게 깎인 사각형이 요소의 상자 안에 드로우될 때 하단 오른쪽 코너의 반지름입니다. |
border-bottom-width |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 테두리의 하단 가장자리를 위해 남겨둔 공간입니다. |
border-color |
지원 안 함 | 완전히 애니메이션화 가능 | border-top-color, border-right-color, border-bottom-color, border-left-color에 대한 짧은 표기 프로퍼티입니다. |
border-left-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 왼쪽 테두리 컬러입니다. |
border-left-width |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 테두리의 왼쪽 가장자리를 위해 남겨둔 공간입니다. |
border-radius |
지원 안 함 | 완전히 애니메이션화 가능 | border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius에 대한 짧은 표기 프로퍼티입니다. |
border-right-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 오른쪽 테두리 컬러입니다. |
border-right-width |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 테두리의 오른쪽 가장자리를 위해 남겨둔 공간입니다. |
border-top-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 상단 테두리 컬러입니다. |
border-top-left-radius |
지원 안 함 | 완전히 애니메이션화 가능 | 모서리가 둥글게 깎인 사각형이 요소의 상자 안에 드로우될 때 상단 왼쪽 코너의 반지름입니다. |
border-top-right-radius |
지원 안 함 | 완전히 애니메이션화 가능 | 모서리가 둥글게 깎인 사각형이 요소의 상자 안에 드로우될 때 상단 오른쪽 코너의 반지름입니다. |
border-top-width |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 테두리의 상단 가장자리를 위해 남겨둔 공간입니다. |
border-width |
지원 안 함 | 완전히 애니메이션화 가능 | border-top-width, border-right-width, border-bottom-width, border-left-width에 대한 짧은 표기 프로퍼티입니다. |
bottom |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 동안 요소의 상자로부터의 하단 거리입니다. |
color |
지원 | 완전히 애니메이션화 가능 | 요소의 텍스트를 드로우할 때 사용하는 컬러입니다. |
cursor |
지원 안 함 | 애니메이션화 불가 | 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서입니다. |
display |
지원 안 함 | 분리 | 요소가 레이아웃에 표시되는 방법을 정의합니다. |
flex |
지원 안 함 | 완전히 애니메이션화 가능 | flex-grow, flex-shrink, flex-basis에 대한 짧은 표기 프로퍼티입니다. |
flex-basis |
지원 안 함 | 완전히 애니메이션화 가능 | 메인 flex 축의 flex 항목에 대한 초기 메인 크기입니다. 다른 flex 프로퍼티가 결정한 flex 축소나 증가에 따라 최종 레이아웃이 더 작거나 클 수 있습니다. |
flex-direction |
지원 안 함 | 분리 | 컨테이너에서 자식을 배치하는 메인 축 방향입니다. |
flex-grow |
지원 안 함 | 완전히 애니메이션화 가능 | 항목이 동일한 컨테이너 내부에서 나머지 유연한 항목에 비례하여 줄어드는 방법을 지정합니다. |
flex-shrink |
지원 안 함 | 완전히 애니메이션화 가능 | 항목이 동일한 컨테이너 내부에서 나머지 유연한 항목에 비례하여 줄어드는 방법을 지정합니다. |
flex-wrap |
지원 안 함 | 분리 | 컨테이너에서 사용할 수 있는 공간이 충분하지 않은 경우 여러 줄에 걸쳐 자식을 배치하는 프로퍼티입니다. |
font-size |
지원 | 완전히 애니메이션화 가능 | 요소의 텍스트를 드로우하는 폰트 크기입니다. |
height |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃을 위한 요소의 고정된 높이입니다. |
justify-content |
지원 안 함 | 분리 | 이 컨테이너 메인 축에 있는 자식에 대한 정당성입니다. |
left |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 동안 요소의 상자로부터의 왼쪽 거리입니다. |
letter-spacing |
지원 | 완전히 애니메이션화 가능 | 캐릭터 간의 공간을 늘리거나 줄입니다. |
margin |
지원 안 함 | 완전히 애니메이션화 가능 | margin-top, margin-right, margin-bottom, margin-left에 대한 짧은 표기 프로퍼티입니다. |
margin-bottom |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 마진의 하단 가장자리를 위해 남겨둔 공간입니다. |
margin-left |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 마진의 왼쪽 가장자리를 위해 남겨둔 공간입니다. |
margin-right |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 마진의 오른쪽 가장자리를 위해 남겨둔 공간입니다. |
margin-top |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 마진의 상단 가장자리를 위해 남겨둔 공간입니다. |
max-height |
지원 안 함 | 완전히 애니메이션화 가능 | 요소가 유연하거나 해당 크기를 측정할 때 요소에 대한 최대 높이입니다. |
max-width |
지원 안 함 | 완전히 애니메이션화 가능 | 요소가 유연하거나 해당 크기를 측정할 때 요소에 대한 최대 폭입니다. |
min-height |
지원 안 함 | 완전히 애니메이션화 가능 | 요소가 유연하거나 해당 크기를 측정할 때 요소에 대한 최소 높이입니다. |
min-width |
지원 안 함 | 완전히 애니메이션화 가능 | 요소가 유연하거나 해당 크기를 측정할 때 요소에 대한 최소 폭입니다. |
opacity |
지원 안 함 | 완전히 애니메이션화 가능 | 요소와 해당 자식의 투명도를 지정합니다. |
overflow |
지원 안 함 | 분리 | 콘텐츠가 자체 상자에서 오버플로하는 경우 컨테이너가 동작하는 방법입니다. |
padding |
지원 안 함 | 완전히 애니메이션화 가능 | padding-top, padding-right, padding-bottom, padding-left에 대한 짧은 표기 프로퍼티입니다. |
padding-bottom |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 패딩 하단 가장자리를 위해 남겨둔 공간입니다. |
padding-left |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 패딩 왼쪽 가장자리를 위해 남겨둔 공간입니다. |
padding-right |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 패딩 오른쪽 가장자리를 위해 남겨둔 공간입니다. |
padding-top |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 단계에서 패딩 상단 가장자리를 위해 남겨둔 공간입니다. |
position |
지원 안 함 | 분리 | 해당 부모 컨테이너의 요소 위치 지정입니다. |
right |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 동안 요소 상자로부터의 오른쪽 거리입니다. |
rotate |
지원 안 함 | 완전히 애니메이션화 가능 | 회전 변형 프로퍼티입니다. |
scale |
지원 안 함 | 완전히 애니메이션화 가능 | 확대/축소 변형 프로퍼티입니다. |
text-overflow |
지원 안 함 | 분리 | 요소의 텍스트 오버플로 모드입니다. |
text-shadow |
지원 | 완전히 애니메이션화 가능 | 텍스트의 드롭 섀도우입니다. |
top |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃 동안 요소 상자로부터의 상단 거리입니다. |
transform-origin |
지원 안 함 | 완전히 애니메이션화 가능 | 변형 원점은 주변에 변형이 적용되는 지점입니다. |
transition |
지원 안 함 | 애니메이션화 불가 | transition-delay, transition-duration, transition-property, transition-timing-function에 대한 짧은 표기 프로퍼티입니다. |
transition-delay |
지원 안 함 | 애니메이션화 불가 | 해당 값이 변경될 때 프로퍼티 전환 효과를 시작하기 전에 대기하는 기간입니다. |
transition-duration |
지원 안 함 | 애니메이션화 불가 | 전환 애니메이션이 완료되는 데 걸리는 시간입니다. |
transition-property |
지원 안 함 | 애니메이션화 불가 | 전환 효과가 적용되어야 하는 프로퍼티입니다. |
transition-timing-function |
지원 안 함 | 애니메이션화 불가 | 전환 효과로 수정된 프로퍼티에 대해 중간 값이 계산되는 방법을 결정합니다. |
translate |
지원 안 함 | 완전히 애니메이션화 가능 | 이동 변형 프로퍼티입니다. |
-unity-background-image-tint-color |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 이미지에 대해 틴트 컬러를 지정합니다. |
-unity-background-scale-mode |
지원 안 함 | 분리 | 요소의 상자에서 확대/축소하는 배경 이미지입니다. |
-unity-font |
지원 | 분리 | 요소의 텍스트를 드로우하는 폰트이며 Font 오브젝트로 정의됩니다. |
-unity-font-definition |
지원 | 분리 | 요소의 텍스트를 드로우하는 폰트이며 FontDefinition 구조체로 정의됩니다. -Unity-font에 대해 우선권을 갖습니다. |
-unity-font-style |
지원 | 분리 | 요소의 텍스트를 드로우하는 폰트 스타일과 가중치(노멀, 볼드체, 이탤릭체)입니다. |
-unity-overflow-clip-box |
지원 안 함 | 분리 | 요소 콘텐츠가 잘리는 상자를 지정합니다. |
-unity-paragraph-spacing |
지원 | 완전히 애니메이션화 가능 | 문단 간의 공간을 늘리거나 줄입니다. |
-unity-slice-bottom |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 이미지를 색칠할 때 9 슬라이스의 하단 가장자리 크기입니다. |
-unity-slice-left |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 이미지를 색칠할 때 9 슬라이스의 왼쪽 가장자리 크기입니다. |
-unity-slice-right |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 이미지를 색칠할 때 9 슬라이스의 오른쪽 가장자리 크기입니다. |
-unity-slice-scale |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 슬라이스에 적용되는 스케일입니다. |
-unity-slice-top |
지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 이미지를 색칠할 때 9 슬라이스의 상단 가장자리 크기입니다. |
-unity-text-align |
지원 | 분리 | 요소의 상자에서 수평 및 수직 텍스트 얼라인먼트입니다. |
-unity-text-outline |
지원 안 함 | 완전히 애니메이션화 가능 | 텍스트의 윤곽선 폭과 컬러입니다. |
-unity-text-outline-color |
지원 | 완전히 애니메이션화 가능 | 텍스트의 윤곽선 컬러입니다. |
-unity-text-outline-width |
지원 | 완전히 애니메이션화 가능 | 텍스트의 윤곽선 폭입니다. |
-unity-text-overflow-position |
지원 안 함 | 분리 | 요소의 텍스트 오버플로 포지션입니다. |
visibility |
지원 | 분리 | 요소를 표시할지 여부를 지정합니다. |
white-space |
지원 | 분리 | 요소의 텍스트를 드로우하기에 사용할 수 있는 공간이 충분하지 않은 경우 여러 줄에 걸쳐 단어를 래핑합니다. |
width |
지원 안 함 | 완전히 애니메이션화 가능 | 레이아웃을 위한 요소의 고정된 폭입니다. |
word-spacing |
지원 | 완전히 애니메이션화 가능 | 단어 간의 공간을 늘리거나 줄입니다. |