[ CSS ] px, em, rem 차이

px, em, rem  차이를 알아보자.

 

글꼴과 화면 등의 크기를 다룰때는 크기의 단위가 무엇보다 중요하며,

크기의 단위는 절대 단위와 상대 단위 두가지로 구분할 수 있다.

 

절대 단위 : px, pt 등

상대 단위 : %, em, rem, ch, vw, vh 등

 

 

절대 단위는 언제 사용 되나?

• 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 : px 사용
• 반응형 웹에서 기준점을 만들 때 : 디바이스 크기를 나누는 기준을 보통 px로 정함

상대 단위는 언제 사용 되나?

• 반응형 웹 단위 선택시 : 주로 rem 사용
• 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw,vh 사용

 

 

정리

px : 고정된 크기를 나타내며, 사용자 설정에 따라 확대/축소되지 않는 고정 크기의 단위

em : 상속된 요소의 폰트 크기에 따라 상대적인 크기를 가지며, 부모 요소의 폰트 크기에 영향을 받음

rem : 최상위(루트) 요소의 폰트 크기에 상대적인 크기를 가지며, 요소의 영향을 받지 않고 루트 요소에만 영향을 받음

vw : 뷰포트 너비 백분율

vh : 뷰포트 높이 백분율