[CSS] 상대 단위(em/rem)

📋 상대 단위란?

고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다.
대표적으로 em, rem, %, vw, vh 등이 대표적인 css의 상대 단위입니다.

📋 절대 단위란?

어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다.
대표적으로 px 이 있습니다.

✔ em

em은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다. 즉 현재 요소의 font-size 값이 16px이라면 2em은 32px을 의미합니다.

.content{font-size: 16px;}
.content{
    font-size: 1.5em; /* 24px */
    margin: 2em; /* 32px */
}

✔ rem

rem은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값은 최상위 요소(html)에서 지정된 font-size 값을 의미합니다. 즉, html 태그의 font-size 값이 16px 이라면 2rem은 32px을 의미합니다.

html{font-size: 16px;}
.content{
    font-size: 1.5rem; /* 24px */
      margin: 2rem; /* 32px */
}

✔ 차이점

em과 rem의 차이점은 기준이 되는 값이 다르다는 것입니다.
em은 현재 요소의 font-size 값이 기준이며 rem 은 최상위 태그의 font-size 값이 기준입니다.