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

HTML

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

 

환경: Eclipse Mars

 

글자의 크기는 숫자로 조절이 가능하지만 두께는 디테일 하게 조절할 수 없습니다. 폰트의 두께를 구분하는 font-weight 속성은 lighter, normal, bold, bolder  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 녹두장군