dev_or_alive

[CSS][길이단위] px, em, rem 본문

Web Programming/CSS

[CSS][길이단위] px, em, rem

개발로 먹고살자 2025. 5. 8. 00:42

✅ 개요

CSS를 처음 접하면 가장 흔한 px(픽셀)부터 em, rem 같은 여러가지 길이 단위가 있습니다.

이 글에서는 길이 단위가 등장한 배경부터 각 단위의 특징 및 사용 시점까지 알아보도록 하겠습니다.

✅ 길이 단위란?

웹에서 “길이”는 글꼴 크기나 여백, 레이아웃의 폭처럼 화면상의 모든 크기를 정의합니다.

크게는 절대 단위와 상대 단위로 나누어집니다.

👉 절대 단위: 환경이 달라도 변하지 않는 값

👉 상대 단위: 기준이 되는 크기에 비례해 바뀌는 값

🔥 px: 절대 단위

px은 절대 단위의 대표 주자이며, 브라우저가 규정한 “참조 픽셀” 하나에 대응합니다.

특징으로는 화면의 해상도, 사용자 글꼴 설정과 거의 무관하게 고정됩니다.

또한 값이 직관적이라 초보자가 이해하고 계산하기가 쉽습니다.

 

🎉 언제 사용하죠?

👉 테두리, 아이콘 등 정밀해야 하는 요소에 적합합니다.

👉 시각적 일관성이 접근성보다 우선일 때 적합합니다.

🔥 em: 상대 단위 - 현재 글꼴 크기 배수

em은 현재 글꼴 크기의 배수를 나타내며 해당 요소의 font-size를 1em으로 삼습니다.

아래 예시를 보면 이해가 조금 더 쉽습니다.

<body>
  <div class="box">
    📦 .box (1.25 em → <strong>20 px</strong>)
    <p class="child">
      🌱 .child (1.2 em → <strong>24 px</strong>)
      <span class="grandchild">
        🍀 .grandchild (0.8 em → <strong>19.2 px</strong>)
      </span>
    </p>
  </div>
</body>

/* 1단계: 문서 전체 기본 글꼴 크기 = 16px */
body {
  font-size: 16px;
  line-height: 1.6;
  margin: 2rem;
  font-family: system-ui, sans-serif;
}

/* 2단계: .box는 1.25em → 16px × 1.25 = 20px */
.box {
  font-size: 1.25em;
  padding: 1em; /* 20px */
  border: 0.2em solid #999; /* 0.2 × 20 = 4px */
  background: #f8f8f8;
}

/* 3단계: .child는 1.2em → 상위 20px × 1.2 = 24px */
.child {
  font-size: 1.2em;
  margin-top: 1em; /* 24px */
  color: #0066cc;
}

/* 4단계: .grandchild는 0.8em → 상위 24px × 0.8 = 19.2px */
.grandchild {
  font-size: 0.8em;
  margin-top: 1em; /* 19.2px */
  color: #d14;
}
  1. body의 font-size를 정의한다. (16px) 
  2. box 클래스의 font-size는 부모요소(body)의 font-size의 1.25배로 계산한다. (20px) 
  3. box 클래스의 padding 값은 box 클래스 자신의 font-size의 1배로 계산한다. (20px : box class의 font-size값) 

위 내용을 보면 조금 헷갈리는 부분이 있을수 있는게,

font-size의 경우는 부모요소의 font-size를 참조하여 계산하고 이외의 속성들은 “자신”의 font-size를 이용하여 계산합니다.

기본 적으로 em 단위는 해당 속성이 선언된 요소의 글꼴 크기를 참조합니다.

자신의 font-size를 참조해야 하지만 이를 계산하기 위해 font-size가 먼저 계산이 필요하기 때문에

font-size는 부모 글꼴을 기준으로 영향을 받습니다.

 

🎉 언제 사용하죠?

👉 버튼이나 배지처럼 컴포넌트 내부의 비율을 유지하고 싶을 때 유용합니다.

👉 글꼴 크기와 함께 padding값이나 영역을 조정할 때 유용합니다.

 

🎉 주의 사항

👉 중첩이 깊어질수록 예상보다 값이 커질 수 있습니다.

🔥 rem: 상대 단위 - 루트 글꼴 크기 배수

rem은 em과 비슷하지만 참조하여 계산하는 font-size가

부모 요소가 아닌 html 요소의 font-size를 이용합니다.

특징으로는 “어떤 깊이”에 있어도 기준이 하나이기 때문에 계산이 안정적입니다.

또한 사용자가 브라우저 “기본 글꼴 크기”를 키우면 레이아웃도 함께 확대되기 때문에 접근성이 우수합니다.

아래 코드를 이용하여 테스트시 html의 font-size만 변경해도 전체적인 size가 증가하는것을 알 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>rem 단위 데모</title>
    <style>
      /* 1단계: 루트 글꼴 크기를 62.5%로 설정 → 1rem = 10px */
      html {
        font-size: 16px; /* 16px × 0.625 = 10px */
      }

      body {
        font-family: system-ui, sans-serif;
        line-height: 1.6;
        margin: 3rem; /* 30px */
        background: #f5f7fa;
      }

      /* 2단계: 카드 레이아웃 */
      .card {
        width: 28rem; /* 280px */
        padding: 2rem; /* 20px */
        border-radius: 1rem; /* 10px */
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1); /* 0 4px 10px */
        background: #fff;
        margin-bottom: 2.4rem; /* 24px */
      }

      .card h2 {
        font-size: 2.4rem; /* 24px */
        margin-bottom: 1.2rem; /* 12px */
      }

      .card p {
        font-size: 1.6rem; /* 16px */
        margin-bottom: 1.6rem; /* 16px */
      }

      .btn {
        display: inline-block;
        font-size: 1.4rem; /* 14px */
        padding: 0.8rem 1.6rem; /* 8px 16px */
        border-radius: 0.6rem; /* 6px */
        background: #0066cc;
        color: #fff;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>🚀 rem 단위 카드</h2>
      <p>
        이 카드는 `rem`만 사용하여 크기를 정의했습니다.<br />
        루트 글꼴 크기만 바꾸면 전체 스케일이 한꺼번에 조정됩니다.
      </p>
      <a href="#" class="btn">자세히 보기</a>
    </div>
  </body>
</html>

 

🎉 언제 사용하죠?

👉 전체 그리드, 여백, 섹션 폭 등 전역 스케일을 설계할 때 유용합니다.

👉 아래 코드와 같이 미디어 쿼리와 함께 반응형 디자인에 유용합니다. 

/* 기본: 모바일 ~ 479 px */
html {
  font-size: 62.5%;
} /* 1 rem = 10 px */

/* 태블릿: 480–1023 px */
@media (min-width: 480px) {
  html {
    font-size: 68.75%;
  } /* 1 rem ≈ 11 px */
}

/* 데스크톱: 1024 px 이상 */
@media (min-width: 1024px) {
  html {
    font-size: 75%;
  } /* 1 rem = 12 px */
}

✅ 마무리

각 단위는 상황에 맞게 작성하여야 효과적으로 사용할 수 있기 때문에 어떤 장점을 갖고 있는지,

단점은 무엇인지를 확실히 인지하고 사용하시는게 좋습니다.

또한 %, vw, vh, dvh… 등 여러가지 길이를 설정할 수 있는 단위가 있으니 이러한 단위를 적절히 사용하셔야 여러 디바이스에서의 접근성을 보장할 수 있습니다.

반응형

'Web Programming > CSS' 카테고리의 다른 글

[CSS][길이 단위] %, vw, vh  (0) 2025.05.19
[CSS][color] color, background-color  (0) 2025.05.04
[CSS][선택자] 개요 및 기본 문법  (1) 2025.05.03
[CSS] CSS 개요 및 기초 이해하기  (0) 2025.05.01
SVG(Scalable Vector Graphics)에 대해 알아보자  (2) 2024.04.07
'Web Programming/CSS' Related Articles more