스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법

HTML

스타일 시트 CSS 강좌 - font-weight 사용법

 

환경: Eclipse Mars

 

글자의 두께는 폰트 크기처럼 숫자를 이용해서 아주 디테일 하게 조절할 수 없습니다. 그렇게 되면 폰트가 깨지기 때문에 크게 4가지로 세분화 하고 있습니다. 그런데 거의 대부분의 폰트는 실제로 두 가지 두께만 적용이 됩니다.

 

글자의 두께를 조절하기 위한 구분은 총 4가지가 있습니다. lighter, normal, bold, bolder 로 나눠 지는데 실제 적용은 두 가지로만 구분이 됩니다. 그러니까 lighter, normal bold, bolder 은 쌍으로 동일한 크기를 가집니다. 아래 샘플에서처럼 차이가 없죠.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>font-weight</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontweight1 {font-size:20pt; font-weight: normal;}
	#fontweight2 {font-size:20pt; font-weight: lighter;} 
	#fontweight3 {font-size:20pt; font-weight: bold;} 
	#fontweight4 {font-size:20pt; font-weight: bolder;} 
</style>
</head>
<body>
	<p id="fontweight1">CSS font-weight normal 적용 시키기 </p>
	<p id="fontweight2">CSS font-weight lighter 적용 시키기 </p>
	<p id="fontweight3">CSS font-weight bold   적용 시키기 </p>
	<p id="fontweight4">CSS font-weight bolder 적용 시키기 </p>
</body>
</html>

 

스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법

 

이번에는 숫자로 값을 넣어 보겠습니다. 숫자는 100 ~ 900 사이 입니다. 글자 두께를 조절하는 4개의 상수 값에 해당하는 숫자 값은 다음과 같습니다. lighter, normal, bold, bolder 는 차례대로 100, 400, 700, 900 값에 해당합니다. 숫자도 상수와 마찬가지로 크게 두 가지 두께만 변동이 됩니다. lighter, normal bold, bolder 는 변화 없이 동일하게 적용됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>font-weight</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontweight1 {font-weight: normal;}
	#fontweight2 {font-weight: lighter;} 
	#fontweight3 {font-weight: bold;} 
	#fontweight4 {font-weight: bolder;} 
	 
	#fontweight5 {font-weight: 100;}
	#fontweight6 {font-weight: 400;}
	#fontweight7 {font-weight: 700;}
	#fontweight8 {font-weight: 900;}
	
</style>
</head>
<body>
	<p id="fontweight1">CSS font-weight normal 적용 시키기 </p>
	<p id="fontweight2">CSS font-weight lighter 적용 시키기 </p>
	<p id="fontweight3">CSS font-weight bold   적용 시키기 </p>
	<p id="fontweight4">CSS font-weight bolder 적용 시키기 </p>
	<p id="fontweight5">CSS font-weight 100 적용 시키기 </p>
	<p id="fontweight6">CSS font-weight 400 적용 시키기 </p>
	<p id="fontweight7">CSS font-weight 700 적용 시키기 </p>
	<p id="fontweight8">CSS font-weight 900 적용 시키기 </p>
</body>
</html>

스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법

 

Posted by 녹두장군