Unity UI Toolkit - USS 프로퍼티 안내서
개요
Unity의 UI Toolkit은 사용자 인터페이스를 생성하기 위한 강력한 도구입니다. 이 문서에서는 UI Toolkit의 USS(스타일 시트) 프로퍼티에 대해 설명하고, 이를 활용하는 방법을 소개합니다.
USS 프로퍼티 설명
USS는 CSS와 유사한 언어로, UI 요소의 스타일을 정의합니다. 특정 프로퍼티는 상속 가능하며 애니메이션화할 수 있는지 여부에 따라 다릅니다. 아래의 표는 주요 USS 프로퍼티를 요약한 것입니다.
| 프로퍼티 이름 | 상속 | 애니메이션화 가능성 | 설명 |
|---|---|---|---|
| align-content | 지원 안 함 | 분리 | 교차 축에서 자식의 전체 영역에 대한 얼라인먼트 |
| background-color | 지원 안 함 | 완전히 애니메이션화 가능 | 요소의 배경 색깔 |
| border-top-color | 지원 안 함 | 완전히 애니메이션화 가능 | 요소의 상단 테두리 컬러 |
| color | 지원 | 완전히 애니메이션화 가능 | 요소의 텍스트 컬러 |
| font-size | 지원 | 완전히 애니메이션화 가능 | 요소의 텍스트 폰트 크기 |
| margin | 지원 안 함 | 완전히 애니메이션화 가능 | 모든 방향의 마진을 설정하는 짧은 표기 프로퍼티 |
| padding | 지원 안 함 | 완전히 애니메이션화 가능 | 모든 방향의 패딩을 설정하는 짧은 표기 프로퍼티 |
| visibility | 지원 | 분리 | 요소를 표시할지 여부 |
| white-space | 지원 | 분리 | 텍스트 줄바꿈 방식을 지정 |
| word-spacing | 지원 | 완전히 애니메이션화 가능 | 단어 간의 공간을 늘리거나 줄이기 |
기본 사용 방법
USS 프로퍼티를 사용할 때는 다음과 같이 정의할 수 있습니다. 예를 들어, 모든 UI 요소에 대해 폰트를 설정하고 싶다면 아래와 같이 설정할 수 있습니다.
:root {
-unity-font: resource("Font/consola.ttf");
}
활용 예제
1. 버튼 스타일링
다음 코드는 버튼의 배경색과 텍스트 색상을 설정하는 예제입니다.
.button {
background-color: #2196F3;
color: white;
padding: 10px;
border-radius: 5px;
}
2. 텍스트 스타일링
텍스트의 폰트 사이즈와 줄 간격을 설정하는 예제입니다.
.text {
font-size: 16px;
line-height: 1.5;
color: #333;
}
3. 레이아웃 디자인
여러 요소가 일정한 간격으로 배치되도록 레이아웃을 구성하는 방법입니다.
.container {
padding: 20px;
margin: 10px;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
}
참고사항
- 프로퍼티에 대한 자세한 정보는 Unity의 공식 문서를 참조하세요.
- 각 프로퍼티의 돔 문서에서 사용 방법에 대한 예제를 찾아볼 수 있습니다.
결론
Unity의 UI Toolkit과 USS 프로퍼티를 사용하여 효율적이고 아름다운 사용자 인터페이스를 디자인할 수 있습니다. 다양한 프로퍼티를 실험해보며 나만의 스타일을 만들어보세요.