7가지 css 단위 em/ rem/ inch/ vw /vmin /vmax /ch

**참고 : https://www.codingfactory.net/10748

1.em

상위요소 기준의 font-size 값 

ex)

dif{font-size:16px;}
div{
	font-size:1.5em /*24px*/;
	padding: 2em /*32px*/
}

2.rem(root em)

html 기준으로 font-size를 정의

em과 헷갈리지 않도록 주의

rem은 그리드시스템이나 보다 정확한 사이즈나 크기 조정을 위해 사용

html { font-size: 16px; }
body { font-size: 2em; } /*32px*/
div.container { font-size: 2em; } /*64px*/
div.content1 { font-size: 2rem; } /*32px*/
div.content2 { font-size: 2em; }/*128px*/

3. vh vw

반응형 웹디자인은 거의 %단위로 많이 사용하는데, 모든 문제를 해결할 수는 없다.

vw vh는 높이값 너비값의 1/100 단위이다. 풀스크린 사이트 제작에 적합하다.

폰트사이즈로도 설정이 가능하다.

 

>>>  %와 vw vh의 차이점  <<<

*** % : css 너비 값이 부모요소의 상대적 영향을 많이 받는 경우

***vw,vh : css 너비 값이 절대적 영향을 가지는 경우

 

4.ex, ch

폰트사이즈에 비례한다는 점에서 em과 rem과 유사하다.

em과 rem은 font family에 의존하는 반면 

ex,ch는 문자열과 관계가 깊다 

span{
	width:100ch; /*10개의 문자열을 포함한 너비*/
}

ex는 em의 절반값으로도 볼 수 있으며, 소문자 높이값이기도 하다. 

주로 폰트 중간 지점을 찾기 위한 용도로 많이 쓰인다.

 

5.vm/vh 

뷰포트를 기준으로 하는 값으로 모바일기기에서 주로 볼 수 있는 단위이다.

자세한 사항은 아래 출처를 확인해 보기 바란다.

 

출처:

webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573?_ga=2.180165284.1090933143.1620742291-338150964.1620742290