CSS rem과 em 단위 – 글자 크기 상대 길이 단위

`rem` 단위와 `em` 단위

rem 단위와 em 단위는 둘 다 특정 요소의 글자 크기인 font-size를 기준으로 크기나 길이를 지정하는 상대적 길이 단위입니다.

rem 단위는 루트 요소인 <html> 요소의 글자 크기가 기준입니다.
em 단위는 기준이 되는 요소의 글자 크기입니다.
- 지정하려는 font-size 속성에서는 부모 요소의 글자 크기가 기준입니다.
- 지정하려는 속성이 font-size가 아닌 경우에는 현재 요소의 글자 크기가 기준입니다.

이러한 rem 단위와 em 단위의 개념에 대해 알아봅니다.

`rem` 단위

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

예를 들어, 1rem은 <html> 요소 글자 크기의 1배, 1.5rem은 1.5배가 됩니다.
예제를 통해 살펴보겠습니다.

이 예제에서 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 = 2 * 16px = 32px */
}

미디어 쿼리와 함께 사용

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

CSS

html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 20px */
        /* 1.25rem = 1.25 * 16px = 20px
           현재 html 요소의 font-size인 16px이 1rem */
    }
}

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

`em` 단위

em은 element(요소)의 약어로, 기준이 되는 요소의 글자 크기입니다.

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

`font-size` 속성에 적용하기

font-size 속성의 값으로 em 단위를 사용하면 부모 요소 글자 크기가 1em이 됩니다.

예를 들어 font-size: 1em은 부모 요소 글자 크기의 1배, font-size: 1.5em은 부모 요소 글자 크기의 1.5배가 됩니다.
예제를 통해 살펴보겠습니다.

CSS

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

`font-size` 이외의 속성에 적용하기

font-size 이외의 속성의 값으로 em 단위를 사용하면 현재 요소 글자 크기가 1em이 됩니다.

예를 들어 line-height: 1em은 현재 요소 글자 크기의 1배, line-height: 1.5em은 현재 요소 글자 크기의 1.5배가 됩니다.
예제를 통해 살펴보겠습니다.

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

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

타이포그래피 관련 스타일

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

대표적으로 line-height, letter-spacing 속성들의 경우에는 현재 요소의 글자 크기에 비례하는 값을 사용하기 위해 em 단위를 많이 사용합니다.

CSS

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

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

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

브라우저 호환성

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

명세서

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

참고문헌

codingCourses: CSS rem and em Units – Relative Length Units for Font Size

rem 단위와 em 단위

rem 단위

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

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