스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기

 

환경: Eclipse Mars

 

CSS 속성과 값을 사용하는데 있어서 가장 많이 등장하는 것이 값과 함께 쓰이는 단위일 것입니다. width, height, font-size 등 수치를 결정해야 되는 속성에는 모두 들어가죠. 이런 단위들을 제대로 알지 못한다면 제대로 된 개발을 하기 힘듭니다. 크게 단위는 절대단위와 상대단위로 나눠집니다. 이름에서 알수 있듯이 상대단위는 기준이 되는 시스템 설정 값에 따라 달라지는 것입니다. 절대단위는 국제규격에 맞는 실제 크기입니다.

 

¤ 절대단위

 

▼ 절대 단위는 규격이 정해져 있습니다. 각 단위들 끼리 값 변환이 가능합니다. 화면에서 보이는 것처럼 숫자 15로 각 단위를 붙였을 때 길이 값이 어떻게 변하는지 표현해 보았습니다. 15인치면 38.1cm 니까 제일 기네요. pt 는 문자의 크기 지정할 때 많이 쓰입니다. 기본 시스템 폰트 크기는 12pt 입니다. pt px 를 많이 헷갈려 하시는데 px 는 해상도에 따라 달라지는 상대단위입니다.

 

l  cm : 센티미터입니다.

l  mm : 밀리미터입니다. cm 1/10 이죠.

l  pt(포인트) : 1pt 1/72 in 이며 문자 크기 지정할 때 사용합니다.

l  in(인치) : 1in 2.54cm 입니다.

l  pc(파이커) : 1pc 12 pt 입니다


스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기


¤ 상대단위

 

▼ 요즘 들어서 절대단위가 아닌 상대단위가 많이 쓰이는 이유는 아주 다양한 플랫폼들이 등장했기 때문입니다. 예를 들어 스마트폰만 해도 해상도와 기기별로 천차만별입니다. 이런 시스템에 유동적으로 적용하기 위해서는 상대단위가 필수적이죠. 만약 절대단위로 했다면 해상도는 큰데 글자가 작게 보이는 어울리지 않은 형태의 웹 페이지가 만들어 집니다. 그래서 pt 보다 px 를 많이 사용하게 됩니다.

 

l  px(픽셀) : 해상도에 따라 달라집니다.

l  % : 브라우저 기본 글꼴 크기를 100% 하고 상대적 크기를 나타냅니다.

l  em : 브라우저 기본 글꼴 크기를 1em 하고 상대적 크기를 나타냅니다.

l  ex : 소문자 x 의 높이를 1로 합니다.

 

▼ 아래 샘플은 폰트의 크기를 4가지 단위로 표현해 보았습니다. 현재 해상도에서 기본은 16px 가 됩니다. 해상도가 높아지면 더 커지겠죠. 그리고 1em 100% 는 기본 브라우저 폰트의 크기와 같습니다. 그러니까 1em 을 기준으로 값을 조절하시면 기본 크기에서 상대적으로 폰트 크기 조절이 가능한 것입니다. 16px = 1em = 100% 가 됩니다. 마지막 ex 16px 일때 소문자 x 의 높이 값입니다

<!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-size: 16px;}
	#div2{font-size: 100%;}
	#div3{font-size: 1em;}
	#div4{font-size: 1ex;}
	
</style>
</head>
<body>
	<div id="div1">폰트 크기를 지정하는 단위: 16px</div>
	<div id="div2">폰트 크기를 지정하는 단위: 100%</div>
	<div id="div3">폰트 크기를 지정하는 단위: 1em</div>
	<div id="div4">폰트 크기를 지정하는 단위: 1ex</div>
</body>
</html>

스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기



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