CSS - font
2020. 7. 27. 17:21ㆍWeb(CSS)
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font- </title>
<link href="font.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
</head>
<body>
<h1>font- 로 시작하는 글자 속성</h1>
<ul>
<li>font-size: ;글자 크기</li>
<li>font-weight: ;글자 두께</li>
<li>font-style: ;글자 기울기</li>
<li>font-family: ;글꼴(서체)</li>
</ul>
<div id="size">
<h1>1. font-size: ;글자 크기</h1>
<p class="fs01">font-size: 16px; (절대적)글자 크기</p>
<p class="fs02">font-size: 20px; 글자 크기</p>
<p class="fs03">font-size: 1em;
(상대적-부모의 영향)글자 크기</p>
<p class="fs04">font-size: 1.25em; 글자 크기</p>
<p class="fs05">font-size: 1rem;
(상대적-최상위 요소의 영향)글자 크기</p>
<p class="fs06">font-size: 1.25rem; 글자 크기</p>
<p class="fs07">font-size: 60%; (상대적-부모의 영향)글자 크기</p>
rem은 html의 요소에 영향을 받고 나머지엔 영향을 받지 않는다 !!!!!
</div>
<div>
<h1>2. font-weight: ;글자두께</h1>
<p class="fw01">font-weight: bold;글자 두께</p>
<p class="fw02">font-weight: bolder;글자 두께</p>
<p class="fw03">font-weight: lighter;글자 두께</p>
<p class="fw04">font-weight: 100;글자 두께</p>
<p class="fw05">font-weight: 200;글자 두께</p>
<p class="fw06">font-weight: 300;글자 두께</p>
<p class="fw07">font-weight: 400;글자 두께</p>
<p class="fw08">font-weight: 500;글자 두께</p>
<p class="fw09">font-weight: 600;글자 두께</p>
<p class="fw10">font-weight: 700;글자 두께</p>
<p class="fw11">font-weight: 800;글자 두께</p>
<p class="fw12">font-weight: 900;글자 두께</p>
<h2>원래 속성이 font-weight이 bold인 태그들</h2>
<h3>h3태그</h3>
<b>bold태그</b> <strong>strong태그</strong>
<table>
<tr>
<th>th태그</th>
<th class="fwn">th태그</th>
</tr>
</table>
</div>
<div id="style">
<h1>3. font-style: ;글자 기울기</h1>
<p class="fst01">font-style: italic;글자 기울기</p>
<p class="fst02">font-style: oblique;글자 기울기</p>
<p class="fst03">font-<i>style</i>: ;글자
<em>기울기</em></p>
</div>
<div id="family">
<h1>4. font-family: ;글꼴(서체)</h1>
<pre> Serif 와 Sans-serif Fonts의 차이
<a href="https://www.w3schools.com/css/css_font.asp"
target="_blank" title="www.w3schools.com의 serif설명">
<img alt="serif" src="img/serif.gif">
</a>
Serif 장식(serif)이 있는 서체
Snas-serif 장식(serif)이 없는 서체
</pre>
<p class="ffm01">font-family: "Georgia","Times New Roman",serif;글꼴(서체)</p>
<p class="ffm02">font-family: "Verdana","Arial",sans-serif;글꼴(서체)</p>
<p class="ffm03">font-family: "Lucida Console","Courier New", monospace;글꼴(서체)</p>
<h3>- google 웹폰트 -</h3>
<ol>
<li><a href="https://fonts.google.com/" target="_blank">
https://fonts.google.com/
</a>에 접속.</li>
<li>서체를 고름(종류,언어 등 선택가능)</li>
<li>고른 서체는 html문서의 <head> 안에 <link ...을 복붙하고</li>
<li>CSS rules의 속성과 속성값을 복붙</li>
<li style="font-size: small;list-style: none;margin-top: 0.5em;">
(* 3번과 4번은 구글웹폰트 페이지의 회색 박스영역에 있음)</li>
</ol>
<p class="ffm04">font-family: ;글꼴(서체)</p>
<p class="ffm05">font-family: ;글꼴(서체)</p>
<p class="ffm06">font-family: ;글꼴(서체)</p>
</div>
</body>
</html>
@charset "UTF-8";
/* html{font-size: 30px;}
rem 단위의 기준이 된 최상위 요소*/
h1{border: 4px double;
color: #333;
font-size: 40px;
font-weight: normal;
font-style: italic;
font-family: "돋움체","돋움","굴림체", sans-serif;}
div>h1{border: none;
border-bottom: 4px double;
font-size:30px;
font-style: normal;
font-family: 'Gugi', cursive;
color: #69d;}
h2{color: #acf;}
div{border: 2px solid #acf;
padding: 1em;
margin: 3em 1em;}
/*font-size*/
#size{font-size: 10px;}
.fs01{font-size: 16px;}
.fs02{font-size: 20px;}
.fs03{font-size: 1em;}
.fs04{font-size: 1.25em;}
.fs05{font-size: 1rem;}
.fs06{font-size: 1.25rem;}
.fs07{font-size: 60%}
/*font-weight*/
.fw01{font-weight: bold;}
.fw02{font-weight: bolder;}
.fw03{font-weight: lighter;}
.fw04{font-weight: 100;}
.fw05{font-weight: 200;}
.fw06{font-weight: 300;}
.fw07{font-weight: 400;}
.fw08{font-weight: 500;}
.fw09{font-weight: 600;}
.fw10{font-weight: 700;}
.fw11{font-weight: 800;}
.fw12{font-weight: 900;}
h3:hover{font-weight: normal;}
b:hover {font-weight: normal;}
strong:hover {font-weight: normal;
font-size: 18px;
color: #acf;}
/*:hover 마우스오버시의 상태를 지정하는
상태 선택자.*/
.fwn:hover{font-weight: normal;}
/* font-style*/
.fst01{font-style: italic;}
.fst02{font-style: oblique;}
i:hover{font-style: normal;}
.fst03:hover>i{
/* A >B자식선택자 (상위요소의 바로
아래에 속한 요소를 지정함)
A B자손 선택자(상위요소의 아래에
속한 모든 요소를 지정함)
*/
font-style: normal;
}
.fst03:hover >em{
font-style: normal;
}
/* font-family */
#family>pre{
width: 500px;
background-color: #ececec;
font-family: "맑은 고딕",sans-serif;
}
.ffm01{font-family: "Georgia","Times New Roman",serif;}
.ffm02{font-family: "Verdana","Arial",sans-serif;}
.ffm03{font-family: "Courier New","Lucida Console", monospace;}
/* https://fonts.google.com/
font-family: "Nanum Gothic",sans-serif;>
font-family: "Nanum Myeongjo",serif;
font-family: "Nanum pen Script", cursive;
font-family: 'Gugi', cursive;
*/
.ffm04{font-family: 'Nanum Pen Script',cursive;}
|
cs |
font를 적용시켜 보았는데 단위가 생소하다 보니 좀 어렵게 느껴졌다. em, px, rem 등이 있었다.
어려운 건 아니니 하나하나 적용시켜보며 익숙해져야겠다.
'Web(CSS)' 카테고리의 다른 글
| CSS - margin (0) | 2020.07.27 |
|---|---|
| CSS - text (0) | 2020.07.27 |
| CSS - basic (0) | 2020.07.27 |
| HTML -6-2 (0) | 2020.06.09 |
| HTML -6 (0) | 2020.06.09 |