USS 지원 프로퍼티

여기에는 지원되는 USS 프로퍼티와 허용되는 값이 나와 있습니다.

USS 데이터 타입

USS 데이터 타입은 USS 프로퍼티에서 허용되는 값과 키워드를 정의합니다.

프로퍼티	설명
<length>	거리 값을 나타냅니다.
<number>	분수 컴포넌트가 포함된 숫자 또는 정수를 나타냅니다.
<integer>	정수를 나타냅니다.
<color>	컬러를 나타냅니다. #hexadecimal 코드, rgb() 또는 rgba() 함수, 컬러 키워드(예: blue 또는 transparent)를 사용하여 컬러를 정의할 수 있습니다.
<resource>	Resources 폴더의 에셋을 나타냅니다.
<url>	경로에 지정된 에셋을 나타내며, 상대 경로 또는 절대 경로로 표시될 수 있습니다.

USS 구문

UI 툴킷 스타일 프로퍼티는 W3C CSS 문서와 동일한 문법 구문을 사용합니다.

• 키워드 값은 있는 그대로 표시됩니다. 예: auto, baseline
• 기본 데이터 타입은 꺾쇠 괄호( < 및 >) 안에 표시됩니다. 예: <length>, <color>
• 프로퍼티와 동일한 이름을 공유하는 비터미널은 꺾쇠 괄호와 작은따옴표 사이(<' 및 '>)에 표시됩니다. 예: <'width'>

프로퍼티 값에 두 개 이상의 컴포넌트가 있는 경우:

• 나란히 놓인 단어들은 모두 정해진 순서로 발생해야 함을 의미합니다.
• A bar (|) separates two or more alternatives: exactly one must occur.
• A double bar (||) 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");
}

다음의 프로퍼티가 상속됩니다.

• color
• font-size
• -unity-font
• -unity-font-style
• -unity-text-align
• visibility
• whitespace

박스 모델

크기

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 순서로 길이가 적용됩니다.

플렉스 레이아웃

이 섹션에는 시각적 요소를 배치하기 위한 프로퍼티가 나와 있습니다. UI 툴킷에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 들어 있습니다. 레이아웃 엔진은 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 ]

---

• 2019–05–23 페이지 수정됨