디자인·CSS2026년 6월 17일·약 6분 소요

CSS 단위 px·rem·em·%·vw 차이와 선택 기준 — 2026 반응형 가이드

px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 비교표로 정리하고, 1rem=16px 같은 환산 예시와 상황별 추천 단위까지 한 번에 안내합니다.

작성 툴박스 운영자최초 작성 2026년 6월 17일최종 검토 2026년 6월 17일

툴박스 가이드는 W3C·MDN·국제 표준 문서(RFC/ISO)와 한국인터넷진흥원(KISA) 등 공신력 있는 기관의 공개 자료를 기반으로 작성·검토합니다.편집 방침 보기

브라우저 글자 크기를 150%로 키웠는데 본문 글씨가 1px도 커지지 않는다 — font-size: 16px처럼 모든 값을 px로 박아두면 실제로 벌어지는 일이다. 국내 웹사이트 상당수가 여전히 px 고정 폰트를 쓰는데, 이는 사용자의 브라우저 확대 설정을 무시해 웹 콘텐츠 접근성 지침(WCAG 2.1, 성공기준 1.4.4 '텍스트 크기 조정')을 어기기 쉽다. CSS 단위는 취향이 아니라 "확대·반응형에 어떻게 반응하느냐"의 문제다. px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 알면 선택이 명확해진다.

CSS 단위 한눈에 비교

단위	계산 기준점	브라우저 확대 대응	대표 용도
px	고정 픽셀(절대)	사용자 글꼴 확대 무시	테두리, 그림자, 1px 구분선
rem	루트(html) font-size	잘 따라옴	폰트, 여백, 전체 레이아웃
em	직계 부모 font-size	따라오나 중첩 주의	버튼·아이콘 내부 padding
%	부모 요소의 크기	잘 따라옴	너비, 유동 그리드
vw / vh	뷰포트 너비/높이의 1%	잘 따라옴	풀스크린 섹션, 큰 제목

핵심은 오른쪽 두 칸이다. px는 사용자가 글자를 키워도 고정되지만, rem·em·%·vw는 기준값이 바뀌면 함께 늘어난다. 그래서 "사람이 읽는 것(폰트·여백)"은 상대 단위, "물리적으로 정밀해야 하는 것(1px 선)"은 px로 나누는 것이 2026년에도 통하는 원칙이다.

절대 단위 px — 정확하지만 굳어 있다

px는 화면 한 점을 그대로 가리키는 절대 단위다. 1px 테두리, box-shadow의 blur 반경, 아이콘의 미세 정렬처럼 "딱 이만큼"이 필요한 곳에서는 px가 가장 예측 가능하다. 문제는 본문 폰트에 px를 쓰는 경우다. 일부 브라우저는 확대 시 px 글자도 키워주지만, 사용자가 설정에서 기본 글꼴 크기만 키운 경우 px 폰트는 꿈쩍하지 않는다. 결론: 선·그림자·테두리는 px, 글자는 px 금지가 안전하다.

rem과 em — 무엇을 기준으로 삼는가

둘 다 상대 단위지만 기준이 다르다. rem(root em)은 언제나 <html>의 font-size를 기준으로 삼는다. 브라우저 기본값 16px을 기준으로 하면:

1rem = 16px
1.5rem = 24px
0.875rem = 14px
2.5rem = 40px

페이지 어디에 있든 1.5rem은 항상 24px이라 예측이 쉽다. 반면 em은 직계 부모의 font-size를 기준으로 한다. 그래서 중첩되면 값이 곱해지는 함정이 있다. 예를 들어 부모가 font-size: 1.25em(20px)이고 그 안의 자식도 1.25em이면 자식은 20 × 1.25 = 25px이 되고, 한 단계 더 들어가면 31.25px로 계속 커진다. 목록(ul) 안의 목록처럼 깊어질수록 폰트가 의도치 않게 부푸는 버그의 단골 원인이다. 그래서 전역 타이포·여백은 rem, 버튼 안쪽 padding처럼 "그 요소 글자 크기에 비례시키고 싶을 때"만 em을 쓰는 분업이 권장된다.

%·vw·vh와 clamp() 조합

%는 부모 요소의 같은 속성 크기를 기준으로 한다. width: 50%는 부모 너비의 절반이다. vw·vh는 부모가 아니라 화면(뷰포트) 자체가 기준으로, 100vw는 화면 너비 전체, 50vh는 화면 높이의 절반이다. 큰 히어로 제목이나 풀스크린 배너에 잘 맞지만, vw만 쓰면 모바일에서 글자가 너무 작아지고 와이드 모니터에서 과도하게 커진다. 이때 clamp(최소, 유동, 최대)를 묶어 쓴다. 예: font-size: clamp(1.5rem, 4vw, 3rem)은 화면이 작으면 24px(1.5rem) 밑으로 내려가지 않고, 크면 48px(3rem)을 넘지 않으면서 그 사이에서 4vw로 부드럽게 변한다. 반응형 타이포의 사실상 표준 패턴이다.

상황별 추천 — 무엇을 언제 쓸까

작업	1순위 단위	이유
본문·제목 폰트	rem	사용자 글꼴 확대를 그대로 반영, 접근성 안전
컴포넌트 내부 여백	rem 또는 em	글자에 비례시키려면 em
1px 테두리·구분선	px	절대 정밀도 필요
카드·그리드 너비	% 또는 fr(그리드)	부모에 유동적으로 채움
풀스크린 섹션 높이	vh	화면 높이에 맞춤
반응형 큰 제목	clamp(rem, vw, rem)	최소·최대 보장하며 유동

요약하면, 기본은 rem으로 깔고 → 비례가 필요한 국소 부분에 em → 화면 단위가 필요할 때 vw/vh와 clamp → 절대 정밀이 필요한 1px류만 px로 가는 흐름이 가장 관리하기 쉽다. 디자인 단계에서 비율을 미리 잡고 싶다면 반응형 비율 계산기로 가로·세로 비율을 먼저 확정해두면 단위 변환이 한결 수월하다. 웹 작업이 아닌 일상 계산이 필요할 땐 자취 살림 계산기도 함께 활용해보자. 더 많은 개발·디자인 팁은 kimgoon 생활·도구 가이드에 정리돼 있다.

자주 묻는 질문

Q. rem과 em 중 그냥 하나만 쓴다면? 대부분의 경우 rem을 권한다. 기준이 항상 루트로 고정돼 어디서 쓰든 같은 px로 환산되기 때문에 중첩 버그가 없다. em은 "이 요소의 글자 크기에 비례시키고 싶다"는 명확한 의도가 있을 때만 국소적으로 쓰는 편이 안전하다.

Q. px로 16px과 rem으로 1rem은 결국 같은데 왜 굳이 rem을? 화면상으로는 같아 보여도 동작이 다르다. 사용자가 브라우저 기본 글꼴을 20px로 키우면 1rem은 20px로 늘지만 16px은 그대로 16px이다. 접근성과 사용자 설정 존중 측면에서 폰트는 rem이 유리하다.

Q. 반응형 글자 크기에 vw만 쓰면 안 되나요? vw 단독은 최소·최대 한계가 없어 모바일에서 너무 작아지고 대형 화면에서 지나치게 커진다. clamp(최소rem, 유동vw, 최대rem)으로 하한과 상한을 함께 지정하는 것이 안전하다.

Q. 루트 font-size를 62.5%로 줄여 1rem=10px로 쓰는 방식은? 계산이 쉬워진다는 장점이 있으나(예: 1.6rem=16px), 사용자가 기본 글꼴을 바꿨을 때 전체 비율이 함께 줄어드는 부작용이 있어 최근에는 권장하지 않는 편이다. 기본 16px를 유지하는 쪽이 무난하다.

%·vw·vh와 clamp() 조합

상황별 추천 — 무엇을 언제 쓸까

작업	1순위 단위	이유
본문·제목 폰트	rem	사용자 글꼴 확대를 그대로 반영, 접근성 안전
컴포넌트 내부 여백	rem 또는 em	글자에 비례시키려면 em
1px 테두리·구분선	px	절대 정밀도 필요
카드·그리드 너비	% 또는 fr(그리드)	부모에 유동적으로 채움
풀스크린 섹션 높이	vh	화면 높이에 맞춤
반응형 큰 제목	clamp(rem, vw, rem)	최소·최대 보장하며 유동

자주 묻는 질문

다른 서비스의 관련 가이드

놀러가자

2026 추석 연휴 국내여행 지역 고르기 체크리스트 8항목 — 9월 24~27일, 축제 없는 연휴를 채우는 법

11분 읽기

펫찾기

반려견 미용실 맡기기 전 체크리스트 12가지: 등록증·CCTV 확인부터 미용 사고 대응까지

11분 읽기

맘맵

2026 영유아 발달선별검사(K-DST) '심화평가 권고' 받았을 때 90일 체크리스트

8분 읽기

목록으로 돌아가기

CSS 단위 px·rem·em·%·vw 차이와 선택 기준 — 2026 반응형 가이드

CSS 단위 한눈에 비교

절대 단위 px — 정확하지만 굳어 있다

rem과 em — 무엇을 기준으로 삼는가

%·vw·vh와 clamp() 조합

상황별 추천 — 무엇을 언제 쓸까

자주 묻는 질문

관련 가이드

태그

관련 가이드 더 보기

웹 접근성 명도 대비 기준 비교 — AA 4.5:1·AAA 7:1·UI 3:1과 Tailwind 팔레트 실측표

CSS Flexbox vs Grid, 언제 뭘 쓸까? 상황별 선택 기준 비교

CSS box-shadow 레퍼런스: 고도별 그림자 레시피 표와 다중 그림자 실전

이미지 종횡비(Aspect Ratio) 이해하기 - 16:9, 4:3, 1:1 언제 쓰는지

CSS Box Shadow 마스터하기 - 자연스러운 깊이감 만드는 그림자 가이드

HEX·RGB·HSL 차이와 색상 선택 팁 - 디자이너·개발자를 위한 색 코드 가이드

다른 서비스의 관련 가이드

CSS 단위 px·rem·em·%·vw 차이와 선택 기준 — 2026 반응형 가이드

CSS 단위 한눈에 비교

절대 단위 px — 정확하지만 굳어 있다

rem과 em — 무엇을 기준으로 삼는가

%·vw·vh와 clamp() 조합

상황별 추천 — 무엇을 언제 쓸까

자주 묻는 질문

관련 가이드

태그

관련 가이드 더 보기

웹 접근성 명도 대비 기준 비교 — AA 4.5:1·AAA 7:1·UI 3:1과 Tailwind 팔레트 실측표

CSS Flexbox vs Grid, 언제 뭘 쓸까? 상황별 선택 기준 비교

CSS box-shadow 레퍼런스: 고도별 그림자 레시피 표와 다중 그림자 실전

이미지 종횡비(Aspect Ratio) 이해하기 - 16:9, 4:3, 1:1 언제 쓰는지

CSS Box Shadow 마스터하기 - 자연스러운 깊이감 만드는 그림자 가이드

HEX·RGB·HSL 차이와 색상 선택 팁 - 디자이너·개발자를 위한 색 코드 가이드

다른 서비스의 관련 가이드