CSS의 font-style 속성은 요소의 텍스트에 normal(보통), italic(이탤릭), oblique(오블리크) 스타일을 지정할 때 사용합니다. 특히 oblique 값에는 각도(deg)를 함께 지정하여 기울기 각도를 세밀하게 조절할 수 있다는 점이 특징입니다.
문법(Syntax)
CSS font-style 속성의 기본 문법은 다음과 같습니다.
Selector {
font-style: /*값*/
}사용 가능한 주요 값은 다음과 같습니다.
- normal — 기울임 없는 일반적인 텍스트 스타일
- italic — 글꼴 자체에 내장된 이탤릭체 적용
- oblique — 글자를 임의의 각도로 기울여 표시 (예:
oblique 10deg)
예제 1: italic과 oblique 각도 지정
다음 예제는 h2 요소에 italic 스타일을, p 요소에는 10도 각도의 oblique 스타일을 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-style: italic;
background-color: steelblue;
color: white;
}
p {
font-style: oblique 10deg;
}
</style>
</head>
<body>
<h2>Fortran Tutorial for Beginners</h2>
<p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language.</p>
<p>It is used for numeric and scientific computing.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
제목(h2)은 steelblue 배경 위에 흰색 이탤릭체로 표시되고, 본문(p)은 10도 기울어진 오블리크 스타일로 렌더링되는 것을 확인할 수 있습니다.
예제 2: 목록 요소에 oblique 각도 적용
다음 예제에서는 h3 제목에 italic 스타일을 적용하고, ul 목록 항목(li)에는 5도 각도의 oblique 스타일과 함께 Comic Sans MS 글꼴을 지정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
font-style: italic;
background-color: mediumpurple;
color: white;
text-align: center;
}
li {
font-family: "Comic Sans MS", cursive;
font-style: oblique 5deg;
}
</style>
</head>
<body>
<h3>Developers Best Practices Tutorial</h3>
<ul>
<li>Documentation is the key</li>
<li>Follow the standards</li>
<li>Write to be Reviewed</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
중앙 정렬된 mediumpurple 배경의 이탤릭 제목 아래로, 5도만큼 살짝 기울어진 개성 있는 목록 항목들이 표시됩니다.
정리
font-style 속성은 문서에서 강조가 필요한 부분이나 디자인적 포인트를 줄 때 유용하게 활용됩니다. italic은 글꼴에 설계된 이탤릭 서체를 사용하고, oblique는 단순히 글자를 기울이는 방식이라는 차이가 있으므로 상황에 맞게 선택하면 됩니다. 또한 oblique에 각도 값을 지정하면 원하는 만큼 미세하게 기울기를 조절할 수 있어 더욱 섬세한 타이포그래피 연출이 가능합니다.