여기에는 지원되는 USS 프로퍼티와 허용되는 값이 나와 있습니다.
USS 데이터 타입은 USS 프로퍼티에서 허용되는 값과 키워드를 정의합니다.
프로퍼티 | 설명 |
---|---|
<length> |
거리 값을 나타냅니다. |
<number> |
분수 컴포넌트가 포함된 숫자 또는 정수를 나타냅니다. |
<integer> |
정수를 나타냅니다. |
<color> |
컬러를 나타냅니다. #hexadecimal 코드, rgb() 또는 rgba() 함수, 컬러 키워드(예: blue 또는 transparent )를 사용하여 컬러를 정의할 수 있습니다. |
<resource> |
Resources 폴더의 에셋을 나타냅니다. |
<url> |
경로에 지정된 에셋을 나타내며, 상대 경로 또는 절대 경로로 표시될 수 있습니다. |
UIElements 스타일 프로퍼티는 W3C CSS 문서와 동일한 문법 구문을 사용합니다.
auto
, baseline
<
및 >
) 안에 표시됩니다. 예: <length>
, <color>
<'
및 '>
)에 표시됩니다. 예: <'width'>
프로퍼티 값에 두 개 이상의 컴포넌트가 있는 경우:
|
) separates two or more alternatives: exactly one must occur.||
) separates two or more options: one or more must occur, in any order.&&
)는 두 개 이상의 컴포넌트를 구분하며, 모두 어느 순서로든 발생해야 합니다.[
]
)는 그룹화를 의미합니다.모든 타입, 키워드 또는 꺾쇠 괄호로 구분된 그룹은 뒤에 수정자가 올 수 있습니다.
*
)는 이전 타입, 단어 또는 그룹이 영 번 이상 발생함을 의미합니다.+
)는 이전 타입, 단어 또는 그룹이 한 번 이상 발생함을 의미합니다.?
)는 이전 타입, 단어 또는 그룹이 선택사항임을 의미합니다.{A,B}
)로 묶인 숫자 쌍은 이전 타입, 단어 또는 그룹이 최소 A
회, 최대 B
회 발생함을 의미합니다.상속된 프로퍼티에 대해 아무 값도 지정되지 않으면 요소는 해당 부모에서 값을 가져옵니다. 예를 들어 상속된 프로퍼티를 사용하여 모든 요소의 폰트를 설정할 수 있습니다.
css
:root {
-unity-font: resource("Font/consola.ttf");
}
다음의 프로퍼티가 상속됩니다.
width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none
width
와 height
는 요소의 크기를 지정합니다. width
가 지정되지 않으면 너비가 요소 콘텐츠의 너비를 따릅니다. height
가 지정되지 않으면 높이는 요소 콘텐츠의 높이를 따릅니다.
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
margin: [<length> | auto]{1,4}
margin
짧은 표기 옵션은 다음과 같이 적용됩니다.
옵션 | 설명 |
---|---|
1개 길이 | 네 개의 마진 모두에 적용됩니다. |
2개 길이 | 첫 번째 길이는 margin-top 과 margin-bottom 에 적용됩니다. 두 번째 길이는 margin-left 와 margin-right 에 적용됩니다. |
3개 길이 | 첫 번째 길이는 margin-top 에 적용됩니다. 두 번째 길이는 margin-left 와 margin-right 에 적용됩니다. 세 번째 길이는 margin-bottom 에 적용됩니다. |
4개 길이 |
margin-top , margin-right , margin-bottom , margin-left 순서로 길이가 적용됩니다. |
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
border-width: <length>{1,4}
border-width
짧은 표기 옵션은 다음과 같이 적용됩니다.
옵션 | 설명 |
---|---|
1개 길이 | 4개 테두리 너비 모두에 적용됩니다. |
2개 길이 | 첫 번째 길이는 border-top-width 와 border-bottom-width 에 적용됩니다. 두 번째 길이는 border-left-width 와 border-right-width 에 적용됩니다. |
3개 길이 | 첫 번째 길이는 border-top-width 에 적용됩니다. 두 번째 길이는 border-left-width 와 border-right-width 에 적용됩니다. 세 번째 길이는 border-bottom-width 에 적용됩니다. |
4개 길이 |
border-top-width , border-right-width , border-bottom-width , border-left-width 순서대로 길이가 적용됩니다. |
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
padding: <length>{1,4}
padding
짧은 표기 옵션은 다음과 같이 적용됩니다.
옵션 | 설명 |
---|---|
1개 길이 | 네 개의 패딩 모두에 적용됩니다. |
2개 길이 | 첫 번째 길이는 padding-top 과 padding-bottom 에 적용됩니다. 두 번째 길이는padding-left 와 padding-right 에 적용됩니다. |
3개 길이 | 첫 번째 길이는 padding-top 에 적용됩니다. 두 번째 길이는 padding-left 와 padding-right 에 적용됩니다. 세 번째 길이는 padding-bottom 에 적용됩니다. |
4개 길이 |
padding-top , padding-right , padding-bottom , padding-left 순서로 길이가 적용됩니다. |
이 섹션에는 시각적 요소를 배치하기 위한 프로퍼티가 나와 있습니다. UIElements에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 들어 있습니다. 레이아웃 엔진은 Flexbox의 하위 집합인 HTML/CSS 레이아웃 시스템을 구현합니다.
기본적으로 모든 항목은 컨테이너에서 수직으로 배치됩니다.
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length> | auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | stretch
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
align-items: flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
position: absolute | relative
이 프로퍼티는 기본적으로 relative
로 설정됩니다. 즉, 요소의 위치가 부모에 기반하여 지정됩니다. 이 프로퍼티가 absolute
로 설정되면 요소가 부모 레이아웃을 떠나고 값은 부모 바운드에 기반하여 지정됩니다.
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto
부모 모서리 또는 요소의 원본 포지션에서의 거리입니다.
그리기 프로퍼티는 시각적 요소의 배경과 테두리, 형상을 설정합니다.
background-color: <color>
background-image: <resource> | <url> | none
-unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit
-unity-background-image-tint-color: <color>
배경 이미지를 할당할 때 간소화된 9슬라이스 사양에 따라 그릴 수 있습니다.
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
border-color: <color>
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
border-radius: <length>{1,4}
border-radius
짧은 표기 옵션은 다음과 같이 적용됩니다.
옵션 | 설명 |
---|---|
1개 길이 | border-radius 프로퍼티 모두에 적용됩니다. |
2개 길이 | 첫 번째 길이는 border-top-left-radius 와 border-bottom-right-radius 에 적용됩니다. 두 번째 길이는 border-bottom-left-radius 와 border-top-right-radius 에 적용됩니다. |
3개 길이 | 첫 번째 길이는 border-top-left-radius 에 적용됩니다. 두 번째 길이는 border-bottom-left-radius 와 border-top-right-radius 에 적용됩니다. 세 번째 길이는 border-bottom-right-radius 에 적용됩니다. |
4개 길이 |
border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius 순서대로 길이가 적용됩니다. |
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
opacity: <number>
visibility: visible | hidden
display: flex | none
display
기본값은 flex
입니다. display
를 none
으로 설정하면 요소가 제거됩니다. visibility
를 hidden
으로 설정하면 요소가 숨김 처리되어도 레이아웃의 공간을 계속 차지합니다.
-unity-overflow-clip-box
는 요소 콘텐츠의 클리핑 사각형을 정의합니다. 기본값은 padding-box
, 즉 패딩 영역 바깥쪽 사각형(위 상자 모델 이미지의 녹색 사각형)입니다. content-box
는 패딩 영역(위 상자 모델 이미지의 파란색 사각형) 내 값을 나타냅니다.
텍스트 프로퍼티는 컬러, 폰트, 폰트 크기, 그리고 폰트 리소스, 폰트 스타일, 단어 줄바꿈, 잘라내기에 대한 Unity 고유 프로퍼티를 설정합니다.
color: <color>
-unity-font: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
-unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right
white-space: normal | nowrap
cursor
기본 텍스처 타입을 사용하여 커서를 위한 커스텀 텍스처를 임포트하십시오.
cursor: [ [ <resource> | <url> ] [ <integer> <integer>]? , ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.