📍Semantic Tokens
Chakra UI의 Semantic Tokens를 활용하여 Color를 설정하는 방법을 소개합니다.
❓ Semantics (시맨틱) 이란?프로그래밍에서, 시맨틱은 코드 조각의 의미를 나타냅니다. "버튼", "링크", "입력란"과 같은 요소들은 시맨틱 정보를 가지고 있습니다. 이 정보는 스크린 리더나 웹 검색 엔진과 같은 보조 기술이 해당 요소를 이해하고 사용자에게 적절한 정보를 전달하는 데 도움이 됩니다.
아래의 두 케이스 중 어떤 태그가 더 Semantic(의미론)적인 태그일까요? -
<div class="header">-<Header>헤더입니다.</Header>
header라는 명확한 의미가 있는 태그를 사용하므로써 코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.
Chakra UI의 Semantic Tokens는 이러한 시맨틱 정보를 React 컴포넌트에 쉽게 부여할 수 있도록 지원합니다. 예를 들어, <Button> 컴포넌트는 시맨틱 토큰인 "button"을 가지고 있으며, <Link> 컴포넌트는 시맨틱 토큰인 "link"를 가지고 있습니다. 이러한 시맨틱 토큰은 컴포넌트의 역할을 명확하게 정의하고, 개발자와 사용자에게 일관된 경험을 제공하는 데 도움이 됩니다.
Semantic Tokens를 사용하면 Chakra UI 컴포넌트를 더 쉽게 사용하고 이해할 수 있으며, 접근성과 검색 엔진 최적화를 개선할 수 있습니다.
Next
똑플레이트의 Foundation 과 적용 과정을 이해하셨다면, 기초작업부터 같이 설정해 봅시다.
@referece
Last updated