반응형
반응형 웹디자인, rem 과 em?
1. rem과 em의 공통점?
rem과 em은 모두 CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위이다.
px은 고정값인데 비해 이는 브라우저에 의해 달리 계산된다.
예를들어 font-size가 20px 이라면
1rem은 20 x 1 px, 0.5rem은 20 x 0.5 px이 된다.
따라서 font-size값에 따라 유동적으로 값을 바꿔주려는 경우
rem이나 em을 사용하면 된다.
2. rem과 em의 차이점?
rem과 em 모두 상대단위이지만
어느 font-size를 기준으로 하는지에 따라 차이가 발생한다.
rem의 경우 root-em 으로써 최상위 요소의 font-size 즉 <html> 태그의 font-size를 기준으로 한다.
반면 em의 경우 em이 쓰이고 있는 font-size가 기준이 된다.
em의 쓰이고 있는 요소에 font-size가 없다면 상속받은 font-size가 기준이 된다.
따라서 em을 사용할 경우 여러 상위 요소들을 거치며 font-size가 상속될 수 있기 때문에
예측하기가 복잡한 경우가 있다.
3. rem과 em 선택?
많은 css 가이드들은 em 보다는 rem 사용을 권장한다.
앞서 말했듯이 em의 경우 상속되는 경우를 예측하기도 힘들고
유지보수가 힘들어지는 경향이 있기 때문이다.
반응형
그리드형