CSS font-weight 속성이란?
CSS의 font-weight 속성은 글꼴의 굵기를 지정할 수 있는 기능을 제공합니다. 이 속성을 활용하면 텍스트를 더 굵게 또는 더 얇게 표현하여 문서의 강조점을 조절하고 가독성을 높일 수 있습니다.
사용 가능한 값
font-weight 속성에 사용할 수 있는 값은 다음과 같습니다.
- 키워드 값: normal(보통), bold(굵게), bolder(더 굵게), lighter(더 얇게)
- 숫자 값: 100, 200, 300, 400, 500, 600, 700, 800, 900
참고로 숫자 값에서 400은 일반적인 굵기(normal)에 해당하며, 700은 bold와 같습니다. 숫자가 클수록 글자가 더 굵게 표시됩니다.
예제 코드
<html> <head> </head> <body> <p style = "font-weight:bold;">This font is bold.</p> <p style = "font-weight:bolder;">This font is bolder.</p> <p style = "font-weight:400;">This font is 500 weight.</p> </body> </html>
코드 설명
위 예제는 세 개의 문단에 각각 다른 font-weight 값을 적용한 것입니다.
- 첫 번째 문단은 bold를 적용하여 일반적인 굵은 글씨로 표시됩니다.
- 두 번째 문단은 bolder를 적용하여 부모 요소보다 한 단계 더 굵은 글씨로 표시됩니다.
- 세 번째 문단은 400이라는 숫자 값을 적용하여 보통 굵기의 글씨로 표시됩니다.
이처럼 font-weight 속성을 사용하면 키워드와 숫자 값 두 가지 방식으로 글꼴의 굵기를 세밀하게 조절할 수 있으며, 웹페이지 타이포그래피 디자인에서 중요한 역할을 합니다.