css 를 처음 입문할 때 자주 사용하는 단위는 px 입니다. px 은 절대 단위 길이 이므로 화면의 크기가 변해도 동일한 값을 유지하게 됩니다.
반응형 웹 에서는 유용하지 않습니다.
em, rem 은 박스에서 글꼴 크기를 정할때 사용하는 상대 단위 입니다.
em : 부모 요소의 글꼴 크기를 의미하게 됩니다. 부모 요소 크기의 배수 단위로 설정 합니다. 예를 들어 부모 요소가 폰트 사이즈를 10px 이라면 자식 요소에서 폰트 사이즈를 3em 으로 설정한다면 자식 요소는 30px 이 됩니다.
rem : 루트 (html) 요소의 글꼴 크기를 의미하게 됩니다. 기본적인 html 요소의 크기는 16px 입니다. 그럼 어떤 요소에 3rem 이면 48px 이 되는 것 입니다.
em 으로 margin, padding 을 설정하려고 할 때는 해당 컨텐츠 크기의 기준으로 적용 됩니다. rem 으로 margin, padding 위에서 설명한것과 같이 html 의 글꼴 크기를 기준으로 적용 됩니다.
하지만 em, rem 은 주변 상황에 따라 크기가 달라지는 특징을 가지고 있지만 브라우저나 화면의 크기에 따라서 달라지는 것은 아닙니다.
