줄 높이와 자간
줄 높이에는 leading-* 유틸리티를, 자간에는 tracking-* 유틸리티를 사용해 가독성을 조절합니다.
줄 높이와 자간은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
Why Line Height Matters
Line height is the space between lines. Too tight feels cramped, too loose feels scattered. Getting it right makes long text noticeably easier to read.
Tailwind's leading-* Utilities
Set it with the leading-* utilities: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0). The name comes from old print type.
<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>Leading for Headings vs Body
Use leading-tight for headings, since big text already has room, and leading-relaxed for body, which needs more breathing space. leading-normal is a safe default.
<h1 class="text-4xl font-bold leading-tight text-gray-900">
A Two-Line Heading That
Stays Tightly Together
</h1>
<p class="text-base leading-relaxed text-gray-600 mt-4">
Body paragraph text benefits from more line spacing.
It makes long passages easier to follow line by line.
</p>Fixed Leading Values
Tailwind also has fixed leading: leading-3 to leading-10 set exact pixel heights. Reach for these in tables or dense UI where you need precise spacing.
<p class="leading-3">Very tight (12px)</p>
<p class="leading-5">Compact (20px)</p>
<p class="leading-7">Comfortable (28px)</p>
<p class="leading-10">Spacious (40px)</p>Introduction to Letter Spacing
Letter spacing, or tracking, is the gap between characters. Tight tracking feels modern on big headings; wide tracking suits short labels like badges and tags.
Tailwind's tracking-* Utilities
Control it with tracking-*: from tracking-tighter and tracking-tight, through normal, to tracking-wide and tracking-widest. Negative pulls in, positive spreads out.
<p class="tracking-tighter">Tighter: editorial large headings</p>
<p class="tracking-normal">Normal: default body text</p>
<p class="tracking-wide">Wide: comfortable subheadings</p>
<p class="tracking-widest">Widest: UI labels and badges</p>Tracking for Display Headings
Big display headings almost always want tracking-tight or tracking-tighter. At large sizes the default spacing feels loose, and tightening it looks polished.
<!-- Without tracking adjustment -->
<h1 class="text-6xl font-bold">Feels Loose</h1>
<!-- Professional: tighter tracking at large sizes -->
<h1 class="text-6xl font-bold tracking-tight">Feels Cohesive</h1>Tracking for UI Labels
For uppercase UI labels, try text-xs font-semibold uppercase tracking-wider text-gray-500. The extra spacing offsets how cramped uppercase letters can feel.
<!-- Dashboard section label -->
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">
Recent Activity
</span>
<!-- Badge -->
<span class="bg-green-100 text-green-700 text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full">
Active
</span>Combining Leading and Tracking
Leading and tracking shine together. A pull quote might use leading-relaxed tracking-wide for an open feel; a metric label uses tracking-widest leading-none.
<!-- Pull quote style -->
<blockquote class="text-2xl italic font-light leading-relaxed tracking-wide text-gray-600">
'Design is intelligence made visible.'
</blockquote>
<!-- Dashboard label style -->
<p class="text-xs font-bold uppercase tracking-widest leading-none text-gray-500">
Revenue MTD
</p>Word Spacing Utilities
Tailwind even has word spacing: word-spacing-tight, normal, and wide adjust the gap between words. You will need it rarely, mostly for justified or display text.
<p class="word-spacing-wide text-gray-700">
Extra space between each word in this sentence.
</p>Practical: Blog Article Styles
A polished blog article: text-4xl font-bold leading-tight for the title, text-xl font-light for the subtitle, text-lg leading-relaxed for body, max-w-prose to wrap.
<article class="max-w-prose mx-auto px-4">
<h1 class="text-4xl font-bold leading-tight tracking-tight text-gray-900 mb-2">
Article Title
</h1>
<p class="text-xl font-light leading-snug text-gray-500 mb-8">
A compelling subtitle for the article.
</p>
<p class="text-lg leading-relaxed text-gray-700">
The body of the article content goes here.
</p>
</article>Quick Check
Quick check! See how spacing settled in. 📏
Lesson Recap
Nice! leading-* sets line height, tracking-* sets letter spacing, and headings like tight tracking while body likes relaxed leading. Next up: alignment and decoration.
자주 묻는 질문
“줄 높이와 자간” 강의는 무료인가요?
네 — “줄 높이와 자간” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“줄 높이와 자간”에서 뭘 배우나요?
줄 높이에는 leading-* 유틸리티를, 자간에는 tracking-* 유틸리티를 사용해 가독성을 조절합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“줄 높이와 자간” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.