[CSS] px 와 rem

지금까지 폰트 사이즈를 항상 px로 지정했는데 앞으로는 rem을 사용해보아야 할 것 같아서 방금 배운 것을 적어놓는다. 

 

px: 고정된 크기 단위. 사용자가 글자 크기를 변경하지 못 함. 사용자의 환경에 따라 다르게 보일 수 있음. 스마트폰같은 크기가 작고 고해상도인 디바이스에서는 모니터의 한 점과 1px의 크기 차이 때문에 흐릿하게 보일 수 있음.  

 

rem:  root(기준)크기 = 1rem. root크기를 기준으로 크거나 작게 설정할 수 있음 (ex 2rem, 0.4rem...). 사용자가 지정한 폰트사이즈를 기준으로 디바이스마다 다른 크기로 적용됨.

 

em: 부모 요소를 기준으로 폰트사이즈가 정해지므로 다루기 어려움