텍스트 관련 속성은 폰트의 크기 , 지정, 스타일 , 정렬등을 지정한다.
1.font-size 속성
텍스트의 크기를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
font-size : 16px;
}
h2{
font-size : 24px;
}
h3{
font-size : 32px;
}
</style>
<title>Document</title>
</head>
<body>
<h1>font-size : 16px</h1>
<h2>font-size : 24px</h2>
<h3>font-size : 32px</h3>
</body>
</html>
2.font-family 속성
폰트를 지정한다. 컴퓨터에 해당 폰트가 없다면 적용 X
- font-family
폰트는 여러개를 동시에 지정이 가능한데 첫번째 지정한 폰트가 없는경우 다음에 지정된 폰트를 적용한다. 따라서 마지막에는 대부분 기본적으로 설치되어 있는 Serif, Snas-serif , Monospace 를 지정하는 것이 국룰이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.serif {
font-family: "Times New Roman", Times, serif;
}
.sans-serif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Courier New", Courier, monospace;
}
</style>
<title>Document</title>
</head>
<body>
<p class="serif">Times New Roman font.</p>
<p class="sans-serif">Arial font.</p>
<p class="monospace">Courier New font.</p>
</body>
</html>
3.font-style / font-weight 속성
font-style 속성은 이탤릭체 , font-weight 속성은 폰트 굵기 지정에 사용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p { font-size: 2.0em; }
.italic {
font-style: italic;
}
.light {
font-weight: lighter;
}
.thick {
font-weight: bold;
}
.thicker {
font-weight: 900;
}
</style>
<title>Document</title>
</head>
<body>
<p>normal style.</p>
<p class="italic">font-style: italic</p>
<p class="light">font-weight: lighter</p>
<p class="thick">font-weight: bold</p>
<p class="thicker">font-weight: 900</p>
</body>
</html>
4. line-height 속성
텍스트의 높이를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.small {
line-height: 70%; /* 16px * 70% */
}
.big {
line-height: 1.2; /* 16px * 1.2 */
}
.biggest {
line-height: 3.0; /* 16px * 3 */
}
</style>
<title>Document</title>
</head>
<body>
<p>
default line-height.<br>
default line-height.<br>
default line height는 약 110% ~ 120%.<br>
</p>
<p class="small">
line-height: 70%<br>
line-height: 70%<br>
</p>
<p class="big">
line-height: 1.2<br>
line-height: 1.2<br>
</p>
<p class="biggest">
line-height: 3.0<br>
line-height: 3.0<br>
</p>
</body>
</html>
5. letter-spacing 속성
글자 사이의 간격을 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.big {
letter-spacing: 2px;
}
.small {
letter-spacing: -1px;
}
</style>
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="big">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</body>
</html>
6.text-align 속성
텍스트의 수평정렬을 정의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 { text-align: center; }
h3 { text-align: right; }
</style>
<title>Document</title>
</head>
<body>
<h1>CSS</h1>
<h3>2020.10.13</h3>
</body>
</html>
7.text-decoration 속성
text-decoration 속성을 사용하여 링크의 underline을 제거할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a { text-decoration: none; }
p:nth-of-type(1) { text-decoration: overline; }
p:nth-of-type(2) { text-decoration: line-through; }
p:nth-of-type(3) { text-decoration: underline; }
</style>
<title>Document</title>
</head>
<body>
<a href='#'>text-decoration: none</a>
<p>text-decoration: overline</p>
<p>text-decoration: line-through</p>
<p>text-decoration: underline</p>
</body>
</html>
