USS 공통 프로퍼티
이 페이지에서는 가장 일반적인 USS 프로퍼티, 해당 구문 및 허용되는 값, CSS와의 차이점을 설명합니다. USS 프로퍼티의 전체 목록은 USS 프로퍼티 레퍼런스를 참조하십시오.
박스 모델
크기
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
/* 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}
CSS와의 차이점
USS가 사용하는 대체 박스 모델은 표준 CSS 박스 모델과 다릅니다. 표준 CSS 박스 모델에서 width 및 height는 콘텐츠 박스의 크기를 정의합니다. 요소의 렌더링 크기는 해당 padding, border-width 및 width/height 값의 합입니다.
Unity의 모델은 CSS box-sizing 프로퍼티를 border-box로 설정하는 것과 동일합니다. 자세한 내용은 MDN 기술 자료를 참조하십시오.
플렉스 레이아웃
UI 툴킷에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 HTML/CSS 레이아웃 시스템인 Flexbox의 하위 집합을 구현합니다.
기본적으로 모든 항목은 컨테이너에서 수직으로 배치됩니다.
/* 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
/* The default value is `stretch`.
`auto` sets `align-items` to `flex-end`. */
align-items: auto | flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
위치 지정
/* 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>
배경 이미지 설정에 대한 자세한 내용은 배경 이미지 설정을 참조하십시오.
슬라이싱
배경 이미지를 할당할 때 간소화된 9슬라이스 사양에 따라 그립니다.
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
-unity-slice-scale: <length>
참고: 스프라이트의 경우 Unity는 패널의 reference sprite pixels per unit value를 기준으로 하여 스프라이트의 pixels-per-unit 값으로 -unity-slice-scale을 조정합니다. 기본값은 100입니다. 예를 들어 스프라이트의 pixels-per-unit이 16이면 스케일은 16/100 = 0.16으로 조정됩니다. 따라서 스케일을 2px로 설정하면 최종 스케일은 2px * 0.16px = 0.32px입니다. 텍스처 및 벡터 이미지의 경우 Unity는 설정한 슬라이스 스케일 값을 추가로 조정하지 않습니다.
9 슬라이스에 대한 자세한 내용은 UI 툴킷을 사용한 9 슬라이스 이미지를 참조하십시오.
테두리 컬러
border-color: <color>
테두리 반지름
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}
CSS와의 차이점
테두리 반지름 프로퍼티는 USS와 CSS에서 거의 동일하게 작동합니다. border-radius에 대한 자세한 내용은 MDN 기술 자료를 참조하십시오.
하지만 두 가지 큰 차이점이 있습니다.
- Unity는 타원형 모서리를 만드는 데 사용되는 second-radius 짧은 표기(
border-radius: (first radius values) / (second radius values);)를 지원하지 않습니다. - Unity는 테두리 반지름 값을 요소 크기(픽셀 단위)의 절반으로 줄입니다. 예를 들어 100px x 100px 요소의 경우 50px보다 큰
border-radius값은 50px로 줄어듭니다. 테두리 반지름 프로퍼티에 백분율(%) 값을 사용하는 경우 Unity는 먼저 백분율을 픽셀로 확인한 후border-radius값을 확인된 픽셀 값의 절반으로 줄입니다. 두 개 이상의 모서리에 대해 다른 반지름 값이 있는 경우 Unity는 요소 크기의 절반보다 큰 값을 요소 크기의 절반으로 줄입니다.
형상
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
visibility: visible | hidden
display: flex | none
-unity-overflow-clip-box는 요소 콘텐츠의 클리핑 직사각형을 정의합니다. 기본값은 padding-box, 즉 패딩 영역 바깥쪽 직사각형(위 상자 모델 이미지의 녹색 직사각형)입니다. content-box는 패딩 영역(위 상자 모델 이미지의 파란색 직사각형) 내 값을 나타냅니다.
display 기본값은 flex입니다. display를 none으로 설정하여 UI에서 요소를 제거합니다. 요소를 숨기려면 visibility를 hidden으로 설정할 수 있지만, 요소가 레이아웃에서 여전히 공간을 차지합니다.
overflow 프로퍼티는 요소 콘텐츠의 클리핑을 제어합니다. 기본값은 visible이며, 즉 요소의 콘텐츠가 요소의 경계까지 클리핑되지 않습니다. overflow를 hidden으로 설정하면 요소의 콘텐츠가 요소의 경계까지 클리핑됩니다. overflow를 사용하여 마스킹 효과를 만들 수 있습니다.
CSS와의 차이점
USS display 프로퍼티는 CSS display 프로퍼티의 사용 가능한 키워드 값 중 일부만 지원합니다. USS 버전은 Yoga 레이아웃 엔진에서 작동하는 키워드를 지원합니다.
- 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>
-unity-text-generator: standard | advanced
/* The text overflow mode. */
/* clip: Trims any text that extends beyond the boudaries of its container. */
/* ellipsis: Truncates any text that extends beyong the boudaries of its container with an ellipsis. */
text-overflow: clip | ellipsis
text-shadow-offset-x: <length>
text-shadow-offset-y: <length>
text-shadow-color: <color>
text-shadow-blur-radius: <length>
/* Shorthand */
text-shadow: <x-offset> <y-offset> <blur-radius> <color>;
letter-spacing: <length>
word-spacing: <length>
-unity-paragraph-spacing: <length>
참고: UI 빌더에서 폰트를 설정하면 인스펙터의 Font 컨트롤이 -unity-font를 설정하고, Font Asset 컨트롤이 -unity-font-definition을 설정합니다. -unity-font-definition이 -unity-font보다 우선되므로 Font 목록에서 폰트를 사용하려면 Font Asset에서 None을 선택합니다. 그렇지 않으면 선택한 폰트가 적용되지 않습니다.
텍스트 그림자 및 텍스트 아웃라인에 대한 자세한 내용은 텍스트 효과를 참조하십시오.
커서
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 ]
참고: 커서 키워드는 에디터 UI에서만 사용할 수 있습니다. 커서 키워드는 런타임 UI에서 작동하지 않습니다. 런타임 UI에서는 커스텀 커서에 텍스처를 사용해야 합니다.
CSS와의 차이점
CSS에서는 단일 cursor 스타일 선언에서 여러 개의 선택적 커스텀 커서와 필수 키워드를 지정할 수 있습니다. 여러 커서를 지정하면 폴백 체인이 형성됩니다. 브라우저가 첫 번째 커스텀 커서를 로드할 수 없으면, 다른 커서 중 하나가 로드되거나 로드를 시도할 커스텀 커서가 더 이상 없을 때까지 다른 커서를 차례대로 로드하려고 시도합니다. 브라우저가 커스텀 커서를 로드할 수 없으면 키워드를 사용합니다.
USS에서 커스텀 커서와 키워드는 상호 배타적입니다. cursor 스타일 선언에는 하나의 커스텀 커서 또는 키워드만 포함할 수 있습니다.
CSS cursor 프로퍼티에 대한 자세한 내용은 MDN 기술 자료를 참조하십시오.
불투명도
opacity: <number>
CSS와의 차이점
USS 불투명도는 CSS 불투명도와 유사합니다. 부모 요소의 불투명도는 자식 요소의 인식된 불투명도에 영향을 줍니다. USS 불투명도와 CSS 불투명도 사이에 인지 가능도의 차이는 있습니다.
다음의 USS 예시에서 파란 정사각형은 빨간 정사각형의 자식입니다. 빨간 정사각형의 opacity는 0.5입니다.
.red {
background-color: red;
opacity: 0.5;
}
.blue {
background-color: blue;
left: 20px;
top: 20px;
}
파란 정사각형은 불투명도 값이 없지만 빨간 정사각형에서 불투명도 0.5를 인식합니다. 파란 정사각형을 통해 빨간 정사각형을 볼 수 있습니다.
CSS에서 동일한 스타일을 적용하면 빨간색 정사각형과 파란색 정사각형이 50% 투명해집니다. 단, 파란색의 opacity를 1보다 작게 설정하지 않는 한 파란색 정사각형을 통해 빨간색 정사각형을 볼 수 없습니다.
