4.1 font-style 속성
CSS는 웹 페이지에서 글꼴을 제어하고 표시하는 데 도움이 되는 다양한 속성을 제공합니다.
font-style, font-variant 및 font-stretch 속성을 사용하여 텍스트의 스타일, 표시 및 너비를 조정할 수 있습니다. 이제 각 속성을 자세히 살펴보겠습니다.
font-style 속성은 텍스트의 스타일을 정의합니다. 이것은 기울임꼴이나 일반 텍스트 스타일을 설정하는 데 사용됩니다.
값:
normal: 일반 텍스트 스타일 (기본값)italic: 기울임 텍스트 (이탤릭체)oblique: 기울임 텍스트, italic과 유사하지만 기울이는 방식이 다름
사용 예:
CSS
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
HTML
<body>
<p class="normal">이것은 일반 텍스트입니다.</p>
<p class="italic">이것은 기울임 텍스트입니다 (이탤릭체).</p>
<p class="oblique">이것은 기울임 텍스트입니다 (oblique).</p>
</body>
4.2 font-variant 속성
font-variant 속성은 텍스트를 작은 대문자로 표시하는 것을 제어합니다. (캡션) 대문자로 표시하지만 원래 소문자는 더 작은 크기로 유지됩니다.
값:
normal: 일반 텍스트 (기본값)small-caps: 작은 대문자로 표시된 텍스트
사용 예:
CSS
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
HTML
<body>
<p class="normal">이것은 일반 텍스트입니다.</p>
<p class="small-caps">이것은 작은 대문자로 표시된 텍스트입니다.</p>
</body>
추가 값 (CSS Fonts Level 4)
CSS Fonts Level 4는 font-variant 속성을 위한 추가 값을 제공합니다. all-small-caps, petite-caps,
all-petite-caps, unicase, titling-caps 등이 있습니다. 하지만 모든 브라우저에서 지원하지는 않습니다.
4.3 font-stretch 속성
font-stretch 속성은 글꼴의 압축 또는 확장의 정도를 제어합니다. 높이를 바꾸지 않고 글꼴의 너비를 변경하여, 가능한 글꼴 변형을 선택하는 데 사용됩니다.
값:
normal: 일반적인 글꼴의 너비 (기본값)ultra-condensed: 최대한 압축된 글꼴extra-condensed: 매우 압축된 글꼴condensed: 압축된 글꼴semi-condensed: 적당히 압축된 글꼴semi-expanded: 적당히 확장된 글꼴expanded: 확장된 글꼴extra-expanded: 매우 확장된 글꼴ultra-expanded: 최대한 확장된 글꼴
사용 예:
CSS
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
HTML
<body>
<p class="normal">이것은 일반 너비의 텍스트입니다.</p>
<p class="condensed">이것은 압축된 너비의 텍스트입니다.</p>
<p class="expanded">이것은 확장된 너비의 텍스트입니다.</p>
</body>
GO TO FULL VERSION