px, em, rem 차이 / rem 을 px 대신 사용해야 하는 이유

예전에는 웹 브라우저 환경에서 크기의 단위로 px(픽셀)을 많이 사용하였습니다. 그러다가 근래 들어 PC환경, 모바일, 태블릿까지 모든 플랫폼을 커버할 수 있는 반응형 웹 디자인이 대두 되면서 rem 과 em 이라는 단위가 많이 보이기 시작했지요.

rem 과 em 이 무엇이며 기존 px 와 다른 점이 무엇인지 동작 원리에 대해서 간단하게 알아보도록 하겠습니다.

px 와 em, rem 은 무엇이 다른가

px는 고정된 값입니다. 무슨 말이냐면 일상생활에서 1cm는 어딜가든 1cm인것 처럼 1px(픽셀)은 1px(픽셀) 고정된 값입니다.

하지만 em 이나 rem 은 다릅니다. em 이나 rem은 고정된 값을 나타내지 않고 기준 값에 em, rem 변수 값을 곱해서 px로 환산해 주는 상대적인 값 입니다. 웹브라우저 환경에서 보면 글자 크기가 기준값에 따라서 가변적인 비율로 일정하게 변환되는 것이죠.

이 블로그의 글을 예시로 들어보겠습니다. 전통적인 px(픽셀)로 폰트 사이즈를 아래와 같이 설정했다고 합시다.

• body font size = 10px
• 소제목 = 20px
• 헤드라인 = 40px

여기서 아래와 같이 수정 하면 어떨까요? body font size를 기준값으로 잡고 나머지를 rem값으로 곱셈하여 변환하는 방식으로 말이죠.

• body font size = 10px ( 기준값 )
• 소제목 = 2rem ( 기준값 10px x 2 = 20px)
• 헤드라인 = 4rem ( 기준값 10px x 4 = 40px)

결과적으로는 같은 값이 나왔습니다. 뭐 이것만 보면 px를 그냥 사용하면 되는 거 아니냐고 할 수 있겠습니다. 물론 그렇기는 합니다만 상대단위를 사용했을때의 장점을 알게 되시면 생각이 달라지실 것입니다.

상대단위를 사용하게 되면 기준이 되는 값만 바꾸면 나머지 값들이 모두 자동으로 바뀝니다. 예를 들면 이런 것이죠. 홈페이지 폰트 크기가 너무 작다 느껴져서 전체적으로 조금씩 키우고 싶다 하였을 때 기준값만 수정해 주면 나머지 소제목이나 헤드라인 형식의 폰트가 연동되어 모두 변경됩니다.

이렇게 생각해 보세요. 내 블로그에 글을 100개 작성하였는데 폰트 사이즈 크기를 모두 크게 조정하고 싶다 합시다. 만약 rem 값으로 지정했다면 기준값 변경만으로 모든 게시물의 소제목과 헤드라인 폰트 크기가 비율에 맞게 자동 조절 되는 것입니다.

만약 px로 지정했다면 어땠을까요.. 100개의 게시물의 소제목과 헤드라인 폰트 크기를 하나하나 수정해 줘야 하는 사태가 발생하게 됩니다.

예시는 간단하게 게시판 글을 가지고 설명하였습니다만 실제로 이런 상대값 단위는 반응형 웹디자인에서 많이 사용되고 있습니다. 사용자의 환경에 따라서 반응하게 말이죠. 모니터가 큰 PC에서는 모든 폰트와 크기 단위가 더 크게… 화면이 작은 모바일 환경에서는 모든 폰트와 크기 단위가 다 작게 말이죠…

em과 rem의 차이점

em 과 rem은 모두 상대값이고 유사하여 과연 두 개의 차이점이 뭔가 싶으실 것입니다. 딱 잘라 말하자면 이 두개의 차이는 기준값이 어디를 보고 있느냐의 차이 입니다.

em은 해당 엘리먼트의 값을 기준으로 보는 것이고 rem은 그 페이지의 최상위 (root) 요소에 지정한 설정 값을 기준으로 보고 있습니다.

<p> 블록 단위 엘리먼트 예제 </p>
<div> 안에 내용 내용이 있습니다. </div>

em과 rem의 차이에 대한 예시를 아래의 예시로 알아보겠습니다.

html {
  font-size: 10px;   /* 기준이 최상위 root 값 */
}
.....
.....
/* 1번 */
div {
  font-size: 15px;   /*em 의 기준값 */
  width: 10em; /* div 안의 폰트사이즈 15 x 10em = 150px 이 된다 */
}
.....
.....
/* 2번 */
div {
  font-size: 15px;   /*em 의 기준값 */
  width: 10rem; /* 최 상위 root 값 폰트사이즈 10 x 10rem = 100px 이 된다 */
}

• 최상위 root font 설정> html 최상위 폰트 사이즈를 10px로 지정하였습니다.
• 1번의 예시> width: 값을 10em으로 지정 하였을때
  div 엘리먼트의 기준값 15px X 10em = 150px가 됩니다.
• 2번의 예시> width: 값을 10rem 으로 지정 하였을때
  root 최상위 폰트 정의값인 10px X 10rem = 100px가 됩니다.

em 과 rem 중 어떤 것을 사용해야 하는가?

많은 전문가들은 특별한 경우가 아니라면 em보다는 rem을 사용할 것을 권장하고 있습니다. 그 이유는 실제 px로 계산되어 변환될 때 em은 영향을 주는 변수가 많아 CSS작성시 스타일된 요소를 재사용하기 어렵기 때문입니다.

그 말은 em을 사용하면 사용할 수록 유지보수 포인트들이 많아진다는 이야기 입니다. 처음부터 모든 값을 rem으로 설정하여 홈페이지 전체를 통일된 기준으로 잡고 최상위 값만 수정해 가면서 사용하는 것이 유지 보수에 유리 합니다.