CSS font-variant 속성이란?
CSS의 font-variant 속성은 텍스트의 글꼴 변형을 지정하는 단축(shorthand) 속성입니다. 하나의 선언으로 여러 세부 속성을 동시에 제어할 수 있으며, 다음 속성들의 축약형 역할을 합니다.
- font-variant-caps (대소문자 변형)
- font-variant-numeric (숫자 표기 방식)
- font-variant-alternates (대체 글리프)
- font-variant-ligatures (합자)
- font-variant-east-asian (동아시아 문자 변형)
font-variant 속성에 사용할 수 있는 기본 문법은 다음과 같습니다.
font-variant: normal | small-caps | initial | inherit;
각 값의 의미는 아래와 같습니다.
- normal – 기본 글꼴 스타일을 그대로 사용합니다.
- small-caps – 소문자를 작은 크기의 대문자(스몰캡스)로 표시합니다.
- initial – 해당 속성을 브라우저 기본값으로 되돌립니다.
- inherit – 부모 요소의 font-variant 값을 상속받습니다.
예제 1: font-variant: normal 적용하기
먼저 font-variant 속성에 normal 값을 적용한 예제를 살펴보겠습니다. 텍스트가 기본 글꼴 스타일로 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
실행 결과
예제 2: font-variant: small-caps 적용하기
이번에는 small-caps 값을 적용한 예제입니다. small-caps를 지정하면 소문자가 작은 대문자 형태로 변환되어 표시되므로, 제목이나 강조 문구에 세련된 느낌을 줄 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
실행 결과
마무리
font-variant 속성은 간단한 값 하나만으로도 텍스트의 인상을 크게 바꿀 수 있는 유용한 도구입니다. 특히 small-caps는 영문 타이포그래피에서 자주 활용되므로, 웹 디자인 시 적극적으로 활용해 보시기 바랍니다.