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

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

 

 글자 굵게 만들기 

font-weight 종류

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

 

font-weight 속성 값

  • 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> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.

 

CSS 처리

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

 

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

댓글

Designed by JB FACTORY