---
title: "이름을 붙여야 스타일을 걸 수 있다"
description: "UI Toolkit 에서 모양은 요소에 붙지 않고 선택자에 붙습니다. 타입, 이름, 클래스, 전체 네 가지로 부르는 방법과"
author: "유니얼"
pubDate: 2026-09-18
category: "game-dev/unity/ui"
tags: ["Unity", "UI", "UI Toolkit"]
canonical: https://blog.unialgames.com/posts/uitk-uss-selectors/
---
[화면 하나가 파일 두 개와 오브젝트 하나가 된다](/posts/uitk-uxml-uss-basics/)에서 `.uxml` 은 구조, `.uss` 는 모양이라고 나눴습니다. 파일이 나뉘면 바로 따라오는 질문이 하나 있습니다. **이 모양을 누구에게 걸 것인가** 를 어딘가에 적어야 합니다.
uGUI 에는 이 질문이 없었습니다. 버튼을 클릭하고 인스펙터에서 색을 바꾸면 그 버튼이 바뀌었습니다. 고르는 일과 값을 넣는 일이 한 동작이었습니다. UI Toolkit 에서는 그 둘이 떨어져 있습니다.
## 모양은 요소가 아니라 문장에 붙습니다
uss 에 적는 규칙 하나는 이렇게 생겼습니다.
```css
.primary {
background-color: #2f6fed;
color: white;
}
```
앞의 `.primary` 가 **누구에게** 이고, 중괄호 안이 **무엇을** 입니다. 앞부분을 선택자라고 부릅니다.
그래서 순서가 뒤집힙니다. uGUI 는 요소를 고른 다음 값을 넣었고, 여기서는 값을 먼저 적어 두고 그 값을 받을 요소에 표식을 답니다. 표식이 없는 요소는 어느 규칙에도 안 걸리고, 그래서 아무 모양도 받지 못합니다.
## 부르는 방법은 네 가지입니다
| 선택자 | 적는 법 | 걸리는 것 |
| --- | --- | --- |
| 타입 | `Button { ... }` | 그 타입인 요소 전부 |
| 이름 | `#ok { ... }` | 그 이름을 가진 요소 하나 |
| 클래스 | `.primary { ... }` | 그 클래스를 단 요소 전부 |
| 전체 | `* { ... }` | 전부 |
타입 선택자에는 네임스페이스를 안 적습니다. 문서가 못 박아 둔 부분입니다. "When you write type selectors, specify only the concrete object type. Don't include the namespace in the type name." `UnityEngine.UIElements.Button` 이 아니라 `Button` 입니다.
이어 붙이는 방법도 있습니다. `.row Button` 은 `.row` 안 어딘가에 있는 버튼 전부이고, `.row > Button` 은 바로 아래 칸의 버튼만입니다. `.primary.danger` 처럼 띄우지 않고 붙이면 두 클래스를 다 단 요소만 걸립니다. 쉼표로 늘어놓으면 같은 값을 여럿에게 한 번에 겁니다.
## `#` 와 `.` 은 uss 에만 씁니다
uxml 쪽에는 기호를 쓰지 않습니다.
```xml
```
클래스를 여럿 달 때는 띄어쓰기로 늘어놓습니다.
문서가 이 부분을 두 번 적어 뒀습니다. 클래스 쪽은 "Only use a period when you write the selector in a USS file. Don't include it when you assign the class to an element in a UXML or C# file." 이고, 이름 쪽은 더 분명합니다. "An element name that includes the number sign is invalid. For example `` is invalid."
`name="#ok"` 이라고 적어 놓고 왜 안 걸리지 하는 일이 처음에 한 번쯤 있습니다.
코드에서 다는 것도 같습니다.
```csharp
var ok = root.Q