1rem 을 10px로 맞추기

리액트 스타일드 컴포넌트를 활용한 예시)

const GlobalStyle = createGlobalStyle`
  html {
    font-size: 62.5%;
  }
  
  body {
    font-size: 1.6rem;
  }
`;

 

rem은 최상위 요소(html 태그)에 지정된 font-size의 값을 기준으로 한다.

html의 기본 font-size는 16px이다.

즉, 아무런 설정을 하지 않았을 때 1rem = 16px이라는 공식이 성립된다.

 

따라서 1rem을 10px로 맞추기 위해선 html의 기본 크기를 10px로 만들면 된다.

그러나 html의 font-size를 10px로 줄여버리게 되면 치명적인 문제가 생긴다.

 

바로 1rem이 10px이 됐을지 언정 16px이 기본값이었던 각 태그들의 font-size도 10px로 바뀐다는 것이다..

css를 할 때마다 매번 'font-size: 1.6rem;' 을 써줘야한다는 얘기 

 

그렇기에 body에다가 font-size: 1.6rem(혹은 16px)을 해주게 되면 일일이 css를 적을 때마다 font-size를 적어주지 않아도 된다.