[CSS][font] font-weight
[CSS][font] weight
요약설명
- 폰트의 굵기를 변경시켜주는 속성입니다.
심화설명
font-weight 속성 / 표기법 (font-weight:normal)
기본값(default)는 normal로 되어 있으며 weight을 구성하는 속성은 아래 표와 같습니다.
속성 종류 | |||
normal |
bold |
bolder |
lighter |
number |
initial |
inherit |
|
normal : 기본값이며 보통 굵기입니다. 숫자 400과 같습니다.
bold : 굵은 굵기입니다. 숫자 700과 같습니다.
bolder : 상속된 값보다 굵은 굵기입니다. 숫자 900과 같습니다.
(부모의 값을 상속받아 더 굵은 굵기를 표현하지만 bolder을 적용한 태그의 자식에는 상속되지 않음.)
lighter : 상속된 값보다 얇은 굵기입니다. 숫자 100과 같습니다
(부모의 값을 상속받아 더 굵은 굵기를 표현하지만 lighter을 적용한 태그의 자식에는 상속되지 않음.)
number : 100, 200, 300, 400, 500, 600, 700, 800, 900으로 나눠져있어 원하는 굵기를 선택할 수 있습니다.
initial : 기본값으로 설정합니다.
inherit : 부모의 굵기 속상을 상속받습니다.
표기법
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>font-weight 예제</title>
<style>
*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
#wrap{width: 1170px;margin: auto;}
.size_normal{
font-weight: normal;
}
.size_lighter{
font-weight: lighter;
}
.size_bold{
font-weight: bold;
}
.size_100{
font-weight: 100;
}
.size_200{
font-weight: 200;
}
.size_300{
font-weight: 300;
}
.size_400{
font-weight: 400;
}
.size_500{
font-weight: 500;
}
.size_600{
font-weight: 600;
}
.size_700{
font-weight: 700;
}
.size_800{
font-weight: 800;
}
.size_900{
font-weight: 900;
}
</style>
</head>
<body>
<div id="wrap">
<div class="font-Gothic">
<p class="size_normal">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_lighter">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_bold">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_100">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_200">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_300">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_400">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_500">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_600">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_700">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_800">Welcome to my blog - Lorem lpsum Dolor</p>
<p class="size_900">Welcome to my blog - Lorem lpsum Dolor</p>
</div>
</div>
</body>
</html>
결과
※특징
글꼴에 따라 굵기가 각각 다 다르고, 폰트는 기본적으로 상속의 특성을 갖고있는 프로퍼티라 사용할때 항상 생각하면서 사용 해주셔야 합니다.