Availability-tracker은(는) 무엇을 하나요?
유체 타이포그래피 스케일, 글꼴 조합(에디토리얼 세리프 + 테크니컬 산세리프), 광학 커닝, 수직 리듬 및 레이아웃 이동 없는 현대 CSS clamp() 시스템을 마스터합니다.
개요
이 스킬은 웹 타이포그래피의 고급 개념을 실용적으로 학습할 수 있도록 안내합니다. 유체 타이포그래피를 통해 다양한 화면 크기에서 일관된 가독성과 미적 품질을 유지하는 방법을 배웁니다.
주요 개념
- 유체 타이포그래피 스케일: 뷰포트 너비에 따라 글꼴 크기가 동적으로 조정되는 시스템
- 글꼴 조합: 에디토리얼 세리프(본문)와 테크니컬 산세리프(제목)의 조화
- 광학 커닝: 글자 간 간격을 시각적으로 최적화하여 가독성 향상
- 수직 리듬: 일관된 줄 간격과 여백으로 텍스트의 수직 흐름 유지
- CSS clamp():
clamp(MIN, VAL, MAX)함수를 사용한 안전한 유체 크기 조정
사용 방법
- 프로젝트에 이 스킬을 추가합니다.
- SKILL.md의 가이드를 따라 타이포그래피 시스템을 설정합니다.
- 제공된 코드 예제를 참고하여 CSS를 작성합니다.
예제 코드
:root {
--font-size-h1: clamp(2rem, 4vw + 1rem, 4rem);
--font-size-body: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
--line-height: 1.6;
}
body {
font-family: 'EB Garamond', 'Georgia', serif;
line-height: var(--line-height);
}
h1, h2, h3 {
font-family: 'Inter', 'Helvetica', sans-serif;
letter-spacing: -0.02em;
}
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 모든 최신 CSS 지원 브라우저
라이선스
MIT