Version: 2021.3
USS properties reference
USS transform

USS properties syntax

This page introduces the common USS properties, their syntax and accepted values, and differences from CSS. For a complete list of USS properties, see USS properties reference.

USS properties use the same grammar syntax as W3C CSS documents:

  • 키워드 값은 있는 그대로 표시됩니다. 예: 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.
  • 이중 앰퍼샌드(&&)는 두 개 이상의 컴포넌트를 구분하며, 모두 어느 순서로든 발생해야 합니다.
  • 대괄호([ ])는 그룹화를 의미합니다.

Every type, keyword, or angle-bracketed group might be followed by modifiers:

  • 별표(*)는 이전 타입, 단어 또는 그룹이 영 번 이상 발생함을 의미합니다.
  • 더하기 기호(+)는 이전 타입, 단어 또는 그룹이 한 번 이상 발생함을 의미합니다.
  • 물음표(?)는 이전 타입, 단어 또는 그룹이 선택사항임을 의미합니다.
  • 중괄호({A,B})로 묶인 숫자 쌍은 이전 타입, 단어 또는 그룹이 최소 A회, 최대 B회 발생함을 의미합니다.

박스 모델

박스 모델
박스 모델

크기

width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none

widthheight는 요소의 크기를 지정합니다. width가 지정되지 않으면 너비가 요소 콘텐츠의 너비를 따릅니다. height가 지정되지 않으면 높이는 요소 콘텐츠의 높이를 따릅니다.

마진

margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
/* Shorthand */
margin: [<length> | auto]{1,4}

테두리

border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
/* Shorthand */
border-width: <length>{1,4}

패딩

padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
/* Shorthand */
padding: <length>{1,4}

Differences from CSS

The alternative box model that USS uses is different from the standard CSS box model. In the standard CSS box model, width and height define the size of the content box. An element’s rendered size is the sum of its padding, border-width, and width / height values.

Unity의 모델은 CSS box-sizing 프로퍼티를 border-box로 설정하는 것과 같습니다. 자세한 내용은 MDN 문서를 참조하십시오.

플렉스 레이아웃

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine implements a subset of Flexbox, an HTML/CSS layout system.

기본적으로 모든 항목은 컨테이너에서 수직으로 배치됩니다.

/* Items */
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

/* Containers */
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

Positioning

/* The default value is `relative` which positions the element based on its parent. 
If sets to `absolute`, the element leaves its parent layout and values are specified based on the parent bounds.*/
position: absolute | relative

/* The distance from the parent edge or the original position of the element. */
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>

Slicing

When assigning a background image, you draw it with respect to a simplified 9-slice specification:

-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
-unity-slice-scale: <length>

Border color

border-color: <color>

Border radius

border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
/* Shorthand */
border-radius: <length>{1,4}

Differences from CSS

Border radius properties work almost the same in USS and CSS. For detailed information about border-radius, see the MDN documentation.

However, there are two main differences:

  • Unity doesn’t support the second-radius shorthand (border-radius: (first radius values) / (second radius values);) used to create elliptical corners.
  • Unity reduces border radius values to half of the element’s size in pixels. For example, for a 100px x 100px element, any border-radius value greater than 50px is reduced to 50px. If you use percentage (%) values for border radius properties, Unity first resolves the percentage to pixels and then reduces the border-radius value to half of the resolved pixel value. If you have different radius values for two or more corners, Unity reduces any values greater than half of the element’s size to half of the element’s size.

Appearance

overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
opacity: <number>
visibility: visible | hidden
display: flex | none

-unity-overflow-clip-box는 요소 콘텐츠의 클리핑 사각형을 정의합니다. 기본값은 padding-box, 즉 패딩 영역 바깥쪽 사각형(위 상자 모델 이미지의 녹색 사각형)입니다. content-box는 패딩 영역(위 상자 모델 이미지의 파란색 사각형) 내 값을 나타냅니다.

The display default value is flex. Setting display to none removes the element. Setting the visibility to hidden hides the element, but the element still occupies space in the layout.

Differences from CSS

USS display 프로퍼티는 CSS display 프로퍼티의 사용 가능한 키워드 값 중 일부만 지원합니다. USS 버전은 Yoga 레이아웃 엔진에서 작동하는 키워드를 지원합니다.

  • Yoga에 대한 자세한 내용은 레이아웃을 참조하십시오. CSS display 프로퍼티에 대한 자세한 내용은 MDN 문서를 참조하십시오.

텍스트 프로퍼티

텍스트 프로퍼티는 컬러, 폰트, 폰트 크기, 그리고 폰트 리소스, 폰트 스타일, 단어 줄바꿈, 잘라내기에 대한 Unity 고유 프로퍼티를 설정합니다.

color: <color>
-unity-font: <resource> | <url>
-unity-font-definition: <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
-unity-text-overflow-position: start | middle | end
white-space: normal | nowrap

-unity-text-outline-width: <length>
-unity-text-outline-color: <color>
/* Shorthand */
-unity-text-outline: <length> | <color>

Note: When setting up font in UI Builder, the Font control in the Inspector sets -unity-font, and the Font Asset control sets -unity-font-definition. Because -unity-font-definition takes precedence over -unity-font, if you want to use a font from the Font list, you must select None from Font Asset. Otherwise, the font you selected won’t take effect.

커서

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 ]

Differences from CSS

CSS에서는 단일 cursor 스타일 선언에서 여러 선택적 커스텀 커서와 필수 키워드를 지정할 수 있습니다. 여러 커서를 지정하면 커서가 폴백 체인을 형성합니다. 브라우저가 첫 번째 커스텀 커서를 로드할 수 없으면, 다른 커서 중 하나가 로드되거나 로드를 시도할 커스텀 커서가 더 이상 없을 때까지 다른 커서를 차례대로 로드하려고 시도합니다. 브라우저가 커스텀 커서를 로드할 수 없으면 키워드를 사용합니다.

USS에서 커스텀 커서와 키워드는 상호 배타적입니다. cursor 스타일 선언은 하나의 커스텀 커서 또는 하나의 키워드만 포함할 수 있습니다.

CSS cursor 프로퍼티에 대한 자세한 내용은 MDN 문서를 참조하십시오.

Opacity

opacity: <number>

Differences from CSS

USS opacity is similar to CSS opacity. The opacity of parent elements affects the perceived opacity of child elements. The perceivability is different between USS opacity and CSS opacity.

In the following USS example, the blue square is a child of the red square. The red square has an opacity of 0.5.

.red {
    background-color: red;
    opacity: 0.5;
}

.blue {
    background-color: blue;
    left: 20px;
    top: 20px;
}

Although the blue square doesn’t have an opacity value, it has a perceived opacity of 0.5 from the red square. You can see the red square through the blue square.

USS opacity example
USS opacity example

In CSS, if you apply the same styles, both the red and blue squares are 50% transparent. However, you can’t see the red square through the blue square, unless you also set the opacity of blue to be less than 1.

CSS opacity example
CSS opacity example

추가 리소스

USS properties reference
USS transform