px은 거들 뿐...

목적

최근에 친구들과 프로젝트를 진행하고 있는 나는, 오랜만에 반응형을 접하게 되었다. 개발을 시작하고 HTML과 CSS를 처음 배울 때, 몇 시간만 짧게 해보고 "왜 이렇게 어려워..." 이러면서 지금까지 피하고 있었던 탓일까, 하나도 감이 잡히지 않았다. 하지만 결국에 언젠가는 해야 하고, 이제는 피할 수 없다는 생각이 들어 늦었지만 지금부터라도 반응형 공부를 제대로 해보려고 한다. 그 첫 시작이 em과 rem이다.

px을 왜 버림?

px은 절대값을 사용하는 단위이다. 1cm가 항상 1cm인 것처럼, 1px는 항상 1px이다. 한마디로 1px은 고정된 물리적 크기에 해당한다.

그럼 우리는 왜 px을 사용하지 않고, 뭔지도 모를 em과 rem을 사용하는지 알아야 한다. px을 사용하지 않는 가장 큰 이유는 px이 절대단위라는 것이다.

절대단위?

절대단위는 어떤 상황에서든 항상 고정된 크기를 나타내는 단위다. 보편적으로 책이나 신문과 같은 것은 항상 그 크기가 고정적이므로 절대 단위를 사용해야 하지만, 웹은 디바이스나 사용자 환경에 따라 콘텐츠 크기가 유동적으로 변해야 하기 때문에 절대단위를 사용하면 콘텐츠의 유연성이 저하된다.

그럼 상대단위도 있음?

당연히 있다. 상대단위는 절대단위와 다르게 고정되어 있지 않고 특정 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다. 대표적으로는 오늘 소개할 em, rem과 %, vw, vh 등이 있다.

그래서 뭐가 문젠데

모든 브라우저는 사용자가 마음대로 font-size를 설정할 수 있다. 따로 font-size를 설정하지 않으면 일반적으로 16px이 적용되는데, 개발자가 만약 font-size를 px로 고정하면 사용자가 브라우저 설정에서 font-size를 변경하려고 해도 개발자가 정해둔 font-size로 고정되어 변경되지 않는다.

예를 들어 개발자가 CSS에서 font-size를 24px로 설정해두면 사용자가 브라우저에서 font-size를 바꾸려고 해도 화면에 표시되는 크기는 24px에서 변하지 않는다. 한마디로 px은 사용자의 설정값을 무시해버린다는 뜻이다.

오늘의 주인공

드디어 오늘의 주인공인 em과 rem을 설명해보겠다.

em

em은 해당 단위를 사용하고 있는 요소의 부모 요소의 font-size를 기준으로 계산되어 화면에 표시된다.

.container { /* 부모 요소 */
  font-size: 16px;
}

.items { /* 자식 요소 */
  font-size: 24px;
  width: 10em; /* 160px */
  padding: 2em; /* 48px */
}

재밌는 사실이 하나 있는데, em으로 내외부의 여백(padding, margin) 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 적용이 된다.

rem

rem에서 r은 root, 즉 최상위 엘리먼트(html 태그)에서 지정된 font-size의 값을 기준으로 변환된다. 따라서 rem의 경우, html 요소의 font-size 속성 값이 기준이 된다. 만약 별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속받는다. (일반적으로 16px)

html {
  font-size: 16px;
}

div {
  font-size: 24px;
  width: 10rem; /* 160px */
}

마무리

오늘은 반응형의 기본인 em과 rem에 대해 알아봤다. 당분간은 이제 피할 수 없는 반응형 공부를 좀 많이 할 것 같은데, 사실상 거의 처음 하는 수준이라 벌써부터 머리가 어질어질한 것 같다.