웹에서 제공하는 단위

 웹 지원 단위

CSS units

CSS는 단위(길이)를 표현하기 위한 여러가지 단위가 있다. width, margin, padding, font-size, border-width 등과 같은 많은 CSS 속성에서 사용한다. 단위는 10px, 2em과 같이 숫자 뒤에 공백없이 붙여서 사용하며 0인 경우는 생략할 수 있다. 단위는 음의 수를 가질 수 있으며 상대/절대 단위로 구분할 수 있다.

* w3schools의 ​CSS Units​에는 다음과 같이 CSS에서 사용하는 단위에 대해 안내되어 있다.

 

Browser Support

					Oper a
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	Not supported	19.0	Not supported

* 인터넷 익스플로러 9에서는 vmin을 비표준 이름인 vm으로 지원한다.

 

 

상대 단위

상대 단위는 다른 단위 속성에 대한 상대적 길이를 지정한다. 상대 단위를 잘 사용하면 다양한 디바이스에 최적화된 보기를 제공할 수 있기 때문에 권장되는 단위이다. 하지만 일반적으로 고정된 사이즈 내에서 디자인하는 것에 익숙한 경우에는 사용이 다소 까다롭다(상대적 단위를 쓸 때 가장 중요한 것은 어느 것에 대한 상대적 사이즈인지를 생각해야 하기 때문이다. 단순해 보이지만 작업을 하다보면 조금 복잡한 상황이 생기기도 한다).

Unit	Description
em	해당 Element의 font-size에 대한 비율(2em은 font-size의 2배 사이즈) 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.
ex	현재 글꼴의 x(소문자) 높이에 대한 비율
ch	"0"의 width에 대한 비율
rem	Root Element(html)의 font-size에 대한 비율 html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요.
vw	Viewport width의 1%에 대한 비율
vh	Viewport height의 1%에 대한 비율
vmin	Viewport smaller dimension의 1%에 대한 비율

vmax	Viewport larger dimension의 1%에 대한 비율
%

*em과 rem 단위는 확장 레이아웃을 만는데 아주 실용적(효과적)이다.

 

절대 단위

절대 단위는 고정되어 있으며 지정된 단위로 정확히 표현된다. "웹 화면의 크기는 아주 다양하기 때문에 화면에서는 사용하지 않는 것이 좋다. 그러나 프린트 레이아웃과 같이 출력 화면을 알고 있는 경우에는 사용될 수 있다."라고는 하지만 일반적인 경우엔 상대 단위보다 더 많이 사용하게 된다.

	Description
cm	센티미터
mm	밀리미터
in	인치 (1in = 96px = 2.54cm)
px *	픽셀 (1px = 1/96th of 1in)
pt	포인트 (1pt = 1/72 of 1in)
pc	피카 (1pc = 12 pt)

 

추가 문서 참고 : https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cm s-22573

rem, em 관련문서 : https://developer.mozilla.org/ko/docs/Web/CSS/font-size

예제: ​https://codepen.io/egoing/pen/bZkkjm

 

단위별 변환 방법

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.

- 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적 - 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리

- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐. - pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위

대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다. 예를 들어, 본문 전체가 12pt으로 설정되어 있는 상태에서 본문내의 테이블에서는 좀더 작은 9pt를 사용하고자 한다면, em단위로 본문의 폰트사이즈는 1em이 되고 테이블내 폰트사이즈는 0.75em이 되는 것입니다.

[참고] ​http://eara.tistory.com/149

px = pt / 0.75
pt = px * 0.75 em = pt / 12
% = pt * 100 / 12

위의 공식으로 설명될 수 있습니다. 단위변환 사이트 : ​http://pxtoem.com/

pixels	ems
8px	0.5em
9px	0.55em
10px	0.625em
11px	0.7em
12px	0.75em
13px	0.8em
14px	0.875em
15px	0.95em
16px	1em
17px	1.05em
18px	1.125em
19px	1.2em
20px	1.25em
21px	1.3em
22px	1.4em
23px	1.45em
24px	1.5em
25px	1.6em