px이 아닌 rem을 쓰는게 좋은 이유
단위 면적 당 픽셀 수(PPI)가 높은 환경일 수록(=한 화면에 많은걸 보여줘야 할 수록) 같은 px 값이라도 더 작게 보임. 그래서 루트 요소의 기본 font-size는 대게 16px이지만 PPI가 높은 모바일은 더 높다.
또한 설정에서 글꼴 크기의 기본값을 변경할 수 있는 경우도 있다(크롬, 파폭)
이러한 이유로 변하지 않는 절대값(px)보다 이런 기본 사이즈에 비례하게 한다면(rem) 같이 확대되고 축소되어 가독성에 더 좋을 것이다
em: 상위 요소의 font-size를 기준으로 몇 배인가로 사이즈를 기입rem: root em, 루트 요소의 font-size가 기준으로 몇 배인가로 사이즈를 기입ex. 1rem(1rem) ⇒ 루트(상위)요소의 1배
- em은 상위요소가 무엇인지 html 요소에 따라 달라지기 때문에 css에서 알기 어려울 수도 있다, 따라서 rem을 권장
두가지 방향이 있음
font-size에 대해서만 사용하기- 부작용이 크게 없다
- 만약 루트의 font-size가 커지게 되어 어떤 요소의 폰트 사이즈가 각 컨테이너보다 더 커버리게 되는 경우가 있다. 이를 대비하려면?
⇒ 컨테이너의 height는 px로 주되, min-height를 rem 단위로 준다
- 모든 프로퍼티에 대해서 사용하기
⇒ 폰트 사이즈가 컨테이너보다 더 크게 되는 경우는 없을 것이다. 하지만 많은 부작용이 있다
- 비율로 계산을 해야해서 덜 직관적일 수 있다, 따라서 기본을 10px로 주면 계산하기 좋다
- 루트 요소의 font-size를 절대값 px로 주면, 브라우저의 설정을 무시하게 된다
⇒ 따라서 퍼센테이지로 주면 좋다(10px는 16px의 62.5%)
- 참고) awesome font의 크기는 rem을 쓰는듯,, root의 font-size를 바꾸면 크기가 달라진다 ㅎ