티스토리 뷰

[개발]프로그래밍/css3

[css3] font-style - 글자 스타일 지정

좋은 블로그 2021. 3. 24. 09:23
1. 개념
font-style - 글자 스타일 지정
font-style는 글자 스타일 지정하는 속성

속성

설명

normal

일반적인 형태

italic

이탤릭체로 표시(기울어진 글꼴이 처음부터 디자인)

oblique

이탤릭체로 표시(원래 글꼴을 기울어지게 표시)
2. 태그
font-style
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' font-style : normal ;' >
normal 스타일
</div>
2
<div style =' font-style : italic ;' >
italic 스타일
</div>
3
<div style =' font-style : oblique ;' >
oblique 스타일
</div>
</body>
</html>
결과 화면
코드 설명
1
font-style : normal ;
기울임이 없는 일반적인 형태입니다.
보통 일반적인 글꼴에는 font-style 선언을 하지 않겠죠.
만약에 전체 기울임이 있는 글꼴 중 일부만 normal로 하고자 할 경우에는 이렇게 이용할 수 있습니다.
2
font-style : italic ;
대부분의 글꼴들이 기울어진 형태에 맞게 디자인이 되어 있기 때문에 웹에서는 oblique보다 italic를 많이 사용합니다.
3
font-style : oblique ;
oblique는 단지 글꼴을 기울어지는 형태로 만드는 속성입니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] color - 글자 색 지정  (0) 2021.03.26
[css3] font - 글꼴 속성 한꺼번에 표현  (0) 2021.03.25
[css3] font-weight - 글자 굵기 지정  (0) 2021.03.23
[css3] font-size - 글자 크기 조절  (0) 2021.03.22
[css3] font-family - 텍스트 글꼴 지정  (0) 2021.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday