필수 css 상대 단위 rem, em에 대해 알아보자

반응형 작업을 할 때 가장 중요한건 비율이라고 생각한다.

반응형 작업이 거의 필수화가 되면서 rem, em을 더 정확하게 짚고 넘어갈 필요가 있을 것 같다.

 

상대길이 단위

이 단위는 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정된다.

em -> 요소의 글꼴 크기

rem -> 루트 요소의 글꼴 크기

 

em과 rem의 공통적 특징

둘 다 font-size에 속성값에 비례해서 결정되는 상대 단위들이다.

/// 예를 들어 font-size:16px 이라고 할때 아래와 같이 계산 될 수 있다///
0.5em = 16px * 0.5 = 8px
1em = 16px * 1 = 16px
2em = 16px * 2 = 32px
3em = 16px * 3 = 48px

 

em과 rem의 차이점

둘 다 font-size에 영향을 받는 요소들이지만 큰 차이점은 어디 있는 font-size를 기준으로 계산될 것 인가이다.

em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 속성 값이 정해지고,

rem은 root에서 사용되는 font-size의 값을 기준으로 사이즈가 정해진다.

 

본격 단위 계산

rem은 원래 root의 사이즈를 가져와서 요소 안에 font-size 속성이 없어도 상관없는데,

em 같은 경우엔 요소에 font-size가 없으면 부모요소에서의 font-size값을 가져와서 기준으로 삼는다.

 

rem이나 em이 비율에 따라 유동적으로 사이즈가 움직여서 편하긴 하지만 마크업이 복잡해지면

em 같은 경우 어디서부터 어떻게 계산되는지 복잡해질 때가 있을 것 같다. 

 

 

참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units