<style>
font-weight: normal; <!--보통 굵기입니다. 400과 같습니다-->
font-weight: bold; <!--보통 굵기입니다. 700과 같습니다-->
font-weight: bolder; <!--상속된 값보다 굵은 굵기가 됩니다-->
font-weight: lighter; <!--상속된 값보다 얇은 굵기가 됩니다-->
font-weight: initial; <!--기본값으로 설정됩니다-->
font-weight: inherit; <!--상위(부모) 요소의 속성값을 됩니다-->
font-weight: 100; <!--숫자로 표기하여 굵기를 정합니다-->
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
</style>
- normal : 보통 굵기입니다. 숫자 400과 같습니다.
- bold : 굵은 굵기입니다. 숫자 700과 같습니다.
- bolder : 상속된 값보다 굵은 굵기입니다.
- lighter : 상속된 값보다 얇은 굵기입니다.
- number : 100, 200, 300, 400, 500, 600, 700, 800, 900
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
<b> 태그
<body>
<b>이런식으로 b태그로 감싸면 bold효과를 낼수도 있습니다.</b>
</p>중간에 껴서 <b>사용도</b> 가능합니다.</p>
</body><strong> 태그
<body>
<strong> strong태그도 b태그와 마찬가지 입니다.</strong>
</body>예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.ft-normal {
font-weight: normal;
}
.ft-bold {
font-weight: bold;
}
.ft-100 {
font-weight: 100;
}
.ft-200 {
font-weight: 200;
}
.ft-300 {
font-weight: 300;
}
.ft-400 {
font-weight: 400;
}
.ft-500 {
font-weight: 500;
}
.ft-600 {
font-weight: 600;
}
.ft-700 {
font-weight: 700;
}
.ft-800 {
font-weight: 800;
}
.ft-900 {
font-weight: 900;
}
</style>
</head>
<body>
<p class="ft-normal">font-weight normal</p>
<p class="ft-bold">font-weight bold</p>
<p class="ft-100">font-weight 100</p>
<p class="ft-200">font-weight 200</p>
<p class="ft-300">font-weight 300</p>
<p class="ft-400">font-weight 400</p>
<p class="ft-500">font-weight 500</p>
<p class="ft-600">font-weight 600</p>
<p class="ft-700">font-weight 700</p>
<p class="ft-800">font-weight 800</p>
<p class="ft-900">font-weight 900</p>
<p>font <b>test</b> 1</p>
<p><strong>font</strong> test 2</p>
</body>
</html>
반응형
'Web Code > CSS' 카테고리의 다른 글
| [CSS] 커스텀 셀렉트박스 디자인 / Custom Select Design (0) | 2021.02.24 |
|---|---|
| [CSS] 마진 과 패딩 차이 / Padding 과 Margin 차이 (0) | 2020.08.16 |
댓글