-
[CSS] em과 rem의 차이개발/CSS 2023. 6. 11. 16:37
css에서 나타내는 상대적인 길이의 단위를 나타냅니다.
그 대상이 상위 객체에 해당하는 크기에 기준하여 자동으로 사이즈를 재조정해줍니다.
- 상대 단위와 절대 단위절대단위: px, pt나 cm, in와 같은 실생활에서 많이 사용되는 단위들도 절대단위 범주에 속합니다.
- 상대단위: em, rem말고 %, vw, vh 등이 대표적인 css 상대 단위입니다.
em
- 해당 길이가 적용된 객체의 직계 부모의 길이 기준
rem
- DOM Tree 에서 가장 상단에 있는 객체의 길이를 기준
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="./style.css" rel="stylesheet" /> <title>em, rem 차이</title> </head> <body> <div class="parent"> <div class="em">이것은 <code>em</code>입니다.</div> <div class="rem">이것은 <code>rem</code>입니다.</div> </div> </body> </html>html{ font-size: 16px; } .parent{ font-size: 24px; } .em{ font-size: 1.5em; /* 36px */ margin: 2em /* 48px */ padding: 1.25em /* 30px */ } .rem{ font-size: 1.5rem; /* 24px */ margin: 2rem /* 32px */ padding: 1.25rem /* 20px */ }css경험이 적고, css간 영향을 미치는 범위를 정확히 확신할 수 없다면 rem을 사용하는 것을 추천 및 권고합니다.
em은 길이 환산에 영향을 미치는 변수들이 많고, 추후 DOM Tree가 바뀌게 될 경우 이에 대한 핸들링을 하기 상대적으로 까다롭기 때문입니다.