css font-weight

css font-weight


■ 텍스트 관련 스타일은 여러 종류가 있지만, 이번 글에서는 font-weight 속성에 대해서 알아보겠습니다. 이 속성은 글자의 굵기를 지정해주는 역할을 하는데요. 사용하는 형식은 다음과 같습니다. 


font-weight : 속성값;


■ 이때 사용할 수 있는 속성값은 다음과 같습니다. 


1. normal : 일반적인 글자의 굵기입니다. 

2. bold : 진하게 표시하는 속성값이구요. 

3. lighter : 원래보다 연하게 표시하는 속성값입니다.

4. bolder : 원래보다 진하게 표시하는 값입니다.

5.100~900 사이의 숫자 : 숫자를 입력해서 표시할 수도 있는데요. 400이 보통이고 700이 진하게 입니다.


■ 이 속성값들을 하나씩 적용해서 출력되는 굵기를 비교해보겠습니다. 앞에서 알아본 모든 속성값을 넣어볼 건데요. 대부분의 글꼴이 normal과 bold 만 지원하기 때문에 여러 가지 속성값을 지정해도 보통과 굵게만 표시가 되네요. 저도 그렇지만 대부분 normal과 bold만 사용하는 게 일반적이잖아요. 그래도 이런 속성들이 있다는 정도만 알고 계시고, 예제를 만들어보겠습니다. 


 간단한 내용이라서 메모장에 html 문서를 만들고 head 태그 안에 style 태그를 넣어서 속성을 지정해봤습니다.

  각각의 속성값이 어떻게 출력되는지 확인해보고 마무리할게요.


 이렇게 속성값을 모두 다르게 했지만 normal과  bold 속성값이 적용되는 걸 확인할 수 있습니다. 간단한 내용이니까 여러분이 사용하시는 글꼴에도 각각의 속성값을 적용해서 확인해보셔요. 수고하셨습니다.