[CSS] 텍스트 (font-style, font-weight)
2021. 6. 22. 00:38
728x90
01 font-style
- 주로 이탤릭체를 사용하기 위해 사용.
h1{
font-style: 'italic';
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>텍스트 디자인</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
h1{
font-style: italic;
}
</style>
</head>
<body>
<h1>텍스트 디자인</h1>
<p>폰트 - font - 1</p>
<p>폰트 - font - 2</p>
</body>
</html>
02 font-weight
- 텍스트의 두께를 설정.
- 사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있음.
- 또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수 있음.
h1{
font-weight: 'bold';
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>텍스트 디자인</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
p{
font-weight: bold;
}
</style>
</head>
<body>
<h1>텍스트 디자인</h1>
<p>폰트 - font - 1</p>
<p>폰트 - font - 2</p>
</body>
</html>728x90
'CSS > Study' 카테고리의 다른 글
| [CSS] 텍스트 (word-spacing, letter-spacing) (1) | 2021.06.27 |
|---|---|
| [CSS] 텍스트 (text-align, text-decoration) (1) | 2021.06.27 |
| [CSS] 텍스트 (font-size) (1) | 2021.06.22 |
| [CSS] 텍스트 (font-family, <link>, @font-face) (1) | 2021.06.22 |
| [CSS] 선택자 (전체 선택자 "*", 태그 선택자, 아이디 선택자"#", 클래스 선택자".", 그룹 선택자) (1) | 2021.06.22 |
