[font] pxToRem 함수 없이 rem 편하게 쓰기

Readme에 쓸 구현 사항을 정리하기 위해 커밋 기록을 살펴보던 중이었다.

global.css를 설정할 때 html에 font-size: 10px을 준 것이 눈에 띄었다.
'이걸 왜 이렇게 줬더라?' 궁금해져서 찾다가 당시 설정할 때 참고한 글을 발견했다.

https://velog.io/@qhflrnfl4324/html-font-size-62.5-%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EC%9E%90

font-size: 10px을 설정한 이유

1. 브라우저의 기본 font-size는 16px이다.
2. 상황에 따라(예: 시각 장애인) 사용자가 브라우저 설정을 통해 글꼴 크기를 변경하는 경우가 있을 수 있다.
3. px로 설정하면 사용자 설정과 관계 없이 계속 같은 글자 크기로 보여지기 때문에 사용자가 설정한 크기대로 '상대적으로' 글꼴 크기가 변하게 하려면 rem을 써야 한다.
4. rem은 항상 루트 글꼴 크기를 참조한다. 따라서 안정적으로 글자 크기를 설정할 수 있다. (예측 가능)
   (비슷한 em은 부모 글꼴 크기를 기준으로 하기 때문에 부모 글꼴 크기가 어떻냐에 따라 가변적이다)
5. px을 rem으로 변경할 때 불편한 점은 기본적으로 1rem = 16px이 되어 pxToRem 함수를 사용하거나 px과 rem이 매칭되는 값을 일일이 기억해주어야 한다는 점이다.
6. 이러한 문제를 해결하기 위해서는 루트 요소인 html에 font-size: 62.5%(= 10px)를 지정해주면 된다. 이 방법으로 1rem이 10px로 지정되어 px을 rem으로 변환하고 싶을 때 단순히 10으로 나눠주면 끝난다.

// 브라우저 기본 폰트 크기를 62.5%(10px)로 만든다.
html {
	font-size: 10px;
}

// 사용하고자 하는 px 값을 10으로만 나눠주면 간단하게 rem 단위로 변환 가능
body {
	 // 16px을 rem으로 바꾸고 싶을 때 16px / 10 = 1.6rem
	font-size: 1.6rem;
}

.nav {
	// 12px을 rem으로 바꾸고 싶다면 12px / 10 = 1.2rem
	font-size: 1.2rem;
}

body에도 font-size를 지정해줘야 하는데 이렇게 하면 font-size를 따로 지정하지 않은 글꼴은 자동으로 1.6rem이 된다.

• pxToRem 함수를 만든 후 일일이 import해서 글꼴마다 적용해줄 필요가 없다.
• px 값에 매치되는 rem 값을 일일이 외울 필요 없어졌다.