설치 (5분)
파일은 두 개뿐입니다.
| 파일 | 필수 | 무엇이 들었나 |
|---|---|---|
jt-tokens.css | ✅ | 모든 값(색·글자·간격·레이어) + 웹폰트 로드 + 언어 안전 규칙 + 접근성 대응 |
jt-utilities.css | 권장 | .jt-* 컴포넌트 47종 |
웹폰트를 따로 넣지 마세요. v5.0부터 jt-tokens.css 안에 Pretendard·Figtree 로드가 들어 있습니다.
이 파일 하나만 링크하면 폰트까지 따라옵니다.
스택별
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">
</head>링크 경로 두 가지
| 경로 | 언제 |
|---|---|
/v5/jt-tokens.css | 버전 고정. 운영 중인 앱은 이쪽 — 우리가 v6를 내도 화면이 갑자기 바뀌지 않습니다 |
/jt-tokens.css | 항상 최신. 개발 중이거나 늘 최신을 따라가고 싶을 때 |
파일을 직접 내려받아 프로젝트에 넣어도 됩니다 → 리소스 · 다운로드
신규 앱 기본 스타일
body{
font-family: var(--font-base);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--color-text);
background: var(--color-bg-layout);
-webkit-font-smoothing: antialiased;
}🚫
word-break: keep-all을 여기에 넣지 마세요. 토큰 파일이 :lang(ko) 한정으로 처리합니다.
전역에 걸면 중국어·일본어·태국어에서 레이아웃이 붕괴합니다.
기존 앱이라면 안전 적용 규칙 §2-1을 먼저 확인하세요.