CSS 단위 변환기
px, rem, em 등 CSS 단위를 변환합니다
px 값 하나와 기준 폰트 크기(기본 16px)를 넣으면 rem·em·pt·pc·in·cm·mm 로의 환산이 한 표에 나오고, vw·vh 는 지금 열어 둔 브라우저 창의 실제 폭·높이를 읽어 계산하므로 창 크기를 바꾸면 값도 함께 바뀝니다. 피그마 시안의 px 를 rem 기반 디자인 시스템으로 옮기는 프론트엔드 개발자, 인쇄용 pt 를 화면 px 로 맞춰야 하는 퍼블리셔가 주로 씁니다. pt 환산은 CSS 규격의 1px = 0.75pt 를 따르며, 인치·센티미터는 96dpi 기준입니다. 계산은 전부 로컬에서 끝나 인터넷 연결을 끊어도 동작합니다.
미리보기
팁
- rem: 루트 요소(html) 기준. 반응형에 적합
- em: 부모 요소 기준. 컴포넌트 스케일링에 유용
- vw/vh: 뷰포트 기준. 전체 화면 레이아웃에 적합
CSS 단위, 이렇게 쓰세요
px·rem·em·%·vw·vh·pt 를 기준 폰트 크기와 뷰포트 폭에 맞춰 상호 변환합니다.
디자인 시안의 px 값을 rem 기반 CSS 로 옮기거나, 뷰포트 단위가 실제 몇 px 인지 확인할 때 씁니다.
rem 은 html 루트 크기(기본 16px), em 은 부모 요소 크기 기준입니다. 예: 24px = 1.5rem (16px 기준). 사용자가 기본 글꼴 크기를 바꾸면 rem 값이 달라집니다.
연봉·퇴직금·대출이자 같은 생활 계산은 계산기모아 →
관련 도구
자주 묻는 질문
Q. vw 값이 내 프로젝트와 다르게 나와요.
vw·vh 는 이 페이지를 보고 있는 창의 크기 기준입니다. 375px 모바일 기준 값이 필요하면 브라우저 개발자 도구의 기기 모드로 창 폭을 375 로 맞춘 뒤 다시 읽으세요.
Q. em 과 rem 이 같은 값으로 나오는 이유는?
em 은 부모 요소 폰트 크기 기준인데, 이 도구는 부모도 기준 폰트 크기와 같다고 가정합니다. 부모가 20px 이라면 기준 폰트 크기 칸에 20 을 넣어 em 을 계산하세요.
Q. Tailwind 의 text-lg 는 몇 px 인가요?
1.125rem 이므로 기본 16px 기준 18px 입니다. 기준 폰트 크기를 16 으로 두고 px 칸에 18 을 넣으면 rem 1.125 가 확인됩니다.