Skip to main content
CalculoraCalculora

금융 및 비즈니스

금융 계산기투자 & 계획개인 재무부동산 투자비즈니스 도구스타트업 & 소프트웨어 기업

수학 및 기술

수학 계산기공학 도구물리학 도구개발자 도구학교 도구

건강 및 생활

의료 도구스마트 유틸리티랜덤 생성기

크리에이터 및 특수

크리에이터 이코노미이슬람 도구지속가능성게임

변환기

단위 변환기길이 변환기무게 변환기온도 변환기→ 단위 변환기

랜덤 생성기

난수 생성기비밀번호 강도 검사기돌림판동전 던지기 시뮬레이터주사위 굴리기시간대 겹침 계산기→ 랜덤 생성기
파일 변환기

PDF 도구

PDF를 JPG로 변환PDF를 PNG로 변환PDF을(를) TXT(으)로 변환PDF를 GIF로 변환PDF를 WebP로 변환PDF를 SVG로 변환PDF을(를) DOCX(으)로 변환PDF를 Excel로 변환PDF를 PowerPoint로 변환PDF를 HTML로 변환PDF를 Markdown으로 변환PDF를 TIFF로 변환

이미지 변환기

JPG를 PNG로 변환PNG를 JPG로 변환PNG를 WebP로 변환WebP를 PNG로 변환WebP를 JPG로 변환JPG를 WebP로 변환SVG를 PNG로 변환SVG를 JPG로 변환SVG를 WebP로 변환BMP를 PNG로 변환BMP를 JPG로 변환BMP를 WebP로 변환

고급 이미지

HEIC를 JPG로 변환HEIC를 PNG로 변환TIFF를 JPG로 변환TIFF를 PNG로 변환JPG를 TIFF로 변환PNG를 TIFF로 변환JPG를 ICO로 변환PNG를 ICO로 변환JPEG을(를) AVIF(으)로 변환PNG를 AVIF로 변환

GIF & 애니메이션

GIF 프레임을 PNG로 변환GIF 프레임을 JPG로 변환GIF을 개별 프레임(PNG/JPEG)으로 변환PNG를 GIF로 변환JPG를 GIF로 변환GIF를 WebP로 변환

편집

워터마크 추가이미지 개체 제거브라우저에서 즉시 이미지 크기 조정온라인으로 이미지 압축 — 파일 크기 감소, 품질 유지
수학 속도 챌린지암산 챌린지워들빈트 왜라드스도쿠2048
통화 변환기
CalculoraCalculora

올인원 계산기 플랫폼. 모든 필요에 맞는 무료, 빠르고 정확한 도구.

계산기 입력은 100% 비공개로 유지됩니다 — 모든 계산은 브라우저에서 이루어지며 서버로 전송되지 않습니다영원히 무료 — 페이월 없음, 구독 없음, 계정 불필요

인기

  • BMI 계산기
  • 대출 계산기
  • 나이 계산기
  • 주택담보대출 계산기
  • 백분율 계산기
  • 공학용 계산기

수학

  • 통계 계산기
  • 방정식 풀이
  • 분수 계산기
  • 소인수분해 계산기
  • 최대공약수・최소공배수 계산기
  • 로그 계산기

금융

  • 경제적 자립 조기 은퇴 계산기
  • 부채 눈덩이 계산기
  • 투자 계산기
  • 퇴직금 계산기
  • 급여 계산기
  • 투자 수익률 계산기

법적 고지

  • 모두 보기
  • 카테고리
  • 통화 변환기
  • 사이트맵
  • 게임 및 재미있는 도구
  • 소개
  • 문의하기
  • 개인정보처리방침
  • 이용약관
  • 면책조항

언어

  • enEnglish
  • arالعربية
  • esEspañol
  • deDeutsch
  • frFrançais
  • hiहिन्दी
  • idBahasa Indonesia
  • itItaliano
  • ja日本語
  • ko한국어
  • ptPortuguês
  • ruРусский
  • trTürkçe
  • viTiếng Việt
  • bnবাংলা
  • zh中文
  • nlNederlands
  • plPolski
  • ukУкраїнська
  • msBahasa Melayu
  • thภาษาไทย

© 2026 Calculora. 모든 권리 보유.

로 구축 — 100% 무료

가볍고 빠름 — 쿠키와 분석은 사용자의 동의가 있을 때만 실행됩니다

  1. 홈
  2. 개발자 도구
  3. CSS 단위 변환기

CSS 단위 변환기

기준 글꼴 크기와 뷰포트 크기를 직접 지정해 px, rem, em, pt, vw, vh, %를 즉시 변환하세요 — 1.5rem이 실제로 몇 픽셀인지 더 이상 추측할 필요 없습니다.

CSS 단위 변환기이란?

CSS는 px, pt 같은 절대 단위와 rem, em, vw, vh, % 같은 상대 단위 등 여러 크기 단위를 지원합니다. 상대 단위는 반응형이고 접근성 있는 디자인에 필수적이지만(특히 rem은 사용자의 브라우저 글꼴 크기 설정을 존중합니다), 결과가 루트 글꼴 크기, 현재 요소의 글꼴 크기, 또는 뷰포트 크기 같은 맥락에 따라 달라지기 때문에 머릿속으로 변환하기가 정말 어렵습니다.

이 변환기는 그 계산을 대신 해줍니다: 기준 글꼴 크기, 뷰포트 크기, 변환할 값을 설정하면 다른 모든 단위로의 동등한 값을 즉시 확인할 수 있습니다 — 디자인 시안의 픽셀 측정값을 반응형 rem/vw 값으로 옮기거나, 기존 CSS 규칙이 화면에서 실제로 어떻게 렌더링되는지 다시 확인할 때 유용합니다.

공식

1rem = 1em = 기준 글꼴 크기 (기본값 16px)
1pt = 96/72 px ≈ 1.333px
1vw = 뷰포트 너비 / 100
1vh = 뷰포트 높이 / 100
1% = 기준값 / 100

계산 방법

  1. 변환하려는 값을 입력하고 시작 단위를 선택하세요.
  2. 기준 글꼴 크기를 설정하세요(기본값은 브라우저 표준인 16px입니다).
  3. vw/vh 변환의 경우 원하는 뷰포트 너비와 높이를 입력하세요.
  4. 다른 모든 단위로의 동등한 값을 즉시 확인하세요.

예시

16px 기준 글꼴 크기에서 1.5rem은 24px로 변환됩니다. 1440px 뷰포트 너비에서 5vw는 72px로 변환됩니다.

주요 이점

  • 7개의 일반적인 CSS 단위를 한 곳에서 모두 변환
  • 고정된 가정이 아니라 실제 기준 글꼴 크기와 뷰포트 사용
  • 입력하는 즉시 결과 표시 — 브라우저 개발자 도구를 열 필요 없음
  • 무료, 가입 불필요, 브라우저에서 전적으로 실행

피해야 할 일반적인 실수

  • 루트 글꼴 크기가 변경되었는지 확인하지 않고 1rem이 항상 16px이라고 가정
  • 브라우저 주소창 동작을 고려하지 않고 모바일 전체 높이 레이아웃에 vh 사용
  • em 기반 글꼴 크기를 중첩시켜 놓고 예상치 못하게 누적되는 것에 당황
  • 동일한 컴포넌트 안에서 px와 rem을 일관성 없이 혼용해 접근성 스케일링을 깨뜨림

전문가 팁

  • 중첩된 컴포넌트에서 예상치 못한 누적을 피하려면 글꼴 크기에 em보다 rem을 선호하세요
  • 대상 브라우저가 지원한다면 모바일 전체 화면 레이아웃에는 vh 대신 dvh/svh를 사용하세요
  • rem 변환이 예측 가능하게 유지되도록 디자인 시스템 전체에서 일관된 기준 글꼴 크기를 유지하세요
  • 픽셀 완벽한 디자인을 옮길 때는 간격은 rem으로 변환하되, 테두리 두께 같은 세밀한 요소는 px로 유지하세요

주요 용어 설명

루트 글꼴 크기(Root font size)
html 요소에 설정된 글꼴 크기로, 모든 rem 단위의 기준이 됨
뷰포트(Viewport)
브라우저 창에서 보이는 웹페이지 영역
절대 단위(Absolute unit)
px나 pt처럼 어떤 맥락과도 무관하게 고정된 실제 크기를 갖는 단위
상대 단위(Relative unit)
rem, em, vw, %처럼 크기가 다른 값에 따라 달라지는 단위

일반적인 사용 사례

  • 디자이너의 픽셀 기반 Figma/Sketch 사양을 접근성 있는 CSS용 rem 값으로 변환
  • vw 기반 반응형 글꼴 크기가 특정 화면 너비에서 실제로 어떻게 렌더링되는지 확인
  • 레거시 pt 기반 인쇄물이나 이메일 CSS를 웹 표준 px 또는 rem으로 변환
  • 디자인 시스템의 간격 스케일이 단위 간에 깔끔하게 맞아떨어지는지 감사
  • 개발자 도구를 열지 않고 코드 리뷰 중 CSS 값을 빠르게 검증

자주 묻는 질문

rem과 em의 차이는 무엇인가요?
rem은 항상 루트(html) 요소의 글꼴 크기를 기준으로 하므로 요소가 아무리 깊이 중첩되어도 일관되게 유지됩니다. em은 현재 요소 자체의 글꼴 크기를 기준으로 하므로 중첩될 때 값이 누적될 수 있습니다 — 이 도구는 단순화를 위해 기준 글꼴 크기를 사용해 둘을 동일하게 취급합니다.
1rem은 왜 보통 16px과 같나요?
16px은 거의 모든 브라우저에서 루트 html 요소에 적용되는 기본 글꼴 크기입니다. rem은 그 루트 크기를 기준으로 하므로, 페이지(또는 사용자의 브라우저 설정)가 루트 글꼴 크기를 명시적으로 바꾸지 않는 한 1rem은 16px과 같습니다.
vw와 vh는 어디에 사용되나요?
vw(뷰포트 너비)와 vh(뷰포트 높이)는 브라우저 창의 현재 너비와 높이에 대한 백분율입니다 — 1vw는 뷰포트 너비의 1%와 같습니다. 전체 화면 레이아웃이나 화면에 맞춰 크기가 조정되는 반응형 타이포그래피에 흔히 사용됩니다.
픽셀은 항상 정확히 1인치의 1/96인가요?
CSS 사양상 그렇습니다 — CSS 픽셀은 1인치의 1/96로 정의되어 있으며, 이 때문에 1pt(1인치의 1/72)는 정확히 96/72 = 1.333 CSS 픽셀로 변환됩니다.

관련 도구

종횡비 계산기
대역폭 계산기
다운로드 시간 계산기
클라우드 호스팅 비용 계산기
CDN 비용 계산기
애플리케이션 프로그래밍 인터페이스 수익화 계산기
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100