Javascript를 활용하여 pixel → rem 단위로 변환해보자

오늘 실무에서 이미지 요소의 높이값(pixel)을 rem 단위로 변환해서 선언해야 하는 상황이 있었다. 말 그대로 변환해서 선언해주면 되지 않느냐? 이미지마다 사이즈가 천차만별이라 일일이 선언해줄 수가 없어서 Javascript를 이용하는 방법을 검색, 적용하였음.

예제를 만들어보았다.

1
<p id="foo">foo</p>

1
2
3
4
5
6
7
8
9
html {
  font-size: 20px;
}

#foo {
  height: 100px;
  background: grey;
  box-sizing: border-box;
}

p 요소의 높이값을 rem 단위로 변환해볼 것이다.

1
2
3
4
5
const pixelToRemUnit = (pixelUnit) => {
  return pixelUnit / parseFloat(getComputedStyle(document.documentElement).fontSize) + "rem";
}, elem = document.getElementById("foo");

elem.style.height = pixelToRemUnit(elem.offsetHeight);

매개변수로 받는 요소의 사이즈 나누기, html 요소의 font-size(+ 문자열을 실수로 변환 필수)으로 계산한 값에 rem 문자열을 더하여 최종적으로 rem 단위를 반환해준다. 참고로 위의 코드처럼 모든 페이지에서 호출할 수 있게 공통 함수로 만들어주는 게 좋음.

See the Pen RwrYrXb by sel (@selucky) on CodePen.

Hero image from Alltechbuzz