소문자를 작은 대문자로 바꾸는 방법 - font-variant

font-variant

font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의
대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.

기본형

font-variant : normal | small-caps

normal : 일반적인 형태로 표시합니다.

small-caps : 소문자를 작은 대문자로 바꿉니다.

예제

예제 1

<h1 class="a">Lorem Ipsum Dolor.</h1>
<h1 class="b">Lorem Ipsum Dolor.</h1>

.a {
  font-variant: normal;
}
.b {
  font-variant: small-caps;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 소문자를 작은 대문자로 바꾸는 속성 font-variant 예제"
data-slug-hash="jOqRaMG"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 2

다음은 font-weight 속성을 사용해 글자를 굵게 표시하고 font-variant 속성을
사용해 소문자를 작은 대문자로 표시한 예제입니다.

<span> 태그를 사용해 텍스트 문단 중 일부에만 스타일을
적용했습니다.

<h1>세계 3대 미항</h1>
<p><span class="accent">시드니(Sydney)</span>, 호주</p>
<p><span class="accent">리우데자네이루(Rio de Janero)</span>, 브라질</p>
<p><span class="accent">나폴리Naples)</span>, 이탈리아</p>

.accent {
  font-variant: small-caps;
  font-weight: bold;
}

class="codepen"
data-editable="true"
data-preview="true"
data-height="380"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="MWbVjXb"
style="height: 380px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS font-variant 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.