웹 디자인에서 소문자 크기의 대문자가 섞인 우아한 타이포그래피를 표현하고 싶다면 스몰 캡스(small-caps) 효과를 활용할 수 있습니다. CSS에서는 font-variant 속성을 사용하면 간단하게 이 효과를 구현할 수 있습니다.
font-variant 속성이란?
font-variant 속성은 글꼴의 변형 형태를 지정하는 CSS 속성입니다. 값으로 small-caps를 지정하면 대문자는 그대로 유지되고, 소문자는 작은 크기의 대문자로 변환되어 표시됩니다.
예제
아래 코드를 실행하면 font-variant 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다:
<html> <head> </head> <body> <p style = "font-variant:small-caps;"> Asia, Antartica, Africa are continents </p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 "Asia", "Antartica", "Africa"는 일반적인 대문자 크기로 표시되고, 나머지 소문자들은 작은 대문자 형태로 렌더링되는 것을 확인할 수 있습니다.
참고 사항
사용 중인 글꼴이 스몰 캡스를 지원하지 않는 경우, 브라우저는 합성된(synthesized) 스몰 캡스를 생성하여 표시합니다. 또한 인라인 스타일 대신 별도의 CSS 파일이나 <style> 태그에 클래스를 정의해 사용하면 코드 관리가 더욱 편리합니다.