font-weight는 글자 굵기를 지정하는 속성
| 속성 | 설명 |
| normal | 일반적인 형태(기본값) |
| lighter | 일반 형태의 굵기보다 더 가늘게 |
| bold | 일반 형태보다 굵게 |
| bolder | 일반 형태보다 더 굵게 |
| 100~900 | 숫자 값을 통해 더 세밀하게 굵게 조절(400=normal , 700=bold) |
티스토리 뷰
1. 개념
font-weight - 글자 굵기 지정2. 태그
font-weighthtml5 코드
|
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
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' font-weight : lighter ;' >
lighter 굵기의 텍스트
</div>
2
<div style =' font-weight : normal ;' >
normal 굵기의 텍스트
</div>
3
<div style =' font-weight : bold ;' >
bold 굵기의 텍스트
</div>
4
<div style =' font-weight : bolder ;' >
bolder 굵기의 텍스트
</div>
5
<div style =' font-weight : 900 ;' >
900 굵기의 텍스트
</div>
</body>
</html>
|
결과 화면
코드 설명
1
font-weight : lighter ;
일반적인 형태인 normal에 비해서 더 가늘게 표현할 수 있는 형태의 속성입니다.
2
font-weight : normal ;
일반적인 형태의 굵기입니다.
보통 웹 브라우저에서 가장 흔하게 보는 형태의 굵기이겠죠
보통 웹 브라우저에서 가장 흔하게 보는 형태의 굵기이겠죠
3
font-weight : bold ;
normal에 비해서는 좀 굵지만 bolder에 비해서는 좀 얇은 형태의 굵기 형태입니다.
제목이나 강조하고 싶을 때 주로 사용되는 형태의 속성입니다.
제목이나 강조하고 싶을 때 주로 사용되는 형태의 속성입니다.
4
font-weight : bolder ;
bold에 비해서 더 굵게 표현한 것입니다.
결과 화면을 보면 아주 미세하게 차이가 나는 것을 확인하실 수 있습니다.
결과 화면을 보면 아주 미세하게 차이가 나는 것을 확인하실 수 있습니다.
5
font-weight : 900 ;
위에서와 같이 속성이 아닌 100~900 사이의 수치를 이용해 세밀하게 굵기를 표현하고자 할 경우에 사용합니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] font - 글꼴 속성 한꺼번에 표현 (0) | 2021.03.25 |
|---|---|
| [css3] font-style - 글자 스타일 지정 (0) | 2021.03.24 |
| [css3] font-size - 글자 크기 조절 (0) | 2021.03.22 |
| [css3] font-family - 텍스트 글꼴 지정 (0) | 2021.03.19 |
| [css3] prefixfree.min.js - 브라우저 접두사 편하게 사용 (0) | 2021.03.18 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday