CSS | rem em px 차이 알기

최근 반응형작업 공부를 하며 반응형 단위들과 position속성이 컨테이닝블럭을 결정하는 기준에 대해 명확하게 알아야겠다는 필요성을 느끼게 되어 복습차원으로 작성해볼까 합니다!

💡상대 단위 vs 절대 단위

상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스팅에서 다룰 em과 rem을 포함해 %, vw, vh 등이 대표적인 CSS의 상대 단위입니다.

반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다.

쉽게 말해, 실생활에서 1cm가 항상 1cm인 것처럼, 1px는 항상 1px(=0.02645833cm)이지만, 1em이나 1rem은 항상 고정된 길이를 나타나지 않고 대신 브라우저가 어떤 기준에 따라 계산을 하여 px로 변환을 해줍니다. 따라서 그 기준이 무엇인지를 파악하는 것이 em과 rem을 정확히 이해하는데 핵심이 됩니다.

px

> 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위

px은 절대단위(absolute unit)이기때문에 요소의 너비나 높이값을 px로 주게 되면 창사이즈나 브라우저설정에서의 폰트사이즈가 변경되어도 고정된 값을 유지하게 되어 반응형 작업에 적합하지 않습니다.

em

> 현재 (브라우저가 지정한 기본)폰트사이즈를 나타내는 단위
em은 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됩니다.

<div class="parent">
	Parent
    <div class="child">child</div>
</div>

.parent {
	font-size: 8em; -> 16px * 8 = 128px 
}

.child {
	font-size: 0.5em; -> 128px * 0.5 = 64px
}

위 코드를 살펴보기전 font-size속성은 상속된다는 점을 알아야합니다.
parent는 상위요소인 body나 html에 특별히 지정되어있는 폰트크기가 없기때문에 브라우저에서 기본으로 제공하는 16px을 그대로 상속받아 본인요소의 font-size 속성값인 16px 을 기준으로 *8이 되어 128px이 됩니다.

rem

> :root em
rem에서 r은 root, 즉 최상위 요소의 font-size 속성값을 의미합니다. 여기서 말하는 최상위 요소는 html 입니다. 따라서 rem 경우, html 요소의 font-size 속성값이 기준이 됩니다.

<div class="parent">
	Parent
    <div class="child">child</div>
</div>

.parent {
	font-size: 8em; -> 16px * 8 = 128px 
}

.child {
	font-size: 0.5em; -> 16px * 0.5 = 8px
}

추가

font-size를 기준으로 잡는다고 해서 em 과 rem이 폰트크기에만 사용하는 단위인것은 아닙니다. width값에 rem과 em 단위를 쓴 예시를 보겠습니다.

case1️⃣
div {
  font-size: 20px;
  width: 10em; /* 200px */
}

case2️⃣
div {
  font-size: 20px;
  width: 10rem; /* 160px */
}

case3️⃣
div {
  width: 10em; /* 160px */
}

case1️⃣
em은 해당 요소의 font-size에 비례해서 커지기 때문에 div 요소의 font-size인 20px에 10을 곱해야 합니다.

case2️⃣
rem은 최상위요소를 기준으로 하기때문에 html 요소의 font-size인 16px에 10을 곱해야 합니다.

case3️⃣
font-size속성값을 지정해주지 않았을때 font-size 초기값인 medium(웹브라우저에서 정한 기본 글자크기 = 16px)이 해당요소의 font-size이기때문에 16px에 10을 곱해야 합니다.

마무리

막연하게 반응형 작업에 사용하는 상대단위인것만 알고있다가 rem em이 px로 변환되는 기준을 명확하게 알게되었습니다. 추후 position속성값마다의 컨테이닝블럭 결정 기준에 대한 포스팅도 추가하겠습니다!😆



CSS 상대 단위 - em과 rem
프론트엔드 필수 반응형 CSS 단위 총정리