rem, em

CSS로 스타일링을 진행할 때 어떤 요소의 크기 값을 지정하는 일이 매우 자주 일어납니다.

저는 주로 px로 크기를 지정했는데, 다른 사람의 코드를 보다 보면 크기 지정을

px이 아닌 rem과 em을 사용하는 분들이 많더라구요.

저는 계속 px로 사용하면서 불편한 부분을 못느꼈지만,

CSS를 만든 사람들이 rem과 em을 도입했다면 분명히 합당한 이유가 있겠죠?

오늘 확실히 정리해서 그 이유를 알아보겠습니다. 

 

rem, em이란?

 

우선 rem과 em은 상대적 단위라는 공통 분모가 있습니다.

상대적 단위를 이해하기 위해서 반의적인 절대적 단위를 먼저 보겠습니다.

px은 절대적 단위입니다.

만약 어떤 엘리먼트의 font-size를 16px로 지정했다면,

그 엘리먼트는 어떠한 일이 있어도 16px로 고정되는 것 입니다.

 

하지만 rem과 em은 어떤 엘리먼트가 가지고 있는

font-size 크기의 비율적으로 적용이 됩니다.

글로 작성하면 어렵기 때문에, 코드로 보겠습니다.

 

.p1 { font-size : 16px }
.p2 { font-size : 1rem } 
.p3 { font-size : 2rem } 
/* 1rem : 16px * 1 */
/* 2rem : 16px * 2 = 32px */

 

위와 같이 p1은 16px이라는 고정 값을 갖지만,

p2와 p3는 어떠한 px 값의 비율적으로 크기를 갖습니다.

이러한 원리로 rem과 em은 상대적 단위로써 사용되는 것 입니다.

 

그럼 rem과 em의 차이는 무엇일까요?

이름에 힌트가 있습니다.

 

rem : Root Element

 

rem의 기준이 되는 element는

바로 Root Element 즉 html 태그가 됩니다.

 

html { font-size:20px; }
.p2 { font-size:1rem; }
.p2 { font-size:2rem; }
/* 1rem : 20px * 1 */
/* 2rem : 20px * 2 = 40px */

* html의 default font-size는 16px 

 

 

위와 같이 html 태그에 font-size를 20px로 지정하면

rem으로 사이즈를 적용한 엘리먼트는

어떤 상속 관계를 가지고 있던 html 태그에 font-size를 가져오기 때문에,

20px의 상대적인 비율로 사이즈를 갖는 것 입니다.

 

이제 rem은 확실히 알았고 ,em을 보겠습니다.

 

em : Element

 

em은 해당 엘리먼트의 부모의 font-size를 상속 받습니다.

바로 코드로 보겠습니다.

 

/* SCSS */
html { font-size : 20px }
div {
	font-size : 16px;
    .p1{ font-size : 1rem; }
    .p2{ font-size : 1em; }
}
/* .p1 = 20px * 1 */
/* .p2 = 16px * 1 */

* 상속 관계 표현을 위해 scss 문법으로 작성했습니다.

 

 

1rem으로 설정된 p1은 root element인 html에 영향을 받아서 20px로 설정되고,

1em으로 설정된 p2는 자신의 부모 요소인 div의 영향을 받아서 16px로 설정됩니다.

 

이게 다 입니다. 생각보다 간단하죠??

 

그래서 언제 사용되는데??

 

1. 반응형 레이아웃 

만약 모든 엘리먼트의 font-size를 rem으로 사용하면

스크린 사이즈를 반응하는 미디어 쿼리에 분기점 마다 html 태그에 font-size를 변경만 해주어도,

rem은 알아서 부모 요소에 반응해서 font-size를 조절하게 됩니다.

반응형 작업할 때 모든 요소의 font-size를 일일이 지정하던 노가다에서 어느정도 해방이 되는 것이지요.

 

2. 웹 접근성

웹 접근성이란 개념 들어보셨나요?

 

웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다.

 

요소들의 크기를 모두 rem으로 지정하면 웹 접근성이란 키워드에 적합하게 개발이 가능합니다.

rem은 또한 사용자가 설정하는 font-size도 인식합니다.

사용자가 font-size를 설정하는 경우는 크게 세 가지가 있습니다.

 

1. 브라우저 글꼴 크기 설정

2. 모바일 기기 글꼴 크기 설정

3. 개발자가 작성해놓은 웹 페이지 내부의 글꼴 크기 설정

 

만약 사용자가 브라우저나 모바일 기기에서 글꼴 크기를 키웠을 때,

개발자가 font-size를 모두 px로 고정해놨으면 이러한 설정에 영향을 받지 않습니다.

px는 절대적으로 고정되는 값이기 때문에 다른 외부적 요인에 영향을 받지 않죠.

(단 브라우저 확대, 축소에는 영향을 받습니다.)

하지만 rem으로 font-size를 설정하면,

브라우저나 모바일 기기에서 글꼴 크기 변경이 발생했을 때

Root Element에 html font-size가 조정되기 때문에 rem은 자동적으로 font-size가 조절됩니다.

 

물론 이럴 때는 html 태그에 font-size를 px로 지정하면 안되겠죠?

 

html { font-size : 16px; }
/* font-size가 고정되기 때문에, 웹 접근성에 충족되지 않음 */
html { font-size : 100%; }
/* font-size를 100%, 아니면 설정하지 않으면 동적으로 font-size가 변경이 가능해진다. */

 

 

rem, em 사용 시 팁들

 

1. html font-size : 62.5%

 

html { font-size : 62.5%; }

 

html의 default font-size는 16px입니다.

16px = 1rem이 되면 산술하기 복잡하고 어렵죠 ㅠ

그래서 html의 font-size를 62.5%를 주게 되면 결과적으로 10px

즉 10px = 1rem이 되는 것 입니다.

조금 더 계산하기 편하겠죠??

 

2. Margin이나 Padding을 rem과 em을 주는 것을 피하자!

 

사실 이건 취향의 영역인 것 같은데,

Margin이나 Padding 값 마저 rem으로 줘버린다면

사용자의 font-size 조절에 따라 레이아웃 크기 까지 변경되겠죠.

이러한 것 까지 모두 반응하게 구현할 수 있다면 좋겠지만,

그로 인해 발생하는 노가다는 모두 개발자에 몫이니까...

구현이 들어가기 전에 잘 생각하고 하면 좋을 것 같습니다. :)

 

---

지금 까지 프로젝트에서는 모든 요소의 크기 지정을 px로 설정했었는데,

이제 rem과 em을 알았으니

웹 접근성을 고려해서 용도에 맞게 rem과 em을 적절히 활용하면 좋을 것 같네요... :)