# Semantic Tokens

> ### :question: **Semantics (시맨틱) 이란?** 
>
> 프로그래밍에서, **시맨틱**은 *코드 조각의 의미*를 나타냅니다.\
> "버튼", "링크", "입력란"과 같은 요소들은 시맨틱 정보를 가지고 있습니다. 이 정보는 스크린 리더나 웹 검색 엔진과 같은 보조 기술이 해당 요소를 이해하고 사용자에게 적절한 정보를 전달하는 데 도움이 됩니다.<br>
>
> 아래의 두 케이스 중 어떤 태그가 더 <mark style="color:green;">**Semantic(의미론)적**</mark>인 태그일까요?\
> \
> \-  `<div class="header">`\
> \-  `<Header>`헤더입니다.`</Header>`&#x20;
>
> `header`라는 명확한 의미가 있는 태그를 사용하므로써 코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.

Chakra UI의 Semantic Tokens는 이러한 시맨틱 정보를 React 컴포넌트에 쉽게 부여할 수 있도록 지원합니다. 예를 들어, `<Button>` 컴포넌트는 시맨틱 토큰인 "button"을 가지고 있으며, `<Link>` 컴포넌트는 시맨틱 토큰인 "link"를 가지고 있습니다. 이러한 시맨틱 토큰은 컴포넌트의 역할을 명확하게 정의하고, 개발자와 사용자에게 일관된 경험을 제공하는 데 도움이 됩니다.

Semantic Tokens를 사용하면 Chakra UI 컴포넌트를 더 쉽게 사용하고 이해할 수 있으며, 접근성과 검색 엔진 최적화를 개선할 수 있습니다.\
\ <br>

## Next

똑플레이트의 Foundation 과 적용 과정을 이해하셨다면, 기초작업부터 같이 설정해 봅시다.

@referece&#x20;

* [Mozila - Semantics](https://developer.mozilla.org/ko/docs/Glossary/Semantics)
* [Chakra UI - Semantic-tokens](https://chakra-ui.com/docs/styled-system/semantic-tokens)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://toktokhan.gitbook.io/docs/basic-guides/foundation/2.-colors/semantic-tokens.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.