스타일 시트 CSS px(pixel) -> em 단위 변환 표

스타일시트 CSS

스타일 시트 CSS px(pixel) -> em 단위 변환 표

 

환경: Eclipse Mars, CSS5

 

보통 HTML 구현할 때 쓰는 단위는 px 픽셀입니다. 간혹 % 와 유사한 표현인 em 을 사용하기도 합니다. em %(persent) 를 좀더 간단하게 표현할 수 있도록 만든 단위 입니다. 그러니까 em 0 ~ 1 사이의 실수 값이 % 0% ~ 100% 사이 값입니다. 0.3125em 31.25% 를 뜻합니다. 이런 em px 로 변환할 때 참고할 수 있는 표를 소개합니다. 

 

em 1 은 100% 를 뜻합니다. 그럼 1em 은 몇 px 일까요? 보통 브라우저에 표현되는 기본 폰트의 크기는 16px 입니다. 사람들은 기본 글자의 크기를 1em 으로 정했습니다. 1em 이 16px 입니다. 이것을 기준으로 해서 줄이거나 늘이는 것입니다. 만약 설정에서 기본 폰트의 크기를 12px 로 변경한다면 em 값도 전부 바뀌겠죠.  

스타일 시트 CSS px(pixel) -> em 단위 변환 표

 

샘플을 통해서 알아 보겠습니다. <h1> 에서 <h6> 의 태그를 사용해서 화면을 만들었습니다. 왜냐하면 <h1> 2em 이기 때문입니다. 그러니까 <hn> 태그도 기본 폰트 크기에 따라서 달라질 수 있다는 의미입니다. 만약 내부적으로 설정되어 있는 <hn> 태그를 CSS 로 풀어 쓴다면 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> hn 태그 </title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	h1 { 
	    display: block;
	    font-size: 2em;
	    margin-top: 0.67em;
	    margin-bottom: 0.67em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
	h2 {
	    display: block;
	    font-size: 1.5em;
	    margin-top: 0.83em;
	    margin-bottom: 0.83em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
	h3 { 
	    display: block;
	    font-size: 1.17em;
	    margin-top: 1em;
	    margin-bottom: 1em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
	h4 { 
	    display: block;
	    margin-top: 1.33em;
	    margin-bottom: 1.33em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
	h5 { 
	    display: block;
	    font-size: .83em;
	    margin-top: 1.67em;
	    margin-bottom: 1.67em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
	h6 { 
	    display: block;
	    font-size: .67em;
	    margin-top: 2.33em;
	    margin-bottom: 2.33em;
	    margin-left: 0;
	    margin-right: 0;
	    font-weight: bold;
	}
</style>
</head>
 <body>
	<h1><h1>제목 레벨 1</h1>
	<h2><h2>제목 레벨 2 </h2>
	<h3><h3>제목 레벨 3 </h3>
	<h4><h4>제목 레벨 4 </h4>
	<h5><h5>제목 레벨 5 </h5>
	<h6><h6>제목 레벨 6 </h6>
 </body>
</html>

스타일 시트 CSS px(pixel) -> em 단위 변환 표

 

Posted by 녹두장군