[CSS] rem, px

Dev_sheep·2024년 9월 22일

CSS

스토리북이라는 컴포넌트 디자인 시스템 개발을 진행했던 중에 이에 대해서 반응형을 찾아보았다.

단 하나의 방법이 아니라 여러 방법을 체크하고 테스트하는 것도 포함해야 하지만, 해당 글에서는 rem을 활용한 방법을 소개해보고자 한다

rem

우리가 주로 사용하는 px과 비교를 해보자

rem
- 상대 단위이며 문서의 최상위 요소(주로<html>)의 글꼴 크기를 기준으로 한다.
- 보통 16px이 기본인데, 이를 1rem으로 설정한다.
px
- 절대 단위이며 디스플레이의 실제 픽셀 크기를 기준으로 하고, 고정된 크기를 제공한다.

그렇기에 rem을 사용해서 화면 크기에 상대적으로 조정이 돼 반응형 디자인에 사용하였다.

html {
  font-size: 16px; /* 기본 폰트 크기 */
}

.button {
  width: 6.25rem; /* 100px = 6.25rem */
  padding: 0.625rem; /* 10px = 0.625rem */
  font-size: 0.875rem; /* 14px = 0.875rem */
}

반응형 코드

간단하게 html, css를 만들어서 화면 크기에 따라 rem을 적용해보자

HTML 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">TEST REM</div>
  </body>
</html>

CSS 코드

<style>
  /* 기본 스타일 */
  html {
    font-size: 16px; /* 데스크탑 기본 폰트 크기 */
  }

  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .box {
    background-color: #4caf50;
    color: white;
    padding: 2rem; /* 반응형 패딩 */
    font-size: 1rem; /* 반응형 텍스트 */
    border-radius: 0.5rem;
    text-align: center;
  }

  /* laptop 화면 */
  @media (max-width: 1024px) {
    html {
      font-size: 15px; /* laptop: 약간 작은 폰트 */
    }
  }

  /* 태블릿 화면 */
  @media (max-width: 768px) {
    html {
      font-size: 14px; /* 태블릿: 더 작은 폰트 */
    }
  }

  /* 스마트폰 화면 */
  @media (max-width: 480px) {
    html {
      font-size: 12px; /* 스마트폰: 가장 작은 폰트 */
    }
  }
</style>