01. Tailwind CSS와 CSS 기초 (rem)

rem과 default font size

대부분 브라우저는 default font size가 16px이다. (Chrome, Safari, FireFox 등)

테스트 해보려면 globals.css에

@layer base {
  html {
    @apply text-[16px];
  }
}

를 바꿔보면 글자 크기가 바뀌지 않는 것을 확인할 수 있다.

 

그러나 일부 모바일 태블릿 브라우저나 e-book reader에서만 ppi 때문에 다르게 가져간다.

이 때문에 CSS 할 때 모든 사이즈는 px로 하드코딩하는 대신에 rem을 사용하는 것이

(심지어 어떤 때는 border 굵기까지도) best practice가 되었다.

 

rem이란 default font size에 비례하는 숫자이다.

모든 것을 px이 아닌 rem으로 바꾸는 것이 좋다. 

 

하지만 사람은 10진법에 익숙하다. 16px은 금방금방 계산하기 어렵다.

예전에 CSS 혹은 SCSS를 할 때, 한 때는 default font-size를 아래처럼 10px로 맞춰놓고 사용한 적도 있었다.

html {
  font-size: 62.5%; // browser 기본이 16px이라 10px로 맞추고 시작. 10/16 = 0.625 이므로
}

예를들어 box 가로 size를 24px로 하고 싶으면 width: 2.4rem이라고 하면 되니 계산이 편하다.

 

위에서 10px이라고 명시적으로 사용하지 않고 62.5%라고 사용하는 이유는 역시나 default 크기가 다른 특정 모바일 템플릿에서

강제로 10px이라고 reset하기보다 해당 브라우저의 크기의 62.5%라고 쓰는 것이 더 유연하기 때문.

 

그러나 (이건 추측이지만) 일부 개발자(퍼블리셔)는 10px로 reset하지 않고

그대로 browser의 16px에 맞춰서 코딩하였고

10px에 맞춰 코딩하는 개발자와 혼동이 발생한 듯 하다.

(난 그래도 10px로 reset하는게 좋은데) 요즘은 대세가 16px에 맞춰 쓰는 것이 된 듯하다.

즉, 24px을 쓰고 싶으면 2.4rem이 아닌 1.5rem이라고 쓰는게 대세다.

 

Tailwind CSS도 대세를 따른 것 같다. 

Tailwind CSS를 설치하면 자동으로 CSS를 reset해주는데

default font-size는 그대로 16px로 놔둔다.

10px로 맞추면 Tailwind CSS 공식문서에서 찾아보는데 unit이 맞지 않아 혼동이 오는 경우가 발생한다.

 

rem의 중요성

참조: https://brunch.co.kr/@aaahyun04/9 

위 참조에 있는 글을 토대로 직접 테스트를 해보았다.

완전히 똑같은 CSS 코드로 짠 웹페이를 아이폰에서 띄워보고, 내 옆자리 박대리의 안드로이드 폰에서도 띄워보았다.

결과는 왼쪽 두 그림처럼 서로 다르게 보였다.

 

그렇다면 Galaxy Note8에서도 아이폰과 똑같이 보이게 하려면 어떻게 짜야할까?

(물론 아이폰은 안 깨지고 안드로이드라서 깨지는 것은 아니다. 각 기기마다 고유 해상도, ppi를 고려해서 정해진다고 한다.)

만약 px을 이용해서 CSS를 짰다면 일일히 하나하나 다 수정해줘야한다.

그러나 rem으로 CSS를 했다면

html {
  font-size: 62.5%;    /* 10px에 해당 */
}

@media screen and (max-width:370px) {
  html {
    font-size: 58%;   /* 9.28px에 해당 */
  }
}

 

이렇게 미디어 쿼리를 5줄만 넣어주면 위 그림 오른쪽처럼 바뀐다.

 

결론

CSS의 best practice는 px이 아닌 rem으로 코딩하는 것이다.

그런데 Tailwind CSS의 utility class는 전부 rem으로 되어있다.

Tailwind CSS의 인기가 급부상하게 된 이유 중 하나이다.