CSS 단위는 왜 이렇게 많은걸까...

CSS 길이 단위는 생각보다 많다..!

그래서 실제로 뭘 써야할지 잘 모르겠다ㅜ

우선 고정은 px, 반응형에 따라 사이즈 변화가 필요할 경우 %, em을 쓰고 있긴한데

(이유도 모른체 폰트 사이즈도 px로 주는 나란 사람..ㅎ)

그외 다양한 단위들은 왜 있는 것이며...

어떤 경우에 써야하는지 문득 궁금해져서 서치 후 정리해본다.

---

CSS 길이 단위

1. 절대 단위

단위	사이즈 (px 기준 반올림 적용)	설명
cm	37.8px
mm	3.8px
in	96px
px	1px	- 모니터에 따라 상대적인 크기를 가짐 - PC버전 코딩에서 주로 사용
pt	1.3px	- 인쇄용 단위 - 주로 문서에서 많이 사용하는 단위 - 크로스 브라우저 결과가 매우 다를 수 있어 웹에서는 사용하지 않는 편
pc	15.6px

 

2. 상대 단위

단위	사이즈 (px 기준 반올림 적용)	설명
em	16px	- 부모 요소의 사이즈에 대한 상대값 - 따라서 작업시 상속과 관련하여 복잡한 상황이 생기는 경우가 있을 수 있음 - 부모 요소의 크기가 정해져 있이 않을 경우 16px로 계산
rem	16px	- root em - em과 성질이 같으나 최상위 root, html을 기준으로 한다는 차이가 있음 em과 rem 중 뭘 써야 할까?
%	-	- 부모 요소를 기준으로 한 비율 사이즈

 

3. Viewport 단위

단위	사이즈	설명
vh	전체 높이 1200px의 경우 1vh = 12px	- viewport height - 뷰포트 높이값의 1/100 = 1vh - 세로 기준 화면 가득 차게할 경우 height: 100vh;
vw	전체 넓이 960px의 경우 1vh = 9.6px	- viewport width - 뷰포트 넓이값의 1/100 = 1vw - 가로 기준 화면 가득 차게할 경우 width: 100vw;
vmin	브라우저 크기가 1200x960px의 경우 1vmin = 9.6px	- viewport minimum - 웹 브라우저의 넓이와 높이 중 더 작은 값을 기준으로 함
vmax	브라우저 크기가 1200x960px의 경우 1vmax = 12px	- viewport maximum - 웹 브라우저의 넓이와 높이 중 더 높은 값을 기준으로 함

*Viewport : 전체 웹 페이지 가운데 브라우저 창에 보이는 영역.

 

 

---

뷰포트 단위가 있는 것은 이번에 정리하면서 알게 된 사실!

모바일을 많이 사용하기 때문에 많이 쓰일 것 같은 단위라고 생각된다.

 

앞으로 사이즈 규격을 정할 때 각 단위들의 성격을 고려해서

어떤 식으로 해야 더 효율적일지 생각해보면서 작업해봐야겠다 :)