[Responsive] 상대 단위 (rem, %, em, vw, vh, vmin, vmax..)

상대 단위

• 반응형 퍼블리싱에서 상대 단위는 화면 크기나 부모 요소, 루트 요소를 기준으로 크기를 조절하는 단위
• 고정 단위(px)보다 유연하게 반응하기 때문에 다양한 기기 환경에서 필수로 사용

---

rem (Root EM)

기준

• html 요소(font-size)를 기준으로 배수 계산
• 1rem = html font-size

특징

• 부모 요소 영향 없음 → 전역 일관성 유지
• 전역 폰트 크기 조정 시 전체 UI가 비례 변경
• 주 사용처 : 폰트크기, 간격, 그리드

장점

• 예측 가능, 유지보수 편리
• 반응형에서 @media로 html font-size만 변경하면 전체 UI 크기 자동 조정
• 접근성 측면에서도 브라우저 확대/축소와 자연스럽게 연동됨

주의사항

• html font-size 설정이 중요 (기본 브라우저 html font-size:16px 보통 62.5%로 설정(16 x 0.625=10) 해서 1rem = 10px로 계산)
• 10px = 1rem으로 맞춰 px → rem 변환 계산이 쉽게 되도록 설정
• CSS에서 %로 지정하면 부모 요소(여기서는 html의 부모인 root)의 크기를 기준으로 비율 계산을 해요

html { font-size: 62.5%; } // 10px
body { font-size: 1.6rem; } // 16px

---

% (percent)

기준

• 부모 요소의 크기를 100%로 보고 비율을 계산
• 너비(width)일 경우 부모 요소의 너비 기준
• 높이(height)일 경우 부모 요소의 높이 기준 (단, 부모 높이가 명시되어 있어야 함)

특징

• 부모 크기에 따라 유동적으로 변함 → 반응형에 유리
• padding/margin에도 사용 가능 (단, %는 부모의 너비 기준으로 계산됨 → 세로 방향 여백도 부모의 너비 기준)
• 주 사용처 : width, padding, margin

장점

• 다양한 화면 크기에 유연 대응
• 간단한 계산

주의사항

• 부모 크기가 변하면 예상치 못하게 변경될 수 있음
• 부모 높이가 auto이면 % height는 적용되지 않음
• %로 줄이되, max-width로 가독성을 유지
• 세로 비율 유지하려면 padding-top에 % 사용 (비디오, 이미지 비율 유지)

.container { width: 90%; max-width: 1200px; }

---

em

기준

• 현재 요소(혹은 부모)의 font-size 배수
• 1em = 현재 폰트 크기와 동일

특징

• 중첩된 요소에서 누적 영향을 받음
  ex) 부모 16px, 자식 font-size 1.2em → 19.2px
• 주 사용처 : 폰트 크기, padding, margin

장점

• 글자 크기에 비례해 간격도 같이 변함 → 컴포넌트 모듈화에 유리

주의사항

• 중첩 요소에서 계산이 꼬일 수 있음 → 예측 어려움
• 전역 레이아웃보다는 개별 컴포넌트에 사용 권장
• 폰트 크기 변경 시 내부 여백이 자동 반응

.card {
  font-size: 1.4rem;
  padding: 2em; /* 폰트 크기 x 2  14*2=28px*/
}

 

---

vw (Viewport Width)

기준

• 현재 브라우저 창(뷰포트) 너비의 1%
• 100vw = 현재 브라우저 화면 너비 전체
• 1vw = (현재 브라우저 너비) ÷ 100
• vw 단위 값 = (목표 px 값 ÷ 전체 뷰포트 너비 px) × 100 
  예) 50vw = (600px / 1200px) *100

특징

• 화면 너비에 비례하여 변화에 실시간 반응
• 가로 스크롤이 생기면 스크롤바까지 포함
• 주 사용처 : 폰트, 레이아웃, 폭

장점

• 배너, 이미지, 풀스크린 레이아웃에 유리
• 폰트 크기를 뷰포트에 맞춰 조절 가능

주의사항

• 모바일 브라우저 스크롤바/주소창 변동으로 값이 미세하게 변할 수 있음
• 너무 작은 뷰포트에서 가독성 저하 → clamp() 활용하여 범위 조절 가능

/* 최소·최대값 제한하여 가독성 유지 */
.title { font-size: clamp(1.6rem, 2vw, 2.4rem); }

 

[CSS] clamp() 함수

 

---

vh (Viewport Height)

기준

• 현재 브라우저 화면(뷰포트) 높이의 1%
• 100vh = 현재 브라우저 화면 높이 전체

특징

• 화면 높이에 비례
• 풀스크린 섹션, 스플래시 화면에 많이 사용

주의사항

• 모바일에서 주소창 보이기/숨기기 시 값 변동 → 레이아웃이 갑자기 튀는 문제 발생
• 해결책: CSS lvh(Large Viewport Height), JS 계산으로 보정

---

vmin / vmax

기준

• vmin: 뷰포트 너비·높이 중 작은 쪽의 1%,
•  항상 짧은 축 기준
• 주 사용처 : 정사각형/비율 유지 레이아웃

특징

• 정사각형 비율 유지에 유리 (vmin)
• 예측 어려움

.square {
  width: 50vmin;
  height: 50vmin;
}
/* 화면 크기에 맞춰 항상 정사각형 유지 */

---

vmax

기준

• 뷰포트 너비·높이 중 큰 쪽의 1%
• 항상 긴 축 기준

특징

• 화면 전체 커버 가능
• 비율 깨질 수 있음
• 주 사용처 : 큰 배경요소

.square {
  width: 50vmin;
  height: 50vmin;
}
/* 화면 크기에 맞춰 항상 정사각형 유지 */

 

---

ch

기준

• 현재 폰트의 0 문자 폭 기준
• 10ch = “0” 글자 10개 너비

특징

• 가변 폭 폰트에서는 의미가 애매할 수 있음
• 주 사용처 : 입력창, 텍스트 영역

실무 활용

• 입력창(input, textarea) 기본 길이 설정 시 글자 수 기준 레이아웃 가능

---

실무에서 자주 사용하는 작업 방식

루트 폰트 크기를 기반으로 한 rem 단위

• 장점: 계산이 단순 (1rem ≈ 10px)
• 반응형일 때 @media에서 html의 font-size를 조정 → 전체 요소가 비례 변경

html {
  font-size: 62.5%; // 10px 기준 (기본 16px * 0.625)
}

body {
  font-size: 1.6rem; // 16px
}

.container {
  padding: 2rem; // 20px
}

---

%와 rem 혼합 레이아웃

• 장점: 작은 화면에서는 %로 줄어들고, 큰 화면에서는 최대 폭 제한
• 실무 팁: 카드형 레이아웃, 컨테이너 중앙정렬에 필수

.wrapper {
  width: 90%;       /* 브라우저 너비의 90% */
  max-width: 120rem; /* 최대 1200px */
  margin: 0 auto;
}

---

뷰포트 단위로 유연한 폰트 & 이미지 크기

 

• clamp()로 최소~최대 범위 제한을 걸어 폰트나 박스 크기가 너무 작거나 커지지 않게 함
• 이미지나 배경은 background-size: cover;와 조합해서 사용

.title {
  font-size: clamp(1.6rem, 2vw, 2.4rem); /* 최소 16px, 최대 24px, 중간은 vw */
}

.hero {
  height: 100vh; /* 화면 꽉 채움 */
}

 

---

em 단위를 컴포넌트 단위 간격에 사용

• 컴포넌트 폰트 크기를 변경하면 내부 여백도 함께 조정됨 → 모듈화 용이

.card {
  font-size: 1.4rem;
  padding: 2em; /* 폰트 크기의 2배 */
}

---

모바일 퍼스트 + 상대 단위

• 기기별 비율 조정으로 폰트, 여백, 레이아웃을 한 번에 반응형
• 유지보수 편리

html { font-size: 56.25%; } // 9px

@media (min-width: 768px) {
  html { font-size: 62.5%; } // 10px
}

@media (min-width: 1280px) {
  html { font-size: 68.75%; } // 11px
}

---

단위 선택 가이드

 

• rem + %를 같이 쓰면 전역 스케일 조정 + 비율 유지가 동시에 가능
• 폰트는 rem 중심, 레이아웃은 %, 뷰포트 반응형 요소는 vh/vw 조합이 안정적
• clamp()를 적극 활용하면 작은 화면에서 가독성, 큰 화면에서 안정성 둘 다 챙길 수 있음

 

상황	단위	선택 이유	주의사항	코드 예시
전역 폰트 크기, 간격	rem	루트(font-size) 기준, 전역 일관성	html font-size 조정 시 전체 영향	html {font-size: 62.5%;} body {font-size: 1.6rem;}
컴포넌트 내부 여백	em	해당 요소 폰트 크기에 비례	중첩 시 배수 누적	.card {padding: 2em;}
메인 레이아웃 폭	% + max-width	화면 축소 시 유연 대응 + 최대 폭 제한	부모 크기에 종속	.container {width: 90%; max-width: 120rem;}
풀스크린 섹션 높이	vh	화면 높이 100% 채움	모바일 주소창 변동 값 주의	.hero {height: 100vh;}
풀스크린 섹션 너비	vw	화면 너비 100% 채움	스크롤바 포함 가능	.banner {width: 100vw;}
폰트 크기 자동 스케일링	clamp() + vw	최소~최대 제한, 뷰포트 비례	너무 작은 화면은 min값 필요	.title {font-size: clamp(1.6rem, 2vw, 2.4rem);}
비율 유지 박스(정사각형)	vmin	작은 축 기준 크기 유지	기기 회전 시 크기 변동	.square {width: 50vmin; height: 50vmin;}
넓은 배경 요소	vmax	긴 축 기준 비율 유지	비율 깨질 수 있음	.bg {width: 100vmax; height: 100vmax;}
글자 수 기반 길이	ch	글자 수 정확히 맞추기	가변 폭 폰트 차이	.input {width: 20ch;}
세로 비율 유지 컨테이너	padding-top + %	부모 너비 기준 높이 계산	부모 너비 필요	.video {padding-top: 56.25%;}