티스토리 뷰

[개발]프로그래밍/css3

[css3] font - 글꼴 속성 한꺼번에 표현

좋은 블로그 2021. 3. 25. 09:58
1. 개념
font - 글꼴 속성을 한꺼번에 표현
font는 font-style,font-wiehgt,font-size/line-height,font-family 와 같은 속성들을 한꺼번에 간단하게표현할 수 있는 속성
또 특정 키워드를 이용해 그것과 어울리는 글꼴 스타일을 표시

속성

설명

caption

캡션에 어울리는 글꼴 스타일

icon

아이콘에 어울리는 글꼴 스타일

menu

드롭다운 메뉴에 어울리는 글꼴 스타일

message-box

대화상자에 어울리는 글꼴 스타일

small-caption

작은 캡션에 어울리는 글꼴 스타일

status-bar

상태 표시줄에 어울리는 글꼴 스타일
2. 태그
font
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' font : 20px/45px "바탕" ;' >
바탕체로 20px의 line-height는 45px입니다.바탕체로 20px의 line-height는 45px입니다.바탕체로 20px의 line-height는 45px입니다.바탕체로 20px의 line-height는 45px입니다.바탕체로 20px의 line-height는 45px입니다.바탕체로 20px의 line-height는 45px입니다.
</div>
2
<div style =' font : bold italic 30px "돋움" ;' >
돋움체로 굵기가 bold이면서 italic체로 30px 크기
</div>
3
<div style =' font : icon ;' >
icon에 어울리는 글꼴
</div>
4
<div style =' font : menu ;' >
menu에 어울리는 글꼴
</div>
5
<div style =' font : caption ;' >
caption에 어울리는 글꼴
</div>
</body>
</html>
결과 화면
코드 설명
1
font : 20px/45px "바탕" ;
font-size와 line-height 는 슬래시(/)를 이용해서 한꺼번에 표현할 수가 있습니다.
위에서와 같이 폰트는 20px 크기 , line-height는 45px로 설정해 주었고 글꼴은 바탕으로 주었습니다.
그래서 결과화면을 보게 되면 라인 간격이 벌어진 것을 확인하실 수 있습니다.
2
font : bold italic 30px "돋움" ;
돋움체의 30px 크기로 굵기는 bold를 주고 글꼴은 itlic체를 주는 것을 설정하였습니다.
만약에 이러한 font 속성이 없을 경우에는 font-size,font-family라는 속성들을 계속 써줘야 합니다.
3~5
font : icon , menu , caption ;
특정 키워드를 입력할 경우에는 거기에 맞는 스타일이 적용이 됩니다.
저작자표시

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

[css3] text-decoration - 텍스트에 줄 표시  (0) 2021.03.29
[css3] color - 글자 색 지정  (0) 2021.03.26
[css3] font-style - 글자 스타일 지정  (0) 2021.03.24
[css3] font-weight - 글자 굵기 지정  (0) 2021.03.23
[css3] font-size - 글자 크기 조절  (0) 2021.03.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday