Unity 사용자 매뉴얼: UI 스타일링과 유사 클래스
이 문서는 Unity의 UI 스타일링에 관한 내용을 설명하며, 유사 클래스와 그 활용에 대한 예제를 제공합니다.
유사 클래스란?
유사 클래스는 특정 상태에 있는 요소를 선택하는 데 사용됩니다. 예를 들어, 버튼에 마우스 포인터가 올라갈 때 스타일을 변경할 수 있습니다.
예제
아래 코드는 사용자가 버튼에 마우스를 올려 놓으면 버튼 배경색이 연두색으로 바뀌도록 설정합니다.
Button:hover {
background-color: palegreen;
}
지원되는 유사 클래스
다음은 유사 클래스의 목록입니다.
| 클래스 | 설명 |
|---|---|
| :hover | 커서가 요소 위에 있습니다. |
| :active | 사용자가 요소와 상호작용하는 중입니다. |
| :inactive | 사용자가 요소와의 상호작용을 멈춘 상태입니다. |
| :focus | 요소에 포커스가 있습니다. |
| :disabled | 요소가 비활성화된 상태입니다. |
| :enabled | 요소가 활성화된 상태입니다. |
| :checked | 요소가 선택된 상태입니다. (토글 또는 라디오버튼) |
| :root | 시각적 트리에서 가장 높은 요소입니다. |
유사 클래스 체이닝
유사 클래스는 서로 체이닝하여 동시에 여러 상태에 스타일을 적용할 수 있습니다. 예를 들어, 체크된 토글 요소에 마우스를 올리면 배경색을 변경할 수 있습니다.
예제
Toggle:checked:hover {
background-color: yellow;
}
루트 유사 클래스
:root 클래스는 스타일시트가 영향을 미치는 요소에 대한 기본 스타일을 정의하기 위해 사용됩니다. 모든 요소가 이 기본 폰트를 사용하도록 설정할 수 있습니다.
예제
:root {
-unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}
기본 스타일 변수
:root 선택자는 전역 변수(커스텀 프로퍼티)를 선언하는 데 사용됩니다. 다른 스타일 규칙에서 이 값을 참조할 수 있습니다.
추가 리소스
이 문서에서는 Unity의 UI 스타일링과 유사 클래스에 대해 설명하였습니다. 이러한 개념을 통해 더 나은 사용자 경험을 제공하는 UI를 설계할 수 있습니다.