다음 표에는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 툴킷의 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 |
아니오 | 이산 | 요소의 상자에 색칠하는 배경 이미지입니다. | ||||
background-position |
아니오 | 완전 애니메이션화 가능 | 배경 이미지 위치 값입니다. | ||||
background-position-x |
아니오 | 이산 | 배경 이미지 x 위치 값입니다. | ||||
background-position-y |
아니오 | 이산 | 배경 이미지 y 위치 값입니다. | ||||
background-repeat |
아니오 | 이산 | 배경 이미지 반복 값입니다. | ||||
background-size |
아니오 | 완전 애니메이션화 가능 | 배경 이미지 크기 값입니다. | ||||
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-editor-text-rendering-mode |
예 | 애니메이션화 불가능 | TextElement 에디터 렌더링 모드입니다. | ||||
-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-generator |
예 | 애니메이션화 불가능 | Unity의 표준 텍스트 생성기와 고급 텍스트 생성기 간을 전환합니다. | ||||
-unity-text-outline |
아니오 | 완전 애니메이션화 가능 | 텍스트의 윤곽선 폭과 컬러입니다. | ||||
-unity-text-outline-color |
예 | 완전 애니메이션화 가능 | 텍스트의 윤곽선 컬러입니다. | ||||
-unity-text-outline-width |
예 | 완전 애니메이션화 가능 | 텍스트의 윤곽선 너비입니다. | ||||
-unity-text-overflow-position |
아니오 | 이산 | 요소의 텍스트 오버플로 위치입니다. | visibility |
예 | 이산 | 요소를 표시할지 여부를 지정합니다. |
white-space |
예 | 이산 | 요소의 텍스트를 그릴 공간이 충분하지 않은 경우 여러 라인에 걸쳐 단어 줄바꿈을 사용합니다. | ||||
width |
아니오 | 완전 애니메이션화 가능 | 레이아웃을 위한 요소의 고정된 폭입니다. | ||||
word-spacing |
예 | 완전 애니메이션화 가능 | 단어 간의 공간을 늘리거나 줄입니다. |