[css] rem 의 정의와 사용법, 픽셀보다 권장하는 이유

2021. 7. 27. 14:55퍼블리싱/CSS

반응형

 

 

픽셀 사용을 추천하지 않는 이유

픽셀은 고정된 절대값이므로 접근성에 저해될 수 있다.

즉, 유저 입장에서 볼 때 브라우저의 기본 폰트값을 변경하더라도 픽셀값은 변하지 않는다.

물론 유저가 ctrl +/- 를 이용하여 줌 하는 경우에는 접근성을 해치진 않는다.

 

 

REM

 

Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).

https://developer.mozilla.org/en-US/docs/Web/CSS/length

 

 

html, 즉 루트 요소의 폰트사이즈를 기준으로 폰트 사이즈를 설정하는 방법.

 

일반적으로 대부분의 브라우저 기본 폰트 사이즈는 16px이다.

html 폰트사이즈를 10px로 설정한다면, 1.6rem은 16px이 되어 계산이 수월하다.

하지만 이 경우 픽셀 사용과 똑같은 문제가 발생한다.

 

따라서 html 폰트사이즈를 퍼센테이지, 정확히는 62.5%로 설정하는 방법이 권장된다.

기본사이즈인 16px의 62.5%가 10px이기 때문.

이 경우 역시 1.6rem=16px 이 성립한다.

동시에 유저가 기본 사이즈를 변경하더라도 문제가 생기지 않는다.

물론 최고의 시나리오는 html 폰트 사이즈를 100% 로 설정하는 것인데 이 경우 더욱 디테일한 계산이 필요하다.

ex, 16px=1rem, 20px=1.25rem

 

html, body {
    font-size: 62.5%;
    line-height: 1.285;
}

 

반응형 작업

rem을 이용하면 반응형 작업이 쉬워진다.

html의 font-size를 60%, 50% 등으로 줄이게 되면 자연스레 전체 사이즈들이 줄어든다.

다만 이렇게 했을 때 디자이너의 시안과 달라지는 경우는 오히려 더 계산이 필요하다.

 

1rem 100% 16px
62.5% 10px
50% 8px

 

예를 들어 반응형 중 일부 쿼리단의 html font-size를 50%로 적용한다고 가정하자.

보통 포토샵으로 3배수 시안을 받는 경우가 많은데,

예를 들어 요소의 시안 사이즈가 240px 이라면, 실제 적용하는 사이즈는 80px 이다.

이제 이 80px을 rem으로 변환하게 되면 나누기 8 하여 10rem이 된다.

즉, 시안사이즈 ÷ 3 ÷ 8 이 되는 것이다.

scss를 사용해서 이를 함수화시킬 수 없을까 하고 찾아보니 역시, 여러가지 방법이 나온다.

(물론, 관련 외부 라이브러리 사용도 가능하다)

 

$browser-context:10; //브라우저 기본폰트

@function rem($px, $context: $browser-context) {
  @return #{$px/$context}rem;
}

// 혹은

@function rem($px, $context: $browser-context) {
  $remSize: $px / $context;
  @return #{$remSize}rem;
}

https://skout90.github.io/2019/10/15/CSS/SCSS-%EC%8B%A4%EC%82%AC%EC%9A%A9%ED%8C%81-%EB%B0%98%EC%9D%91%ED%98%95%EC%B2%98%EB%A6%AC/

 

 

위의 함수는 62.5% 환경에서 작업 시 크게 필요가 없다.

하지만 아까 예로 든 html의 font-size가 50%인 경우에 유용하게 쓸 수 있다.

변수 browser-context에 8을 입력해주면 바로 계산이 되기 때문.

 

 

응용

scss : 

$browser-context:8; //html font-size 50%

@function rem($px, $context: $browser-context) {
  @return #{$px/$context}rem;
}

html{
  font-size:50%;
}

.box{
  width:rem(100);
  padding: rem(20) rem(80);
  background:pink;
}
.txt{
  background:#fff;
  font-size:rem(16);
}

 

css :

html {
	font-size: 50%;
}

.box {
	width: 12.5rem;
	padding: 2.5rem 10rem;
	background: pink;
}

.txt {
	background: #fff;
	font-size: 2rem;
}

 

 

참고사이트 :

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

https://blog.jeongtae.com/rem-고찰

https://yamoo9.gitbook.io/scss-mixins/utilities/units/rem

반응형