컴/폰
CSS3 em과 rem 의 차이
양재문
2023-04-25 15:00
조회수 : 30
rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 <html>을 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것이다.
em 사용 - 부모로부터 글꼴 크기를 상속받음
- html = 100% = 16px
- body = 0.5em = 8px
- div = 0.5em = 4px
- p = 0.5em = 2px
rem 사용 - <html> 로부터 크기를 상속받음
- html = 100% = 16px
- body = 0.5rem = 8px
- div = 0.5rem = 8px
- p = 0.5rem = 8px
사용 상황 예시
단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 때 미디어쿼리와 함께 rem 단위를 사용하면 효과적입니다. 예를 들어 데스크톱 글꼴이 10px ~ 20px 범위인데 모바일 단말에서 전체적으로 20px ~ 40px 범위로 키우고 싶다면 CSS 만으로 아주 간단하게 처리할 수 있습니다.