[HTML/CSS] 글자 굵기 변경하기 (font-weight)

웹 문서를 만들다보면 CSS로 글자를 굵게 만들어야 할 경우가 생길 수 있겠죠? 이번 포스팅에서는 CSS로 텍스트를 굵기를 변경하는 방법에 대해 알아보도록 하겠습니다.

글자 굵게 만들기

See the Pen 글자 굵게 by wjdxo513 (@wjdxo513) on CodePen.

font-weight : normal; = 보통 굵기로 설정합니다. (숫자 400과 같은 값입니다)
font-weight : bold; = 굵은 굵기로 설정합니다. (숫자 700과 같은 값입니다)
font-weight : bolder; = 상속된 값보다 굵은 굵기입니다.
font-weight : lighter; = 상속된 값보다 얇은 굵기입니다.
font-weight : initial; = 기본값으로 설정합니다.
font-weight : inherit; = 부모 요소의 값을 상속 받습니다.
font-weight : number; = 100, 200, 300, 400, 500, 600, 700, 800, 900의 굵기로 설정합니다.

※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.

See the Pen 글자 굵게2 by wjdxo513 (@wjdxo513) on CodePen.

CSS로 처리하면 위와 같이 됩니다.

[HTML/CSS] 대/소문자 변경하기 (text-transform) (1)	2023.01.16
[HTML/CSS] 텍스트 이탤릭체, 밑줄, 취소선 적용하기 (1)	2023.01.15
[HTML/CSS] 글자색 변경하기 (font-color) (1)	2023.01.13
[HTML/CSS] 글자 크기 조절하기 (font-size) (1)	2023.01.12