font
- font의 형태
- 폰트지정 : 폰트 지정에서는 첫번째에 지정되어있는 폰트가 없을시 두번째, 세번째로 지정이 된다
- 포괄적인 폰트지정 : 포괄적인 폰트 지정은 서체의 종류를 지정하는 것이다. 서체의 종류는 총 5가지가 있다.
- 포괄적인 폰트지정
| 종류 | 설명 | example |
|
serif |
글씨에 꺽쇠가 붙어져 있는 서체 |  |
|
sans-serif |
sans는 없음을 뜻하고 국내에선 고딕체와 같은 것이 이에 해당된다. |
 |
|
cursive |
필기체 같은 형태이다. |  |
|
fantasy |
일반적 서체가 아닌 개성이 있고 장식성이 많은 서체이다. |  |
|
monospace |
고정폭 서체이다 모든 글씨의 폭을 동일하게 만들어준다. |
 |
각각의 서체의 종류를 실행해 보았다.
|
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
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>font-size</title>
<style>
#serif
{
font-size: 10rem;
color: red;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, serif;
}
#sans-serif
{
font-size: 10rem;
color: coral;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
}
#cursive
{
font-size: 10rem;
color: yellow;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, cursive;
}
#fantasy
{
font-size: 10rem;
color: green;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, fantasy;
}
#monospace
{
font-size: 10rem;
color: blue;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, monospace;
}
</style>
</head>
<body>
<li id="serif">serif</li>
<li id="sans-serif">ans-serif</li>
<li id="cursive">cursive</li>
<li id="fantasy">fantasy</li>
<li id="monospace">monospace</li>
</body>
</html>
|
cs |
음 뭐가 문젠진 모르겠으나 다 똑같아 보인다 ㅋㅋㅋㅋ
font-weight / bold
폰트의 두께를 나타낸다.
대체로 bold만 기억하면 된다. (bold를 사용하면 폰트가 두껍게 표시된다.)
|
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
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>font-size</title>
<style>
#serif
{
color: red;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, serif;
font-weight: bold;
}
#sans-serif
{
color: coral;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
font-weight: 100;
}
#cursive
{
color: yellow;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, cursive;
}
#fantasy
{
color: green;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, fantasy;
}
#monospace
{
color: blue;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, monospace;
font-weight: 900;
}
</style>
</head>
<body>
<li id="serif">serif</li>
<li id="sans-serif">ans-serif</li>
<li id="cursive">cursive</li>
<li id="fantasy">fantasy</li>
<li id="monospace">monospace</li>
</body>
</html>
|
cs |
line-height
행과 행 사이의 높이 값을 지정해주는것!
|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>font-size</title>
<style>
#serif
{
color: red;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, serif;
font-weight: bold;
line-height: 2;
}
#sans-serif
{
color: coral;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
font-weight: 100;
line-height: 2;
}
#cursive
{
color: yellow;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, cursive;
line-height: 2;
}
#fantasy
{
color: green;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, fantasy;
line-height: 2;
}
#monospace
{
color: blue;
text-align: left;
font-family: Arial, Verdana, Arial, Helvetica, monospace;
font-weight: 900;
line-height: 2;
}
</style>
</head>
<body>
<li id="serif">serif</li>
<li id="sans-serif">ans-serif</li>
<li id="cursive">cursive</li>
<li id="fantasy">fantasy</li>
<li id="monospace">monospace</li>
</body>
</html>
|
cs |
참조
'개발 > CSS' 카테고리의 다른 글
| [CSS] CSS font-size / em과 rem의 차이 / color / text-align (0) | 2020.06.08 |
|---|---|
| [CSS] CSS font-size / em과 rem의 차이 / color / text-align (0) | 2020.06.08 |
| [CSS] Reset CSS 사용하기 / reset css 란? / 자주 사용되는 css reset (0) | 2020.05.27 |
| [CSS] HTML과 CSS의 연동 (Link style / Embedding style / inline style ) (0) | 2020.05.27 |
| [CSS3] Css Rule / CSS Rule set / CSS Selector (0) | 2020.05.27 |
