px을 em, rem으로 변경하는 법 ( feat. sass:math )

- PX
Pixel 은 대게 absolute lenth ( 절대 길이 ) 라고 부른다.
-> 다른 요소들의 크기와 상관없이 동일한 값을 가진다. ( 화면 해상도에 따라 다를 수 있음. )

but. px을 사용하게 되면 사용자의 글꼴 크기 설정을 무시해버리는 상황같은 심각한 문제를 일으킬 수 있다.

보통 브라우저의 default 사이즈는 16px이다. px을 사용하게 되면 모든 브라우저 설정값들을 덮어쓰기때문에, 루트 글꼴 크기는 무시하는 상황이 발생하여 개발자, 사용자가 원하지 않는 문제가 있는 UI가 만들어질 수 있다.

 

이러한 것들을 방지하고자 rem, em 단위를 사용한다.

 

 

- REM

브라우저의 root 글꼴 크기의 배수를 적용.
ex) root 글꼴 크기가 16px인 경우. 16px = 1rem

 

 

- EM

텍스트를 포함하는 여러 element에 배수를 적용.
ex) element의 글꼴 크기가 48px = 3em이라면, 해당 element 내부에선 16px = 1em

반응형 웹앱을 만드는 데에 있어서 px대신 rem, em 단위를 사용하는 것은 선택이 아닌 필수로 생각이 된다.

 

이하 코드는 px 단위가 익숙한 개발자가 사용하면 좋을 px -> rem, em 단위로 변경해 주는 method이다. ( base : 16 )

@use "sass:math";

@function removeUnit($value) {
  @return math.div($value, ($value * 0 + 1));
}

@function px2em($px, $base: 16) {
  @return math.div(removeUnit($px), $base) * 1em;
}

@function px2rem($px, $base: 16) {
  @return math.div(removeUnit($px), $base) * 1rem;
}

 

물론, rem 단위를 px 단위로도 변경할 수 있다.

@use "sass:math";

@function rem2px($rem, $base: 16) {
  @return (removeUnit($rem) * $base) * 1px;
}