웹 페이지에서 글꼴을 기울임꼴(이탤릭체)로 표시하고 싶다면 CSS의 font-style 속성을 사용하면 됩니다. 이 속성은 HTML 요소에 인라인 스타일로 적용할 수도 있고, 별도의 스타일시트에서 클래스나 선택자를 통해 지정할 수도 있습니다.
font-style 속성의 주요 값
font-style 속성에는 크게 세 가지 값을 사용할 수 있습니다.
- normal — 기본값으로, 일반적인 직립 형태의 글꼴을 표시합니다.
- italic — 해당 글꼴 패밀리에 포함된 이탤릭 버전을 사용해 기울임꼴로 표시합니다.
- oblique — 일반 글꼴을 단순히 기울여서 표시합니다. 이탤릭 전용 서체가 없는 경우 유용합니다.
예제 코드
아래 예제는 p 태그에 인라인 스타일로 font-style: italic;을 적용한 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<html> <head> </head> <body> <p style = "font-style:italic;"> 이 텍스트는 기울임꼴(이탤릭) 스타일로 표시됩니다. </p> </body> </html>
실행 결과
위 코드를 브라우저에서 열면 문단의 텍스트가 오른쪽으로 살짝 기울어진 이탤릭체로 출력되는 것을 확인할 수 있습니다.
참고 사항
인라인 스타일 대신 외부 또는 내부 스타일시트를 사용하면 여러 요소에 한 번에 동일한 스타일을 적용할 수 있어 코드 관리가 더욱 편리합니다. 예를 들어 다음과 같이 작성할 수 있습니다.
p {
font-style: italic;
}또한 em 태그처럼 기본적으로 이탤릭체가 적용되는 HTML 요소도 있으므로, 의미론적 강조가 필요한 경우에는 해당 태그를 활용하는 것도 좋은 방법입니다.