들어가기 전에
font-variant 속성은 문자 변환의 의미로 이 속성을 이용해 모든 소문자를 대문자로 변환할 수 있습니다.
변환된 대문자는 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용되지 않습니다.
핵심키워드
- small-caps
학습하기
7) 속성-font-variant
font-variant 속성
글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.
기본 값 : normal
font-variant: normal | small-caps | initial | inherit ;< 속성 값 >
normal | 기본 값 |
small-caps | 소문자를 작은 대문자로 변형합니다. |
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>font-variant</title>
<style>
p {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Font-Variant: Small-Caps</p>
</body>
</html>
참고자료
- CSS font-variant property
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- font-variant
https://developer.mozilla.org
- The font-variant CSS property is a shorthand for the longhand properties font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.
comment
이 속성은 어떨 때 사용하나요? 대문자로 바뀌어도 실제 대문자와 크기도 다르고... 자바스크립트로도 변환이 가능한데, 실제로는 잘 사용하지 않는 속성일까요?