숫자 단위 - Rem | Px | Em

오민영·2023년 2월 14일

CSS

목록 보기

12/22

Pixel

픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변경하고 싶다면, 다른 픽셀 값으로 지정해야 한다.

Rem

rem은 CSS3 표준에서 등장했으며, Root EM이 어원이다. HTML 루트 요소의 폰트 사이즈를 계산의 베이스로 하는 방식으로 사이즈를 지정하는 것이다. 즉, 문서의 루트(root | html)의 글자 크기에 상대적으로 글자 크기를 조정하는 것이다.

사용자가 브라우저의 기본 폰트 크기를 어떤 값으로 설정했든 간에 이에 따른 가변 텍스트 크기에 맞춰서 사이트 레이아웃이 적절히 조정될 수 있도록 하려는 것이다. 위의 설명처럼 rem 단위의 픽셀 값 변환은 html 요소의 폰트 크기에 따라 결정되는데, 단위를 직접 지정해서 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속받게 된다.

루트() 요소의 폰트 사이즈는 웹 브라우저의 기본 폰트 사이즈가 결정하며, 대부분의 웹 브라우저에서 16px로 정해놓고 있다.

rem을 사용하면 어떤 자식 요소에서든 속성 값을 1.5rem으로 지정하게 되면 루트(()의 폰트사이즈인 16px에 1.5가 곱해져서 최종 계산된 결과 값은 24px(16px * 1.5)이 된다. 자신의 폰트 사이즈에 비례하는 em 단위와 달리, rem 단위는 어떤 요소에서 사용하든 루트 베이스 계산 기반값이 고정되어 있다.

// root - font-size: 16px

span {
  /* 결과값은 16px × 1.25 → 20px */
  font-size: 1.25rem;
  /* font-size와 관계없이 결과값은 16px × 1.5 → 24px */
  padding: 1.5rem;
}

Rem 단점

전달 받은 디자인을 토대로 작업자는 매번 필요한 픽셀 값에 대해서 rem 값을 계산해야만 한다. border-width 를 1px로 지정하고 싶다면 rem 값을 얼마를 입력해야 하는지? 스타일 시트를 읽는데 45rem 값이 있다면 이게 몇 픽셀이지? 등

.container {
  /* 딱 봐도 720px */
  width: 720px;
  /* 결과는 16px에 45를 곱해서 얼마? */
  height: 45rem;
  /* rem 단위로 바꾸고 싶다면? */
  border: 1px solid black;
}

위와 같이 픽셀 단위로 계산된 결과를 rem으로 예측하는 것은 비직관적이기 때문에, rem 단위로 코딩하는 것은 작업자에게 불편함을 줄 수 있다.

→ SCSS로 변환 Function을 만들어서 선언하면 된다!

Rem 장점

웹 브라우저마다 다른 기본 폰트 사이즈에 대응
저시력자 접근성에 대응
전체 스타일의 스케일을 손쉽게 조정

웹 브라우저마다 다른 기본 폰트 사이즈에 대응

기본 16px이 모니터에서는 4.2mm의 크기로, 모바일 기기에서는 2.5mm도 안되는 크기로 보이게 되는데, 이러면 모바일 기기는 화면도 작은데 글씨도 더 작아져서 가독성이 떨어지게 된다.

그래서 작은 기기에 주로 활용되는 웹 브라우저의 기본 폰트 사이즈는 16px을 넘는 경우가 있다. 기본 폰트 크기를 늘림으로 써 가독성을 향상시키는 것이다.

그런데 스타일 시트에서 픽셀 단위로만 사용하면, 이런 기본 폰트 사이즈의 차이에 대응하지 못하고 가독성이 떨어지게 된다. 기기의 특성에 맞춰 사전 설정된 폰트 사이즈가 무시되기 때문이다. 이에 대응하려면 기본 폰트 사이즈에 비례하는 단위는 rem을 사용해야 하는 것이다.

저시력자 접근성에 대응

기본 폰트 사이즈 값은 보통 웹 브라우저에서 고정되어 있다(16px). 여기에 더해서 일부 웹 브라우저는 이 기본값을 변경할 수 있는 저시력자 접근성 설정을 제공하는데, 픽셀 단위를 사용하면 여기에서도 해당 설정이 무시되기 때문에, rem 단위를 사용해야만 저시력자 접근성에 유연하게 대응할 수 있게 된다.

전체 스타일의 스케일을 손쉽게 조정

rem은 font-size 뿐만 아니라 모든 사이징 프로퍼티에도 사용하여 전체 레이아웃을 rem 단위로 만들 수도 있다. 루트() 요소 폰트 사이즈를 변경하는 것만으로, 웹 사이트의 전체 폰트 사이즈 / 전체 레이아웃 / 간격을 한 번에 변경할 수 있다. rem 단위는 루트 요소의 폰트 사이즈 값에 대해 상대적으로 계산되기 때문이다.

주의할 것

루트()요소 폰트 사이즈가 16px인데, 전체 레이아웃 스케일을 150%으로 키우고 싶다면, rem 단위로 정의한 스타일 이기 때문에 아래와 같이 간단히 루트()요소의 폰트 사이즈 프로퍼티만 변경해주면 된다.

html {
  /* 루트 요소 폰트 사이즈 */
  /* 기본값 16px에서 150%로 키워 24px */
  font-size: 24px;
}
.title {
  /* 결과 → 24px × 2.5 = 60px */
  margin: 2.5rem;
  /* 결과 → 24px × 1.25 = 30px */
  font-size: 1.25rem;
}

하지만 위 방법에는 문제가 있다. 루트()요소 폰트 사이즈 값을 절대 단위인 px 으로 재정의하게 되면, 사용자 웹 브라우저의 폰트 사이즈 기본값 설정이 무시되고 스타일 시트에서 지정한 값으로 대체되고 만다. (브라우저 마다 루트()요소의 폰트 사이즈 기본값은 조금씩 다르기 때문!)

rem 단위의 본래 목적과 장점을 모두 살리려면, 상대 단위 %를 사용하는 것이 좋다. 아래와 같이 상대 단위를 사용하면 사용자 웹 브라우저의 기본 폰트 사이즈 기본값에 대한 상댓값을 사용하게 되므로, 사용자 접근성을 저해하지 않는다!

html {
  /* 루트 요소 폰트 사이즈, 상댓값 */
  /* 전체 레이아웃의 크기를 150%로 키우기 */
  font-size: 150%;
}
.box {
  /* 결과 → 16px × 150% × 2.5 = 60px */
  margin: 2.5rem;
  /* 결과 → 16px × 150% × 1.25 = 30px */
  font-size: 1.25rem;
}

Em

상대적 단위인 em은 값을 폰트 사이즈에 대한 상댓값으로 계산하여 결정한다. 예를 들어, 부모 요소의 font-size가 20px이고, 자식 요소의 font-size 에 1.5em을 입련하면 자식 요소는 20px에 1.5를 곱해서 30px의 폰트 사이즈 결과값을 얻게 된다.

.parent{
	font-size: 20px;
}

.child {
	font-size: 1.5rem; // 20px * 1.5 = 30px
}

font-size에 em 단위를 쓸 경우, 기반이 되는 값은 바로 상위 요소의 font size이다. em 단위는 font-size 외에도 사이즈 단위가 사용되는 모든 프로퍼티에 사용이 가능하다. 이런 경우에도 계산 기반 값은 폰트 사이즈다. 정확히 말하면, 자신의 폰트 사이즈를 기준으로 다른 속성 em값도 변경될 수 있다.

.parent {
  font-size: 20px;
}
.child-a {
  /* 결과 → 20px × 1.2 = 24px */
  font-size: 1.2em;
  /* 결과 → 자신의 폰트 사이즈 24px × 1.5 = 36px */
  height: 1.5em;
}
.child-b {
  /* 결과 → 자신의 상속받은 폰트 사이즈 20px × 1.5 = 30px */
  height: 1.5em;
}