CSS font-variant 속성이란?
font-variant 속성은 텍스트에 스몰캡스(small-caps) 효과를 적용할 때 사용하는 CSS 속성입니다. 스몰캡스란 대문자 크기는 그대로 유지하면서 소문자를 작은 대문자 형태로 변환해 표시하는 타이포그래피 기법입니다.
이 속성의 기본 값은 normal이며, 스몰캡스 효과를 적용하려면 small-caps 값을 지정하면 됩니다.
주요 속성 값
- normal: 기본값으로, 일반적인 텍스트 형태로 표시됩니다.
- small-caps: 소문자를 작은 대문자(small capitals) 형태로 변환하여 표시합니다.
font-variant 사용 예제
다음 예제는 인라인 스타일을 활용해 문단에 스몰캡스 효과를 적용하는 방법을 보여줍니다.
<html> <head> </head> <body> <p style = "font-variant:small-caps;"> This text will be rendered as small caps </p> </body> </html>
위 코드를 실행하면 문단 내 모든 소문자가 작은 대문자 형태로 렌더링되어, 세련되고 격식 있는 타이포그래피 효과를 얻을 수 있습니다.
활용 팁
스몰캡스는 제목, 부제목, 인용문 등에서 시각적 위계를 강조하고 싶을 때 유용하게 활용됩니다. 최신 CSS에서는 all-small-caps, petite-caps, unicase 등 더 다양한 값도 지원되므로, 폰트가 해당 기능을 지원하는지 확인한 후 사용하는 것이 좋습니다.