프로필카테고리질문하기
로그인 계정 만들기

CSS em rem 차이점

04 개월 전
CSS에서 em 단위와 rem 단위의 차이점은 무엇인가요?
.element-1 { font-size: 2em; /* 32px */ } .element-2 { font-size: 2rem; /* 32px */ }
답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

204 개월 전
Em

em은 부모의 폰트 사이즈와 비례해요.

예를들어 아래의 스타일시트가 있다고 가정하면,

html { font-size: 16px; } span { font-size: 2em; }

아래의 경우 바깥쪽 span은 16px * 2em = 32px 에요.

안쪽 span은 32px * 2em = 64px 에요.

<span> 16px * 2rem = 32px <span> 32px * 2rem = 64px </span> 16px * 2rem = 32px </span>
Rem

remem과 달리 문서 루트(html)의 폰트 사이즈와 비례해요.

예를 들어 아래의 스타일시트가 있다고 가정하면,

html { font-size: 16px; } span { font-size: 2rem; }
아래의 경우 바깥쪽과 안쪽 span 모두 항상 16px * 2rem = 32px 에요.
<span> 16px * 2rem = 32px <span> 16px * 2rem = 32px </span> 16px * 2rem = 32px </span>
브라우저 지원

em은 모든 브라우저에서 사용할 수 있어요.

rem은 거의 모든 브라우저 (Chrome 31 이상, FireFox 31 이상, Internet Explorer 9 이상) 에서 사용할 수 있어요.

그런데 인터넷 익스플로러 9–11 은 line-height, :before, :after 에는 rem 단위를 지원하지 않아요.

의견 추가
의견 (0)
더 많은 의견 보기