✏️
CSS 타이포그래피 가이드
폰트 크기, 줄 높이, 간격, 색상 등 텍스트를 아름답게 다루는 방법을 배워보세요.
1폰트 기본 속성
텍스트 스타일링의 핵심 속성: font-size, font-weight, line-height, color, letter-spacing.
미리보기HTMLCSS
HTML
<h1 class="heading">큰 제목</h1>
<p class="body">본문 텍스트입니다. 읽기 쉽도록 줄 높이를 넉넉하게 설정합니다.</p>
<span class="caption">보조 텍스트</span>CSS
.heading {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: #111;
margin: 0 0 12px;
}
.body {
font-size: 16px;
line-height: 1.7;
color: #374151;
margin: 0 0 8px;
}
.caption {
font-size: 13px;
color: #9ca3af;
}letter-spacing에 음수 값을 넣으면 큰 제목이 더 단단하게 보입니다. -0.02em 정도가 적당합니다.
2인용문 스타일링
border-left를 사용하면 간단하면서도 세련된 인용문 스타일을 만들 수 있습니다.
미리보기HTMLCSS
HTML
<blockquote class="quote">
<p>"디자인은 단순히 어떻게 보이느냐가 아니라, 어떻게 작동하느냐이다."</p>
<cite>— 스티브 잡스</cite>
</blockquote>CSS
.quote {
border-left: 4px solid #0066ff;
padding: 16px 20px;
margin: 0;
background: #f8fafc;
border-radius: 0 8px 8px 0;
}
.quote p {
font-size: 17px;
font-style: italic;
color: #374151;
line-height: 1.6;
margin: 0 0 8px;
}
.quote cite {
font-size: 13px;
color: #9ca3af;
font-style: normal;
}border-left만으로도 충분히 세련된 인용문을 만들 수 있습니다.