스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기

스타일시트 CSS

스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기

 

환경: Eclipse Mars

 

웹 페이지는 텍스트와 이미지가 전부 라고 해도 과언은 아니죠. 그래서 텍스트를 꾸미는 font 관련 속성들은 많이 사용할 수 밖에 없습니다. 자신만의 스타일을 살려 웹 페이지를 구성하고 싶다면 필히 속성에 대해서 알아야겠죠. 이번에는 텍스트의 글꼴, 글자 크기, 굵기, 색상, 모양 등을 지정하는 속성에 대해 알아 보겠습니다.

 

글꼴 관련 속성은 다음과 같습니다. 상세 내용은 개별 속성에서 다루기로 하고 어떻게 사용하는 지와 적용되는 형태에 대해 간략하게 알아 보겠습니다.

 

l  font-family : 글꼴 종류를 지정합니다. 여러 글꼴을 동시에 지정할 수 있으며 순서대로 적용이 됩니다. 앞에 있는 폰트가 PC 에 설치되어 있지 않으면 다음으로 넘어갑니다.

l  font-size : 다양한 단위로 글자 크기를 지정할 수 있으며 상수 값으로 지정할 수도 있습니다. 상수값은 xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger 이 있습니다.

l  font-style : 글자 모양을 나타내며 normal, italic, oblique 가 있습니다.

l  font-variant : 작은 크기의 대문자로 지정합니다.

l  font-weight : 글자의 굵기를 지정합니다. 100~900 사이 값을 넣을 수 있으며 상수로는 normal, bold, bolder, lighter 이 있습니다.

l  color : 접두어 font 가 없지만 글자색을 지정하는 속성입니다.

 

아래 샘플은 4개의 div 태그에 font 속성들을 적용했습니다. 첫 번째 font-family 는 입력한 3개의 폰트 중 앞에서 부터 차례대로 시스템에 설치된 것 부터 먼저 적용됩니다. 두 번째 font-size 는 브라우저에 기본으로 설정된 폰트의 150% 크기로 적용합니다. 세 번째 font-variant 에서 small-caps 는 알파벳을 대문자로 바꾸고 작게 표현합니다. 그림을 보면 쉽게 이해가 갈 겁니다. 네 번째 font-size ex 단위는 폰트 사이즈의 소문자 “x” 높이를 1로 했을 때 크기 입니다. 현재 시스템 폰트 12pt 의 소문자 x 크기 입니다. font-weight bold 처리로 글자를 굵게 표시했습니다. 그리고 폰트의 색상은 font-color 이 아니라 color 입니다. 헷갈리지 마세요.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		border: solid;
		border-color: black;
		background-color: #4e539a;
		margin-top: 5px;
		padding: 5px;
		color: white;
		height: 50px;
		width: 500px;
	}
	#div1{
		font-family: arial, 바탕체, serif;
	}
	#div2{
		font-size: 150%;
		font-style: italic;
	}
	#div3{
		font-variant: small-caps;
		font-style: oblique;
	}
	#div4{
		font-size: 1ex;
		font-weight: bord; 
		color: red;
	}
	
</style>
</head>
<body>
	<div id="div1">폰트 속성 : font-family</div>
	<div id="div2">폰트 속성 : font-size, font-style</div>
	<div id="div3">폰트 속성 : font-variant, font-style</div>
	<div id="div4">폰트 속성 : color, font-weight</div>
</body>
</html>

 

스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군