Unity 사용자 매뉴얼 - UI 스타일링 및 USS 프로퍼티
이 문서는 Unity의 UI 툴킷과 USS(계층형 스타일시트) 프로퍼티에 대해 설명합니다. 기본적인 UI 스타일링 방법과 주요 프로퍼티에 대해 알아볼 것입니다.
박스 모델
박스 모델은 UI 요소의 크기와 배치를 정의하는 데 사용됩니다.
| 프로퍼티 | 설명 |
|---|---|
| width | 요소의 너비 |
| height | 요소의 높이 |
| min-width | 요소의 최소 너비 |
| min-height | 요소의 최소 높이 |
| max-width | 요소의 최대 너비 |
| max-height | 요소의 최대 높이 |
| margin | 요소의 외부 여백 |
| padding | 요소의 내부 여백 |
| border | 요소의 테두리 크기 |
CSS와의 차이점
- Unity의 박스 모델은 CSS의
box-sizing프로퍼티가border-box로 설정된 것과 동일합니다. CSS에서는width와height가 콘텐츠 상자의 크기를 정의하지만, Unity에서는 이를 다르게 처리합니다.
플렉스 레이아웃
Unity의 UI 툴킷은 항목을 유연하게 배치하기 위한 플렉스 박스를 지원합니다.
| 프로퍼티 | 설명 |
|---|---|
| flex-grow | 아이템이 컨테이너에서 얼마나 늘어날지를 결정 |
| flex-shrink | 아이템이 컨테이너에서 얼마나 줄어들지를 결정 |
| flex-basis | 아이템의 기본 크기 |
| align-items | 아이템의 정렬 방식 |
| justify-content | 주 축 방향의 정렬 방식 |
예시:
코드 스니펫:
// Flexbox 사용 예제
var myFlexContainer = new VisualElement();
myFlexContainer.style.flexDirection = FlexDirection.Row;
myFlexContainer.style.justifyContent = Justify.FlexStart;
위치 지정
UI 요소의 위치를 지정하는 데 사용되는 프로퍼티입니다.
| 프로퍼티 | 설명 |
|---|---|
| position | 요소의 위치 유형(절대/상대) |
| left | 부모 엘리먼트의 왼쪽으로부터의 거리 |
| top | 부모 엘리먼트의 위쪽으로부터의 거리 |
| right | 부모 엘리먼트의 오른쪽으로부터의 거리 |
| bottom | 부모 엘리먼트의 아래쪽으로부터의 거리 |
예시:
코드 스니펫:
// 위치 지정 예제
var myElement = new VisualElement();
myElement.style.position = Position.Absolute;
myElement.style.left = 100;
myElement.style.top = 50;
배경 및 테두리
배경 색상과 테두리 관련 프로퍼티입니다.
| 프로퍼티 | 설명 |
|---|---|
| background-color | 배경 색상 |
| border-color | 테두리 색상 |
| border-radius | 테두리 각 모서리의 반지름 |
| opacity | 요소의 투명도 |
예시:
코드 스니펫:
// 배경 및 테두리 예제
var myBox = new VisualElement();
myBox.style.backgroundColor = new Color(1, 0, 0); // 빨간색
myBox.style.borderRadius = 10;
텍스트 프로퍼티
텍스트의 스타일을 정의하는 데 사용되는 프로퍼티입니다.
| 프로퍼티 | 설명 |
|---|---|
| color | 텍스트 색상 |
| font-size | 텍스트 크기 |
| text-align | 텍스트 정렬 방식 |
| white-space | 텍스트 공백 처리 방식 |
예시:
코드 스니펫:
// 텍스트 프로퍼티 예제
var myLabel = new Label("Hello, World!");
myLabel.style.color = new Color(0, 0, 0); // 검은색
myLabel.style.fontSize = 16;
불투명도
불투명도 설정은 UI 요소의 투명도를 조정합니다.
| 프로퍼티 | 설명 |
|---|---|
| opacity | 요소의 불투명도 값 설정 |
예시:
코드 스니펫:
// 불투명도 예제
var myTransparentBox = new VisualElement();
myTransparentBox.style.opacity = 0.5f; // 50% 불투명도
참고 사항
- UI 빌더를 사용할 때
Font컨트롤과Font Asset의 설정을 구분하여야 합니다. - 드래그하여 UI 요소를 조작할 수 있는 편리한 방법을 제공합니다.
- 커서 프로퍼티를 설정할 수 있지만, 런타임 UI에서 커스텀 커서를 사용해야 합니다.
이 문서에 포함된 예제와 프로퍼티를 바탕으로, Unity에서 강력한 UI를 구축할 수 있길 바랍니다!