[HTML기초] 9. Font 태그와 그 속성들 / font size, color, face
오늘 배울 태그와 그 내용
<font></font> : 폰트는 웹페이지의 정보를 효율적으로 전달할 수 있게 해주는 역할을 합니다.
글자크기, 글자색, 글자체 등을 지정할 때, 사용합니다.
<font>태그의 속성으로는 size, color, face 가 있으며, 그 내용은 아래와 같습니다.
font size : 폰트의 기본 값은 3이며 0~7사이의 숫자로 크기를 변화시킬 수 있습니다.
또한, px, pt등의 단위로 폰트 사이즈를 변경 가능합니다. px는 픽셀을 나타내며,
pt는 출력되는 포인트의 값으로 한글 프로그램에서 사용되어집니다.
폰트 사이즈 비교된 표를 아래에 첨부 하였습니다.
font color : 컬러 속성은 red, blue, yellow, black등 이름으로써 속성을 줄수도 있지만,
16진 색상코드(#000000)로 색상 속성을 줄 수 있습니다.
간단하게 색상을 찾을 때는, 아래 링크에서 찾아 보실 수 있습니다.
컬러픽커 : 바로가기
font face : 폰트의 글씨체를 바꿔주는 속성입니다.
FONT 태그 속성 내용과 설명
|
size |
<font size=5>내용</font> |
내용을 폰트 5사이즈로 변경 |
|
<font size=+1>내용</font> |
내용을 기본 폰트 사이즈 3에서 +1 만큼 변경 | |
|
<font size=-1>내용</font> |
내용을 기본 폰트 사이즈 3에서 -1 만큼 변경 | |
|
<font size=“15px”>내용</font> |
내용을 폰트 사이즈 15px 으로 변경 | |
|
<font size=“15pt”>내용</font> |
내용을 폰트 사이즈 15pt 으로 변경 | |
|
color |
<font color=“red”>내용</font> |
내용 색상을 “RED”로 변경 |
|
<font color=“#000000”>내용</font> |
내용 색상을 “16진수 색상코드”로 변경 | |
|
<font face=“돋움”>내용</font> |
내용 색상을 “돋움”체로 변경 | |
|
face |
폰트 사이즈 비교표
|
points (pt) |
pixels (px) |
ems (em) |
percent (%) |
|
6 |
8 |
0.5 |
50 |
|
7 |
9 |
0.55 |
55 |
|
8 |
11 |
0.7 |
70 |
|
9 |
12 |
0.75 |
75 |
|
10 |
13 |
0.8 |
80 |
|
11 |
15 |
0.95 |
95 |
|
12 |
16 |
1 |
100 |
|
13 |
17 |
1.05 |
105 |
|
14 |
19 |
1.2 |
120 |
|
15 |
21 |
1.3 |
130 |
|
16 |
22 |
1.4 |
140 |
|
17 |
23 |
1.45 |
145 |
|
18 |
24 |
1.5 |
150 |
|
20 |
26 |
1.6 |
160 |
|
24 |
32 |
2 |
200 |
|
28 |
37 |
2.3 |
230 |
실제 작성된 HTML코드
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>폰트 태그 연습</title>
</head>
<body>
<p><font size="1">폰트 사이즈 1 입니다.</font> </p>
<p><font size="2">폰트 사이즈 2 입니다.</font> </p>
<p><font size="3">폰트 사이즈 3 입니다.</font> </p>
<p><font size="4">폰트 사이즈 4 입니다.</font> </p>
<p><font size="5">폰트 사이즈 5 입니다.</font> </p>
<p><font size="6">폰트 사이즈 6 입니다.</font> </p>
<p><font size="7">폰트 사이즈 7 입니다.</font> </p>
<p><font color="red">폰트 색상 레드</font> </p>
<p><font color="blue">폰트 색상 블루</font> </p>
<p><font color="purple">폰트 색상 보라</font> </p>
<p><font face="돋움체">폰트 돋움체 사용</font></p>
<p><font face="궁서체">폰트 궁서체 사용</font>
<br><br><br>
<hr>
<h2> 복합적인 사용 </h2>
<p><font size="5"; color="red"; face="궁서체">
폰트 사이즈5, 컬러는 레드, 폰트는 궁서체 사용</font> </p>
</body>
</html>
실제 출력된 결과
'IT > HTML5' 카테고리의 다른 글
| HTML 태그의 정의와 사용방법 (0) | 2015.06.22 |
|---|---|
| [HTML기초] 8. HTML 기초 태그 / <code>,<samp>,<kbd>,<var> 태그 (0) | 2015.06.21 |
| [HTML기초] 7. HTML 기초 태그 / <sup>,<sub>,<mark>,<em> 태그 (0) | 2015.06.20 |
| [HTML기초] 6. HTML 기초 태그 / <i>,<strong>,<small>,<u>, <del> 태그 (0) | 2015.06.16 |
| [HTML기초] 4. HTML 기초 태그 <a href>, <a>, <br>, <img> 태그 (0) | 2015.06.15 |
| [HTML기초] 5.HTML기초 태그 / <p title>, <b>, <hr>, <pre> 태그 (0) | 2015.06.15 |
| [HTML기초] 3. HTML 기초 태그 <h>, <p> (0) | 2015.06.14 |
| [HTML기초] 2. HTML 에디터 / 메모장으로 작성하기 (0) | 2015.06.09 |
| [HTML기초] 1. HTML이란? (0) | 2015.06.08 |
