[CSS] rem이 왜 반응형이지 ?

웹 프론트엔드 개발자로 수많은 프로젝트를 진행하다 보면 컴포넌트의 사이즈를 정할 때 px을 사용하지 말라고 많이 들었을 것이다.

 

px은 정적인 단위로, 데스크톱, 태블릿, 모바일까지 다양한 기기로 웹페이지를 접속하는 현 시점에서 불리하기 때문이다.

그와 동시에, rem 혹은 em을 사용하라는 말도 들어봤을거라 생각한다.

 

rem

rem은 root 폰트 사이즈를 1rem으로 계산하여 사용하는 방식이다. 부모 폰트 사이즈를 기준으로 하는 em과는 다르게, 가장 상위에 존재하는 root의 폰트 사이즈를 기준으로 하기에 보다 일관적인 UI를 나타낼 수 있다.

rem 반응형에 대한 글들

 

하지만 나는 개발을 하면서 왜 rem이 반응형인지 의문이 들기 시작했다.

root 의 폰트 사이즈를 기준으로 철저히 계산된 정적인 값이 아닌가?

 

하지만 언제까지나 이 생각은 데스크톱 웹 페이지에만 해당되는 사항이었다.

 

 

그럼 도대체 rem을 가지고 어떻게 반응형에 써먹냐!

 

rem은 루트 요소의 폰트 사이즈를 가지고 1rem을 계산한다고 했다.

기기별 반응형 사이즈

 

우리가 사용하는 기기는 위 사진처럼 정말 다양한 화면 크기를 가지고 있다.

우리는 저런 사이즈 변화에 맞게 media-query 등을 사용하여 분기별로 레이아웃을 달리하는 방식으로 반응형 작업을 한다.

 

그럼 레이아웃 크기가 각각 다른 기기 사이즈에 맞게 변하면 더 좋지 않을까 ?

즉, 사이즈 단위가 알아서 기준 크기에 맞게 계산되면 어떨까 ? (root 크기만 변경된다면, rem을 사용하는 단위는 그 루트 크기를 기준으로 계산하기 때문)

 

여기서 우리는 반응형 작업을 할 때, 반응형 크기에 따라 root 의 폰트 사이즈도 조정해줄 수 있다.

@media (min-width: 768px) and (max-width: 1023px){
    * {
      font-size: 10px
    }
  }
  @media all and (max-width: 767px){
    * {
      font-size: 7px
    }
  }

 

위 코드처럼 작성한다면 특정 사이즈에서는 rem의 기준값이 변경되어 그 rem을 기준으로 모든 사이즈가 변하게 된다.

 

이렇게 rem을 사용하여 반응형 작업을 할 수 있기 때문에 "반응형 작업하려면 rem을 써라" 라는 말이 나오는 것이다.

 

 

 

다시 정리하자면 , rem만으로는 반응형 작업이라고 하기 애매하지만, 분기에 따라 root의 font-size를 변경한다면 rem을 가지고 반응형 디자인을 적용할 수 있다.