CSS 단위 알아보기 : 절대 단위와 상대 단위

CSS 단위

css에서 너비나 폭, 여백 등을 지정할 때 사용하는 단위는 다양합니다. 각 단위의 특징을 알고 적절하게 사용하도록 합시다!

CSS 절대 단위와 상대 단위

CSS에서 사용하는 단위는 일정한 크기로 유지되는 절대 단위와, 기준이 되는 크기나 뷰포트 환경에 따라 상대적으로 크기가 달라지는 상대단위가 있습니다. 반응형 코딩이 필요한 부분엔 상대 단위를 사용하도록 합니다.

유형	단위	설명	주의사항
절대 단위	px	1px(픽셀)은 화면 상의 점(픽셀) 하나의 크기와 같음.	해상도에 따라 잘라짐 (해상도↑ = 크기↑)
	pt	1pt(포인트)는 1/72 in이며, 12pt는 16px과 같음. 텍스트의 크기를 지정할 때 사용.
	mm	밀리미터
	cm	센티미터
	in	1 in(인치)는 2.54cm
	pc	1pc(파이카)는 12pt, 즉 16px과 같음.
	ex	글자 크기가 16px일 때의 소문자 x의 높이를 1로 함.	해상도에 따라 잘라짐 (해상도↑ = 크기↑)
상대 단위	%	전체의 몇 %인지에 대한 값. 부모 기준(100%)으로 자식의 넓이.
	em	상위 요소의 크기의 몇배인지에 대한 값. 기준(상위요소)의 크기를 1em으로 함.
	rem	가장 상위 요소(주로 HTML 또는 body)의 크기의 몇배인지에 대한 값. 기준(최상위요소)의 크기를 1rem으로 함.
	vw	뷰포트의 폭의 100분의 1에 대한 값. 1vw는 뷰포트 폭의 1% 크기와 같음.	IE 에서의 호환성에 주의
	vh	뷰포트의 높이의 100분의 1에 대한 값. 1vh는 뷰포트 높이의 1% 크기와 같음.
	vmin	뷰포트의 폭과 높이 중 작은 것에 대한 값. 768x1024 디바이스인 경우 1vmin 은 7.68px을 의미 함.
	vmax	뷰포트의 폭과 높이 중 큰 것에 대한 값. 768x1024 디바이스인 경우 1vmax 는 10.24px을 의미 함.