픽셀 em 차이, 변환 계산법

픽셀, em 차이

CSS에서 길이를 표현 단위에는 몇 가지 다른 단위가 있다.
길이를 표현하는 CSS 속성은 width, margin, padding, font-size, 등이 있는데 숫자 뒤에 px, em 등이 붙는다.

 

목차

• 주의사항
• 절대 단위
• 상대 단위
• 픽셀 - EM 변환 표

주의사항

• 숫자와 단위 사이에는 공백이 올 수 없다.
• 값이 0인 경우 단위를 생략해도 된다.
• 일부 CSS 속성은 마이너스(음수)가 허용된다.
• 길이 단위에는 절대 단위 및 상대 단위가 있다. 

절대 단위

절대 단위는 고정되어 있으며, 디바이스별 화면 크기가 다양하기 때문에 화면에서 잘 표현을 못하는 경우가 있다. 하지만 인쇄 레이아웃처럼 출력 결과를 알 수 있는 경우는 사용해도 좋다. 절대 단위에는 다음과 같은 것들이 있다.

cm: 센티미터 
mm: 밀리미터
in: 인치(1in = 96px = 2.54cm)
px: 픽셀(1px = 1/96th of 1in) : 픽셀(px)은 시청 장치를 기준으로 한다.
pt: 포인트(1pt = 1/72 of 1in)
pc: picas (1pc = 12 pt)

 

상대 단위

절대 단위는 고정되어

 

em	지정받거나 상속 받은 엘리먼트에 대한 백분율 상대 크기(해당 폰트의 대문자 M의 너비를 기준으로 한다)
rem	루터 요소에 대한 상대적인 크기
%	기본 글꼴의 크기에 대해 상대적 크기를 가진다.(지정받거나 상속 받은 엘리먼트에 대한 백분율 상대 크기)
ex	해당 폰트의 소문자 x의 높이를 기준으로 한다.
pt	일반 워드 문서 등에 많이 쓰이는 단위.(1포인트=0.72인치)
vw	뷰포트 너비의 상대적인 1%
vh	뷰포트 높이의 상대적인 1%

• em 및 rem 단위는 확장 가능한 레이아웃을 만드는 데 완벽하고 실용적이다.
• 예를 들어, 뷰포트 = 브라우저 창 크기. 뷰포트의 너비가 50cm이면 1vw = 0.5cm

픽셀 - EM 변환표

 

px	em	percent
5px	0.3125em	31.25%
6px	0.3750em	37.50%
7px	0.4375em	43.75%
8px	0.5000em	50.00%
9px	0.5625em	56.25%
10px	0.6250em	62.50%
11px	0.6875em	68.75%
12px	0.7500em	75.00%
13px	0.8125em	81.25%
14px	0.8750em	87.50%
15px	0.9375em	93.75%
16px	1.0000em	100.00%
17px	1.0625em	106.25%
18px	1.1250em	112.50%
19px	1.1875em	118.75%
20px	1.2500em	125.00%

결론 : 픽셀은 고정값이고 EM과 백분율은 상대 값이며, 상위 글꼴 크기에 따라 다르기 때문에, 2em은 현재 글꼴 크기의 2배를 의미한다. 또한 본문의 글꼴 크기가 16픽셀이면 150% 백분율은 24픽셀(1.5 * 16)이 되고 2em은 32픽셀(16 * 2)이 된다.