rem과 em 단위

rem과 em 단위는 둘 다 특정 요소의 font-size를 기준으로 그에 따른 크기를 지정하는 상대적 길이 단위입니다.

rem 단위

rem은 root element(루트 요소)의 약자로, 이 단위는 루트 요소인 <html> 요소의 font-size를 1rem의 기준하는 상대적 길이 단위입니다.

em 단위

em은 element(요소)의 약어로, 이 단위는 상속된 부모 요소의 font-size를 1em의 기준으로 하는데, 이는 지정하려는 font-size 속성에만 이 기준이 적용되며, font-size 이외의 길이에 관련된 속성에서는 지정하려는 현재 요소의 font-size를 1em의 기준으로 하는 상대적 길이 단위입니다.

rem 단위는 루트 요소인 <html> 요소의 font-size 를 의미합니다. rem은 root em(element)을 나타냅니다.

예제를 통해 살펴보겠습니다.

CSS 
html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20ox = 40px
       html 요소의 font-size인 20px이 1rem */
}

이 예제에서 h1 요소의 font-size를 루트 요소인 <html> 요소의 font-size의 2배로 설정합니다. 이 경우, <html> 요소의 font-size가 20px이므로, h1 요소의 실제 font-size는 2 * 20px = 40px이 됩니다.

<html> 요소의 font-size를 지정하지 않았을 경우

만약에 루트 요소인 <html> 요소의 font-size를 지정하지 않았을 경우 1rem은 어떻게 결정될까요?

이 경우에 루트 요소인 <html> 요소의 font-size를 지정하지 않았을 경우, 이는 사용자가 설정한 브라우저의 기본 글자 크기에 따라 결정됩니다. 대부분의 사용자들은 브라우저의 기본 글자 크기를 설정하지 않는 경우가 많습니다. 브라우저 제조사에 따라 설정된 기본 글자 크기는 주로 16px이며, 이 경우 1rem은 16px이 됩니다.

rem 단위는 주로 어느 때 사용하는지

rem 단위는 <html> 요소의 font-size를 기준으로 크기를 지정하는 상대적 길이 단위입니다. rem 비율에 따라 크기에 관련된 스타일을 지정하면 글로벌 비율에 맞추어 스타일을 일괄적으로 관리하고, 유지 보수하는데 매우 편리합니다.

글로벌 스타일 설정

웹 페이지의 전반적인 스타일, 특히 기본 폰트 크기 및 여백과 같은 요소들을 설정할 때 rem을 활용합니다.

CSS 
html {
    font-size: 16px;
}
body {
    font-size: 1rem; /* 1rem = 16px */
    margin: 1rem;    /* 1rem = 16px */
}
h1 {
    font-size: 2rem; /* 2rem = 32px */
}

미디어 쿼리와 함께 사용

반응형 웹 디자인에서 화면 크기에 따라 스타일을 조절할 때 rem과 함께 미디어 쿼리를 사용할 수 있습니다.

CSS 
html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 1.25rem = 20px */
    }
}

rem은 중첩된 요소의 상속에 영향을 받지 않으므로, 글로벌 스타일을 일괄적으로 관리하고 유지 보수하기에 용이합니다.

  • font-size 속성에 적용할 경우에는 부모 요소의 font-size를 1em의 기준으로 합니다.
  • font-size 이외의 길이에 관련된 속성에서는 지정하려는 현재 요소의 font-size를 1em의 기준으로 합니다.

font-size 속성에 적용

CSS 
h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em;
    /* 0.7em = 0.7 * 30px = 21px;
       부모 요소(h1)의 font-size인 30px이 1em */
}

font-size 이외의 길이에 관련된 속성에 적용

CSS 
h1 {
    font-size: 30px;
    line-height: 1.5em;
    /* 1.5em = 1.5 * 30px = 45px
       현재 이 요소의 font-size인 30px이 1em */
}

em 단위는 주로 어느 때 사용하는지

em 단위는 주로 상대적인 길이를 지정할 때 사용됩니다.

타이포그래피 관련 스타일

부모 요소의 font-size를 기준으로 자식 요소의 길이를 설정하는 데에 활용됩니다. 이럴 경우 부모 요소의 글꼴 크기의 비율로 font-size를 설정하기 때문에(부모 요소의 글꼴 크기를 정확히 모른다고 하더라도) 상대적인 크기 비율을 조정하는데 매우 편리합니다.

현재 글꼴 크기 비율에 맞춘 레이아웃 및 여백 관련 스타일

현재 글꼴 크기 비율에 맞춘 레이아웃이나 여백 등을 조정함으로써 글꼴의 크기와 레이아웃이나 여백 등의 상대적인 비율을 가늠하여 편리하게 조정할 수 있습니다. 특히 현재의 글꼴 크기가 반응형 웹 등의 구현으로 커지거나 작아질 때, 그 비율대로 레이아웃이나 여백 등이 자동으로 조정되기 때문에 CSS 구현에 매우 효율적입니다.

브라우저 호환성

rem과 em 단위의 브라우저 호환성
단위
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
rem 예 예 예 예
em 예 예 예 예

명세서

rem과 em 단위의 명세서 사양
명세서 사양
rem CSS Values and Units Module Level 4
#rem
em CSS Values and Units Module Level 4
#em

참고문헌

같이 보기