[CSS]%? vw/vh? rem/em? 헷갈리는 반응형 단위들 정리

반응형 웹을 구현할 때 가장 헷갈리는 것 중 하나가 적절한 단위 선택이다.

%, vw/vh, rem/em은 각각 다른 기준점과 동작 방식을 가지고 있어서, 제대로 이해하지 못하고 사용하면 의도한 디자인과 완전히 다른 결과물이 나올 수 있다...!

각 단위들의 특징과 실제 프로젝트에서 언제, 어떻게 활용하면 좋을지 정리해보고자 한다.

---

✅ % (퍼센트) - 부모 요소 기준

- 부모 요소의 크기를 기준으로 상대적인 크기를 설정

🤔 언제 사용할까?

  1️⃣ 컨테이너나 박스의 너비나 높이를 부모 요소에 비례하여 조정해야 할 때

  2️⃣ 반응형 그리드 레이아웃을 구현할 때 (예: 12칼럼 그리드 시스템)

  3️⃣ 다양한 화면 크기에서 일관된 비율을 유지해야 하는 요소들

.container {
  width: 80%; /* 부모 요소의 80% */
  height: 50%; /* 부모 요소의 50% */
}

  ➕ 퍼센트 단위는 항상 부모 요소의 크기에 직접적인 영향을 받기 때문에, 부모가 auto이거나 크기가 정해지지 않았다면 예상과 다르게 동작할 수 있으니 주의할 것!

---

✅ vw / vh - 뷰포트 기준

- vw(viewport width): 브라우저 뷰포트 너비의 백분율을 나타내는 단위

- vh(viewport height): 브라우저 뷰포트 높이의 백분율을 나타내는 단위

- 100vw는 브라우저 화면 전체 너비, 100vh는 브라우저 화면 전체 높이를 의미하며 스크롤바 포함

🤔 언제 사용할까?

  1️⃣ 화면 전체를 채우는 요소를 만들 때 (예: 풀스크린 배경 이미지, Hero 섹션, 랜딩 페이지)

  2️⃣ 뷰포트 크기에 따라 직접적으로 반응해야 하는 반응형 요소를 구현할 때

  3️⃣ 디바이스 화면 크기에 관계없이 일정한 비율을 유지해야 하는 요소

.full-screen {
  width: 100vw;
  height: 100vh;
}

  ➕ 모바일 브라우저에서는 vh 단위가 주소창(URL 바)을 포함한 전체 화면 높이를 기준으로 계산되기 때문에, 스크롤 시 주소창이 사라지는 경우 레이아웃이 깨질 수 있음 -> 최신 CSS의 단위인 svh(small viewport height), lvh(large viewport height), dvh(dynamic viewport height) 등을 활용해서 해결!

🤔 그럼 svh, lvh, dvh은 언제 사용할까?

svh - 최소한의 화면 높이를 유지해야 할 때 (모바일 주소창이 열려 있어도 레이아웃 유지)
lvh - 주소창이 완전히 사라졌을 때 화면을 꽉 채우고 싶을 때 (예: 배경 이미지, Hero 섹션)
dvh - 사용자의 브라우저 환경 변화(주소창 유무, 키보드 열기/닫기 등)에 따라 자동 조정하고 싶을 때

---

✅ rem / em - 폰트 크기 기준

◼ rem (root em) - 루트 요소 기준

- html 요소(루트 요소)의 font-size를 기준으로 크기가 결정되는 단위

🤔 언제 사용할까?

  1️⃣ 폰트 크기, 패딩, 마진 등 다양한 UI 요소의 크기를 일관되게 조정할 때

  2️⃣ 전역적인 크기 조정이 필요한 경우 (예: 다크 모드, 접근성 기능)

  3️⃣ 브라우저 기본 폰트 크기를 존중하면서도 일관된 디자인을 유지해야 할 때

body {
  font-size: 16px;
}
.text {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

◼ em - 부모 요소 기준

- 부모 요소의 font-size를 기준으로 크기가 결정되는 상대적인 단위

🤔 언제 사용할까?

  1️⃣ 버튼, 입력 필드, 아이콘 등 특정 컴포넌트 내부에서 요소 간의 상대적인 크기를 조정할 때

  2️⃣ 부모 요소의 폰트 크기에 따라 크기가 자동으로 달라져야 하는 유동적인 UI 요소를 만들 때

  3️⃣ 특정 컴포넌트 내에서만 유지되어야 하는 비율 관계를 설정할 때

.button {
  font-size: 1em; /* 부모의 font-size와 동일 */
  padding: 1.2em; /* 글자 크기를 기준으로 패딩 설정 */
}

  ➕ em은 부모 요소의 폰트 크기에 직접적인 영향을 받으므로, 여러 요소가 깊게 중첩될 경우 예상보다 크기가 기하급수적으로 커질 수 있음!

---

💡 정리 및 느낀점

레이아웃(그리드, 컨테이너, 박스) -> %

전체 화면을 차지하는 요소들(배경, 헤더, 모달) -> vw, vh

폰트 크기, 여백, 전역 UI 요소 -> rem (일부 em)

컴포넌트 내부 요소들 -> em

처음에 반응형 웹을 구현할 때 굉장히 헷갈려서 이리저리 막 바꿔가면서 사용했었다...

아니면 컨벤션을 정해서 일관성 있고 유지보수성이 높은 방식으로 코드를 작성하는 것도 좋을 것 같다! 

---

📜관련 공식문서들

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

https://developer.mozilla.org/en-US/docs/Web/CSS/length

https://www.w3.org/TR/css-values-4/

https://css-tricks.com/fun-viewport-units/