CSS의 font-weight 속성은 요소 내 텍스트 문자의 굵기(boldness)를 지정하는 데 사용됩니다. 이 속성을 활용하면 일반 텍스트부터 매우 굵은 텍스트까지 다양한 두께를 표현할 수 있어, 문서의 위계 구조를 시각적으로 강조하는 데 유용합니다.
문법(Syntax)
CSS font-weight 속성의 기본 문법은 다음과 같습니다.
Selector {
font-weight: /*값*/
}font-weight에 사용할 수 있는 주요 값은 다음과 같습니다.
- normal – 기본 굵기 (400)
- bold – 굵게 (700)
- bolder – 부모 요소보다 더 굵게
- lighter – 부모 요소보다 더 얇게
- 100 ~ 900 – 숫자 값으로 세밀하게 조절 (100이 가장 얇고 900이 가장 굵음)
예제 1: 기본적인 font-weight 사용법
다음 예제는 서로 다른 font-weight 값을 적용한 결과를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 3px;
font-family: "Ink Free";
width: 30%;
font-size: 24px;
}
#one {
font-weight: normal;
border-bottom: 2px dashed greenyellow;
}
#two {
font-family: "Kristen ITC";
font-weight: bolder;
border-bottom: 2px dashed cornflowerblue;
}
#three {
font-weight: bold;
border-bottom: 2px dashed chocolate;
}
</style>
</head>
<body>
<div id="one">First Demo Text</div>
<div id="two">Another Demo Text</div>
<div id="three">Last Demo Text</div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 텍스트는 normal, 두 번째는 bolder, 세 번째는 bold 값이 적용되어 각각 다른 굵기로 표시됩니다.
예제 2: 숫자 값과 선택자 조합 활용
다음 예제는 속성 선택자와 함께 숫자 형태의 font-weight 값(100)을 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
[class|=lis] {
font-style: italic;
font-weight: bold;
}
li[class|="lis-ul"] {
background-color: cadetblue;
font-family: Helvetica;
font-weight: 100;
color: gainsboro;
width: 20%;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ol>
<li><p>C#</li>
<li class="lis-ul-2">DBMS</li>
<li class="lis-3">OS</li>
<li>Java</li>
<ul>
<li class="lis-ul-one">Core Java</li>
<li class="lis">Advance Java</li>
</ul>
</ol>
</body>
</html>실행 결과
위 코드를 실행하면 클래스 이름이 'lis'로 시작하는 항목에는 기울임꼴과 bold가 적용되고, 'lis-ul'로 시작하는 항목에는 아주 얇은 굵기(100)와 배경색이 함께 적용된 것을 확인할 수 있습니다.
정리
CSS font-weight 속성은 키워드(normal, bold, bolder, lighter)뿐만 아니라 100~900 사이의 숫자 값도 지원하기 때문에, 웹 폰트가 여러 굵기를 제공하는 경우 더욱 정교한 타이포그래피 연출이 가능합니다. 특히 최신 웹 디자인에서는 가변 폰트(Variable Font)와 함께 숫자 값을 활용해 세밀한 굵기 조절을 하는 경우가 많으니 참고하시기 바랍니다.