개요
CSS는 DOM에 style을 적용해주기 위한 언어입니다.
그러다보니 화면을 구성하는 DOM에 적절한 길이를 적용하기 위해 다양한 길이 단위를 사용합니다.
대표적으로 사용되는 길이 단위는 px, em, rem 등이 있는데, px의 경우는 그 역할이 굉장히 직관적입니다.
입력하는 길이만큼 크기가 지정되고 그게 끝이기 때문이예요.
그런데 em과 rem은 뭘까요?
상대적 길이 단위
em과 rem은 모두 상대적인 길이 단위를 나타냅니다.
그 대상은 상위 객체로, 상위 객체에 적용 된 크기에 기준하여 자동으로 사이즈를 재조정 해줍니다.
1
2
3
20px: 1em = 1rem = 20px
20px: 0.5em = 0.5rem = 10px
20px: 1.5em = 1.5rem = 30px
위에서 언급했듯, em과 rem은 상대적인 길이를 갖기 때문에 기준에서 해당 길이를 곱하여 반환되는 값이 적용됩니다.
차이점
그렇다면 em과 rem은 얼핏 보기에 차이가 없어보입니다.
일반적인 경우에는 이 둘의 차이를 알기 힘든데, 결정적인 차이는 상위 객체에 대한 기준이 다릅니다.
em은 해당 길이가 적용 된 객체의 직계 부모의 길이를 기준으로 변하는 반면, rem은 DOM Tree에서 가장 상단에 있는 객체의 길이를 기준으로 변화합니다.
일반적인 웹 문서에서 최상위 객체라면 <html>이 될텐데, rem은 이 <html> 객체의 길이를 기준으로 환산합니다.
그래서?
만약 CSS 경험이 적고, CSS간 영향을 미치는 범위를 정확히 확신할 수 없다면 rem을 사용하는 것을 추천합니다.
em은 길이 환산에 영향을 미치는 변수들이 많고, 추후 DOM Tree가 바뀌게 될 경우 이에 대한 핸들링을 하기가 상대적으로 까다롭기 때문에, 길이에 영향을 미치는 객체가 단순한 rem이 사용성 측면에서는 더욱 간단하기 때문입니다.
예시
Sandbox에서 예시 코드를 확인하실 수 있습니다.