스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법

 

환경: Eclipse Mars

 

CSS 에서 폰트 사이즈를 조절하려면 font-size 속성을 사용해야 합니다. <font> 태그의 size 속성과 동일한 효과를 얻을 수 있습니다. font-size 에 쓰이는 단위는 아주 다양합니다. pt, px, em, % 뿐만 아니라 상수 값도 있습니다. color 속성처럼 16진수 코드를 컬러 명으로 정의한 것처럼 숫자 대신 상수 값으로 대체가 가능합니다.

 

먼저 % 단위로 사이즈를 조절하는 방법입니다. 샘플에서 100%, 200%, 250% 적용했는데 100% 가 기본 Default 폰트 사이즈입니다. % 에는 마이너스가 없기 때문에 기본 폰트 사이즈에서 100% 이하를 입력하면 줄어 듭니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontsize1 {font-size: 100%;} 
	#fontsize2 {font-size: 200%;} 
	#fontsize3 {font-size: 250%;} 
	
</style>
</head>
<body>
	<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
	<p id="fontsize2">CSS font-size 200% 적용 시키기 </p>
	<p id="fontsize3">CSS font-size 250% 적용 시키기 </p>
</body>
</html>

 

스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법

 

다음은 %, pt, px 단위로 비교해 보았습니다. 사이즈 기준은 % 로 하겠습니다. 기본 폰트 크기인 100% 12pt 16px 입니다. 브라우저에서 사용자가 폰크 크기를 변경하지 않으면 기본 폰트인 12pt 를 적용합니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontsize1 {font-size: 100%;} 
	#fontsize2 {font-size: 12pt;} 
	#fontsize3 {font-size: 16px;} 
	
</style>
</head>
<body>
	<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
	<p id="fontsize2">CSS font-size 10pt 적용 시키기 </p>
	<p id="fontsize3">CSS font-size 12px 적용 시키기 </p>
</body>
</html>

스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법

 

아래 소스는 숫자 대신 쓰이는 상수를 사용하는 방법입니다. 상수란 값이 변하지 않는 변수를 말합니다. 특정한 숫자를 사용자가 알기 쉽게 의미있는 문자로 만든 것입니다. 분류는 small, large, medium 으로 나눠 지며 접두사로 x xx 를 사용해서 좀 더 세분화 합니다. 일일이 변수들을 다 외울 수 없기 때문에 잘 쓰이지는 않습니다. 가장 많이 사용하는 것이 pt 단위죠. 아마 개발자들 사이에서는 가장 익숙할 겁니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontsize1 {font-size: 100%;} 
	#fontsize2 {font-size: 12pt;} 
	#fontsize3 {font-size: 16px;} 
	#fontsize4 {font-size:xx-small;} 
	#fontsize5 {font-size:8pt;}
	#fontsize6 {font-size:10pt;}
	#fontsize7 {font-size:12pt;}
	#fontsize8 {font-size:14pt;}
	#fontsize9 {font-size:18pt;}
	#fontsize10{font-size:24pt;}
	#fontsize11{font-size:10pter;}
	#fontsize12{font-size:14ptr;}
	#fontsize13{font-size:initial;}
</style>
</head>
<body>
	<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
	<p id="fontsize2">CSS font-size 12pt 적용 시키기 </p>
	<p id="fontsize3">CSS font-size 12px 적용 시키기 </p>
	<hr/>
	<p id="fontsize4">CSS font-size xx-small 적용 시키기 </p>
	<p id="fontsize5">CSS font-size x-small 적용 시키기 </p>
	<p id="fontsize6">CSS font-size small 적용 시키기 </p>
	<p id="fontsize7">CSS font-size medium 적용 시키기 </p>
	<p id="fontsize8">CSS font-size large 적용 시키기 </p>
	<p id="fontsize9">CSS font-size x-large 적용 시키기 </p>
	<p id="fontsize10">CSS font-size xx-large 적용 시키기 </p>
	<p id="fontsize11">CSS font-size smaller 적용 시키기 </p>
	<p id="fontsize12">CSS font-size larger 적용 시키기 </p>
	<p id="fontsize13">CSS font-size initial 적용 시키기 </p>
</body>
</html>

스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법

 

Posted by 녹두장군