▣ font
· 글자 관련 속성들을 지정한다.
| 속성 값 | 의미 | 기본값 |
| font-style | 글자 기울기 지정 | normal |
| font-weight | 글자 두께 지정 | normal |
| font-size | 글자 크기 지정 | medium(16px) |
| line-hight | 줄 높이(줄 간격)지정 | normal |
| font-family | 글꼴(서체)지정 | 운영체제(브라우저)에 따라 달라짐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font: italic bold 20px / 1.5 "Arial", sans-serif;
}
</style>
</head>
<body>
<div>안녕하세욤!</div>
</body>
</html>
▣ font-weight
· 글자 두께를 지정한다.
| 속성값 | 의미 |
| normal | 기본 글자 두께, 400과 동일 |
| blod | 글자 두껍게, 700과 동일 |
| bolder | 부모 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님) |
| lighter | 부모요소보다 더 얇게 |
| 숫자 | 100부터 900까지의 100단위의 숫자 9개, normal과 bold이외의 두께를 제공하는 글꼴을 위한 설정 |
▣ line-height
· 줄 높이를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
line-height: 32px;
}
</style>
</head>
<body>
<div>안녕하세욤 <br>저는 오늘도 열심히<br>
하고있습니당! </div>
</body>
</html>
▣ font-family
· 글꼴 지정
| 글꼴 계열 | 의미 |
| serif | 바탕체 계열 |
| sans-serif | 고딕체 계열 |
| monospace | 고정너비 글꼴 계열 |
| cursive | 필기체 계열 |
| fantasy | 장식 글꼴 계열 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
<title>Document</title>
<style>
.serif {
font-family: serif;
}
.sans-serif {
font-family: sans-serif;
}
.monospace {
font-family: monospace;
}
.cursive {
font-family: cursive;
}
.Dancing Script {
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
</style>
</head>
<body>
<div class="serif">Hello world!</div>
<div class="sans-serif">Hello world!</div>
<div class="monospace">Hello world!</div>
<div class="cursive">Hello world!</div>
<div class="Dancing Script">Hello world!</div>
</body>
</html>
▣ color
· 문자의 색상을 지정
▣ text-align
· 문자 정렬 방식을 지정
| 속성값 | 의미 | 기본값 |
| left | 왼쪽 정렬 | default |
| right | 오른쪽 정렬 | |
| center | 가운데 정렬 | |
| justify | 양쪽 맞춤 | 한줄에서는 동작하지 않는다. |
▣ text-decoration
· 문자 장식을 설정
| 속성값 | 의미 |
| none | 선없음 |
| underline | 밑줄을 지정 |
| overline | 윗줄을 지정 |
| line-through | 중앙 선(취소선)을 지정 |
▣ text-indent
· 문단의 시작점에 들여쓰기를 지정
· text-indent : 10px; 10px만큼 들여쓰기가 된다. -10px하면 내어쓰기가 된다.
▣ letter-spacing
· 문자의 자간을 설정
· letter-spacing: 10px; 글자사이의 간격이 10px만큼 벌어짐
▣ word-spacing
· 단어 사이의 간격을 설정
· word-spacing: 10px; 단어사이의 간격이 10px만큼 벌어짐
▣ white-space
· normal, nowarp, pre, · · ·
· normal : 기본값, 자동 줄바꿈, 연속된 공백은 하나로 합침
· nowarp : 줄바꿈 안함, 모든 텍스트가 한줄에 표시됨
· pre : 공백 / 줄바꿈을 그대로 유지