Unity UI 스타일링 가이드
이 문서는 Unity의 사용자 인터페이스(UI) 스타일링을 위한 문서입니다. Unity의 UI 도구킷(UI Toolkit)을 활용하여 UI를 세팅하고 스타일링하는 방법에 대해 알아보겠습니다.
1. UI 스타일링 기본 개념
Unity의 UI 스타일링은 USS(유니티 스타일 시트)를 사용하여 설정됩니다. USS는 W3C CSS 문서와 유사한 문법을 따릅니다. 스타일링 요소를 정의하는 프로퍼티와 값들이 있으며, 각기 다른 데이터 타입과 키워드를 지원합니다.
2. USS 데이터 타입
USS에는 다음과 같은 기본 데이터 타입이 있습니다: - 길이: 여러 단위(px, %)를 사용할 수 있습니다. - 예: width: 200px; (200픽셀), width: 50%; (부모 요소의 절반) - 키워드: 문서에서 사전 정의된 특정 용어를 사용하여 프로퍼티를 설정합니다. - 예: position: absolute;
3. 프로퍼티 속성
USS 프로퍼티는 보통 다음과 같은 포맷을 가집니다: - 키워드는 특정 규칙에 따라 조합되어 적용됩니다. - 나란히 나열된 단어는 모든 옵션이 정해진 순서로 발생해야 함을 의미합니다. || || - &&는 모든 옵션이 발생해야 함을 의미합니다.
조정 값
| 조정값 | 설명 |
|---|---|
| * | 0회 이상 발생 |
| + | 1회 이상 발생 |
| ? | 선택 사항 |
| {A,B} | 최소 'A', 최대 'B' 횟수 발생 |
4. CSS 스타일링 예제
레이블 컬러 설정
모든 레이블의 색상을 빨간색으로 설정하고, 특정 레이블의 색상은 기본값으로 복원하는 예시는 다음과 같습니다:
/* 모든 레이블의 색상을 빨간색으로 설정 */
Label {
color: red;
}
/* label1은 특정 레이블의 이름입니다. */
#label1 {
color: initial;
}
5. 색상 정의
UI 툴킷은 다양한 색상 형식을 지원합니다:
| 색상 형식 | 예시 |
|---|---|
| 16진수 | #FFFF00, #0F0 |
| RGB | rgb(255, 255, 0) |
| RGBA | rgba(255, 255, 0, 1.0) |
6. 에셋 참조
프로젝트의 에셋을 USS 파일 내에서 참조할 수 있으며, 두 가지 방법이 있습니다:
url() 함수 사용
- 상대 경로 또는 절대 경로를 사용하여 에셋을 참조할 수 있습니다.
- 예시:
- 상대 경로:
url("../Resources/thumb.png") - 절대 경로:
url("/Assets/Editor/Resources/thumb.png")
resource() 함수 사용
- Unity의 Resources 폴더 내에 있는 에셋을 참조할 때 사용합니다.
- 예시:
resource("Images/my-image")
7. 고해상도 화면 지원
고해상도 화면(DPI)에 맞게 텍스처 파일명을 지정하여 동일한 프로젝트 폴더에 두 개의 버전을 놓습니다: - 일반 버전: myimage.png - 고해상도 버전: myimage@2x.png
추가 리소스
- USS 컬러 키워드: 특정 색상을 표현하는 키워드를 찾아보세요.
- USS 프로퍼티: 다양한 사용자 인터페이스 스타일링 속성을 학습하세요.
이 가이드를 통해 Unity의 UI 스타일링을 보다 쉽게 이해하고 구현할 수 있습니다. 필요에 따라 추가 예제를 찾아보며 실습하는 것을 추천합니다.