도구로 건너뛰기
JoeLucky

도구의 ★를 눌러 저장하세요

도구 카테고리

코드 이미지 변환CSS 그라디언트 생성기CSS 글래스모피즘박스 섀도 생성기CSS 로더 생성기SVG 블롭 생성기SVG를 PNG로색상 대비 검사기PX / REM / EM 변환기
JoeLucky

실용적인 온라인 도구를 한곳에서

개인정보처리방침이용약관

© 2026 JoeLucky®. 모든 권리 보유.

  1. JoeLucky
  2. /CSS·디자인
  3. /PX / REM / EM 변환기

PX / REM / EM 변환기

루트 글꼴 크기를 직접 정해 px, rem, em을 변환하며 여러 값을 한꺼번에 변환하는 목록 모드도 있습니다.

비슷한 CSS·디자인

전체 보기
코드 이미지 변환

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

열기 →
CSS 그라디언트 생성기

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

열기 →
CSS 글래스모피즘

💬 댓글

?

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

PX / REM / EM 변환기이(가) 무엇인가요?

PX/REM/EM 변환기는 세 가지 CSS 단위 간에 변환합니다. rem은 루트 글꼴 크기에 상대적이고, em은 별도로 조절할 수 있는 컨텍스트 글꼴 크기에 상대적입니다.

사용 방법

  1. 필요에 따라 루트 글꼴 크기와 컨텍스트 글꼴 크기를 조정하세요.
  2. 단일 값 모드와 일괄 목록 모드를 전환해 변환하세요.

자주 묻는 질문

rem과 em의 실제 차이는 무엇인가요?

rem은 중첩 깊이와 상관없이 항상 루트 요소(보통 html)의 글꼴 크기를 기준으로 합니다. em은 현재 요소(또는 부모)의 글꼴 크기를 기준으로 하며 중첩되면 누적됩니다. 이 도구는 둘이 섞이지 않도록 입력 필드를 일부러 분리해 두었습니다.

일괄 모드의 숫자 형식에 제한이 있나요?

한 줄에 숫자 하나를 입력하며 소수를 지원합니다. 분석할 수 없는 줄은 조용히 건너뛰거나 0으로 처리하지 않고 결과 표에서 오류로 분명히 표시됩니다.

이 도구가 CSS 파일을 분석하나요?

아니요. V1은 개별 값만 변환합니다. CSS 파일 전체를 분석해 자동 변환하는 기능은 V2에서 계획 중이며 여기에는 포함되어 있지 않습니다.

rem은 항상 이 루트 글꼴 크기를 기준으로 계산됩니다.

em은 위의 루트 크기가 아니라 이 별도의 부모/컨텍스트 글꼴 크기를 기준으로 계산됩니다.

px

16

rem

1

em

1

배경 블러와 반투명 테두리 코드를 실시간으로 만들어 줍니다.

열기 →