[CSS] "단위(Unit)" 에 대해 알아봅시다!

CSS 단위(Unit) 대해 알아봅시다!

📎 CSS 단위 종류

CSS에서 사용되는 길이는 절대 길이 단위와 상대 길이 단위 두 가지 유형이 있습니다.

➰절대 길이 단위 : 항상 동일한 크기(다른 것과 관련X)

단위	이름	값
cm	센티미터	1cm = 96px/2.54
mm	밀리미터	1mm = 1/10th of 1cm
Q	4분의 1 밀리리터	1Q = 1/40th of 1cm
in	인치	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	포인트	1pt = 1/72th of 1in
⭐️px⭐️	픽셀	1px = 1/96th of 1in

위와 같은 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다.
px(픽셀)만 보통 유일하게 화면에서 사용되는 절대 길이 단위입니다.

➰⭐️상대 길이 단위⭐️: 상위 요소의 글꼴 크기 or viewport(웹사이트에서 보여지는 영역) 크기와 관련 : 비례하여 조정됨

단위	설명
em	∙ 부모 엘리먼트의 폰트 사이즈를 기준으로 한 단위 ∙ 1em = font size(부모 엘리먼트)
ex	요소 글꼴의 x-height
ch	요소 글꼴의 glyph "0" 의 사전 길이 (너비)
rem(root em)	∙ 최상위 엘리먼트의 폰트 사이즈를 기준으로 한 단위 ∙ 1rem = font size(최상위 엘리먼트)
%	부모 요소를 기준으로 한 비율 표현
lh	요소의 라인 높이
vw	∙ viewport 너비의 1% ∙ 1vw = 8px
vh	∙ viewport 높이의 1% ∙ 1vh = 10px
vmin	∙ viewport의 작은 치수의 1% ∙ viewport의 길이 중 더 긴 길이를 기준
vmax	∙ viewport의 큰 치수의 1% ∙ viewport의 길이 중 더 짧은 길이를 기준

📌 vh, vw와 %의 차이
기본 : vh과 vw는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다는 것

차이
: vh과 vw는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바 포함
: %는 %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환(스크롤 바를 포함하지 않은 현재 화면 길이만을 반환)