[CSS 기초] CSS 단위 정리 – vw, vh, em, rem의 개념과 사용 방법

CSS 단위 📏

CSS에서는 크기를 지정할 때 다양한 단위를 사용할 수 있습니다.

대표적으로 반응형에서 많이 사용하는 단위는 다음과 같습니다.

• vw / vh → 화면 기준 단위
• em / rem → 글자 기준 단위

이 단위들은 반응형 웹에서 매우 중요하게 사용됩니다.

주요 포인트 Top3

01. vw / vh (화면 기준 단위)

vw와 vh는 화면 크기를 기준으로 하는 단위입니다.

• vw → Viewport Width (화면 가로 크기)
• vh → Viewport Height (화면 세로 크기)

👉 Viewport는 현재 브라우저 화면 영역을 의미합니다.

.box{
  width: 50vw;
  height: 50vh;
  background-color: lightgray;
}

👉 의미

• 50vw → 화면 가로의 50%
• 50vh → 화면 세로의 50%

즉, 화면 크기에 따라 요소 크기가 자동으로 변경됩니다.

02. em (부모 기준 단위)

em은 Element를 기준으로 하는 단위입니다.
정확히는 부모 요소의 글자 크기를 기준으로 계산됩니다.

HTML 구조

<div class="container">
  부모 요소
  <div class="box">
    자식 요소
  </div>
</div>

CSS

.container{
  font-size: 20px;
}
 
.box{
  font-size: 2em;
}

👉 결과 설명

• 부모 글자 크기 → 20px
• 자식 2em → 20px × 2 = 40px

즉, 부모 크기에 따라 자식 크기가 변경됩니다.

em은 중첩될 경우 값이 계속 커질 수 있습니다.

HTML

<div class="container">
  부모
  <div class="box">
    자식
    <div class="text">
      손자
    </div>
  </div>
</div>

CSS

.container{
  font-size: 20px;
}
 
.box{
  font-size: 2em;
}
 
.text{
  font-size: 2em;
}

👉 결과

• container → 20px
• box → 40px
• text → 80px

이처럼 값이 계속 누적됩니다.

03. rem (root 기준 단위)

rem은 Root em의 줄임말입니다.
즉, root 요소인 html을 기준으로 계산됩니다.

HTML

<div class="container">
  <div class="box">
    텍스트
  </div>
</div>

CSS

html{
  font-size: 16px;
}
 
.box{
  font-size: 2rem;
}

👉 결과

2rem = 32px

항상 html 기준으로 계산되기 때문에
중첩 영향을 받지 않습니다.

04. em vs rem 차이

em → 부모 기준
rem → html(root) 기준

👉 정리

• em → 부모 기준 (중첩 가능)
• rem → root 기준 (고정 기준)

05. 실제 사용 예시

<div class="container">
  <h2 class="title">제목</h2>
  <p class="text">내용입니다</p>
</div>

html{
  font-size: 16px;
}
 
.title{
  font-size: 2rem;
}
 
.text{
  font-size: 1rem;
}
 
.container{
  width: 80vw;
  height: 100vh;
  background-color: lightgray;
}

👉 결과

• 제목 → rem 사용
• 전체 화면 → vh 사용
• 레이아웃 → vw 사용

GOYO.’s Tip 💡

• 반응형에서는 rem을 많이 사용합니다
• vw, vh는 화면 크기 기준 레이아웃에 사용합니다
• em은 중첩될 수 있으므로 주의해서 사용합니다

마무리 🎯

vw, vh는 Viewport 기준 단위이며,
em, rem은 글자 크기 기준 단위입니다.

반응형 작업에서는 rem과 vw, vh를 함께 사용하는 것이 중요합니다.