nicetool.dev logo

PX를 REM으로 변환

어느 칸에 입력해도 됩니다. 표의 행을 클릭하면 불러오고, 아래에 CSS를 붙여 넣으면 전체를 변환합니다.

24px = 1.5rem = 18pt = 150%

변환표 (기준 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

CSS 코드 변환

값 6개를 변환했습니다
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

px와 rem의 차이는?

px는 고정된 CSS 단위이고, 1rem은 루트 html 요소의 글꼴 크기와 같으며 모든 브라우저에서 기본값은 16px입니다. 글자 크기, 여백, 레이아웃을 rem으로 지정하면 사용자가 브라우저 설정에서 기본 글꼴 크기를 키울 때 모든 것이 함께 커집니다. 이는 중요한 접근성 요구 사항입니다(WCAG 1.4.4 텍스트 크기 조정). 계산은 간단합니다. rem = px ÷ 루트 글꼴 크기이므로 기준이 16px이면 24px은 1.5rem입니다. em도 같지만 부모 요소의 글꼴 크기를 기준으로 하므로 중첩되면 누적됩니다.

기능

  • • 루트 글꼴 크기를 지정한 px·rem 양방향 변환
  • • pt와 퍼센트 값도 함께 표시
  • • 1px부터 128px까지 자주 쓰는 크기 표(클릭 가능)
  • • CSS 코드의 모든 px 값을 바꾸는 일괄 변환
  • • 1px 가는 테두리를 px로 유지하는 옵션

로컬에서 실행

붙여 넣은 CSS를 포함해 모든 변환이 브라우저에서 이뤄집니다. 아무것도 업로드되지 않습니다.

즉시 계산, 100% 클라이언트 측.

PX를 REM으로 사용 방법

  1. 1

    루트 글꼴 크기를 확인하세요. 프로젝트에서 html { font-size }를 10px이나 62.5% 등으로 바꾸지 않았다면 16px로 둡니다.

  2. 2

    px 칸에 값을 넣으면 rem이, rem 칸에 넣으면 px가 나옵니다. 아래 줄에는 pt와 퍼센트도 표시됩니다.

  3. 3

    표의 아무 행이나 클릭해 1px부터 128px까지 자주 쓰는 크기를 불러옵니다.

  4. 4

    일괄 변환 칸에 CSS를 붙여 넣으면 모든 px 값이 rem으로, 0px는 0으로 바뀌고 1px 테두리는 px로 둘 수 있습니다. 결과를 스타일시트에 복사하세요.

활용 예시

타이포그래피 스케일

14 / 16 / 20 / 24 / 32px 글자 크기는 0.875 / 1 / 1.25 / 1.5 / 2rem이 되어, 사용자가 브라우저에서 글자를 키우면 제목도 함께 커집니다.

오래된 스타일시트 이전

px로 작성된 기존 CSS를 붙여 넣어 padding, margin, 글자 크기를 한 번에 바꾼 뒤 미디어 쿼리를 검토하고 가는 테두리는 px로 둡니다.

Figma 디자인 맞추기

디자이너는 px로 크기를 넘겨줍니다. 4, 8, 12, 16, 24px 간격 토큰을 0.25, 0.5, 0.75, 1, 1.5rem으로 바꿔 디자인 시스템에 씁니다.

62.5% 기법

일부 프로젝트는 html { font-size: 62.5% }로 1rem = 10px로 맞춥니다. 루트 크기를 10으로 두면 24px은 알기 쉬운 2.4rem이 됩니다.

자주 묻는 질문

rem과 px 중 무엇을 써야 하나요?+

글자 크기와 대부분의 간격은 rem으로 지정해 사용자의 글꼴 크기 설정을 존중하세요. 커지지 않아야 하는 테두리, 그림자, 세부 요소는 px도 괜찮습니다.

rem과 em의 차이는?+

rem은 루트 html 글꼴 크기를 기준으로 해 예측하기 쉽습니다. em은 부모 요소를 기준으로 하므로 중첩되면 곱해져, 컴포넌트에는 유용하지만 실수하기 쉽습니다.

기준은 항상 16px인가요?+

모든 브라우저의 기본값이지만 사용자가 바꿀 수 있고 CSS로 html을 덮어쓸 수도 있습니다. 프로젝트에서 실제로 쓰는 루트 크기로 변환하세요.

미디어 쿼리에 rem을 써야 하나요?+

em이나 rem 미디어 쿼리는 html 규칙이 아니라 브라우저 기본 글꼴 크기를 기준으로 하며 사용자가 글자를 확대하면 따라갑니다. 그래서 미디어 쿼리에 em을 쓰는 팀이 많습니다.