> For the complete documentation index, see [llms.txt](https://toktokhan.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toktokhan.gitbook.io/docs/basic-guides/foundation/2.-colors/semantic-tokens.md).

# Semantic Tokens

Chakra UI의 Semantic Tokens를 활용하여 Color를 설정하는 방법을 소개합니다.

> ### :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)