1rem은 항상 16px인가요?

아닙니다. 기본 설정에서 16px인 경우가 많지만 루트 요소의 font-size에 따라 달라집니다. root font-size가 20px이면 1rem은 20px입니다.

16px은 몇 rem인가요?

root font-size가 16px이면 16px은 1rem입니다. 10px 기준이라면 1.6rem, 20px 기준이라면 0.8rem입니다.

24px은 몇 rem인가요?

16px 기준으로 24px은 1.5rem입니다. 계산식은 24 ÷ 16 = 1.5입니다. 10px 기준에서는 2.4rem입니다.

1.5rem은 몇 px인가요?

root font-size가 16px이면 1.5rem은 24px입니다. 20px 기준이라면 30px입니다.

rem과 em은 어떤 차이가 있나요?

rem은 루트 요소의 글자 크기를 기준으로 계산합니다. em은 font-size 속성에 사용할 때 부모 요소의 글자 크기, 그 외 일반적인 길이 속성에서는 해당 요소의 글자 크기를 기준으로 계산됩니다.

rem을 사용하면 반응형 웹이 자동으로 만들어지나요?

아닙니다. rem은 루트 글자 크기에 상대적인 단위일 뿐, 화면 너비에 따라 자동으로 크기를 조절하는 단위는 아닙니다. 반응형 웹을 구현하려면 미디어 쿼리, 유연한 레이아웃, CSS의 clamp() 같은 기능을 함께 활용할 수 있습니다.

px 대신 rem을 사용하는 이유는 무엇인가요?

rem은 공통된 크기 기준을 사용하므로 웹사이트 전체의 글자 크기와 간격을 일관성 있게 관리하기 좋습니다. 사용자 글자 크기 설정을 반영한 확장성 있는 디자인을 구성할 때도 도움이 될 수 있습니다.

Figma에서 확인한 px 값을 rem으로 바꿀 수 있나요?

네. Figma 등 디자인 도구에서 확인한 px 값을 입력하고 개발 프로젝트의 root font-size를 설정하면 CSS에 사용할 rem 값을 계산할 수 있습니다.

변환 결과에 소수점이 나와도 괜찮나요?

네. rem은 소수점을 사용할 수 있습니다. 예를 들어 16px 기준으로 15px은 0.9375rem입니다. 다만 소수점을 임의로 반올림하면 원래 px 값과 약간의 차이가 발생할 수 있으며, 이 변환기에서는 선택한 소수 자릿수에 따른 오차를 함께 보여줍니다.

CSS 코드의 px을 한 번에 rem으로 바꿀 수 있나요?

네. "CSS 일괄 변환"에 CSS 코드를 붙여넣으면 px 값을 rem으로, 또는 rem 값을 px로 한 번에 바꿀 수 있습니다. 테두리에 쓰는 1px 이하 값과 @media 조건은 그대로 두도록 선택할 수 있습니다.

16px은 몇 pt인가요?

CSS에서 1px은 0.75pt이므로 16px은 12pt입니다. 반대로 12pt는 16px, root font-size 16px 기준으로 1rem입니다.

px rem 변환기 | 픽셀(px) ↔ rem 변환 · root font-size 설정

px ↔ rem 변환기란?

px ↔ rem 변환기는 CSS에서 사용하는 픽셀(px)을 rem으로 변환하거나, rem을 다시 px로 환산하는 온라인 단위 변환 도구입니다. 웹사이트의 글자 크기, 여백, 요소 간격 등을 설정할 때 필요한 값을 간편하게 계산할 수 있습니다.

기본 root font-size 16px뿐 아니라 10px, 14px, 18px 등 원하는 기준값을 설정할 수 있으며, px 또는 rem 값을 입력하고 변환하기를 누르면 결과를 확인할 수 있습니다. 변환 결과는 em, pt, %, Tailwind 간격 값으로도 함께 확인할 수 있고, 자주 사용하는 값의 변환표와 CSS 일괄 변환, 복사 기능도 제공합니다.

rem이란? CSS rem 단위 뜻

rem은 Root EM의 약자로, HTML 문서의 최상위 요소인 html의 font-size를 기준으로 크기가 결정되는 CSS 상대 길이 단위입니다.

예를 들어, 루트 글자 크기가 16px이라면 1rem = 16px, 2rem = 32px, 0.5rem = 8px입니다. 루트 글자 크기가 10px이라면 1rem = 10px, 2rem = 20px으로 달라집니다.

rem은 부모 요소의 글자 크기가 아니라 루트 요소의 글자 크기를 참조합니다. 따라서 여러 요소가 중첩되어 있어도 공통된 크기 기준을 적용하기 쉬우며, 웹디자인과 반응형 레이아웃, 디자인 시스템에서 널리 활용됩니다.

1rem은 몇 px인가요?

일반적인 브라우저 기본 설정에서는 1rem이 16px인 경우가 많습니다.하지만 웹사이트에서 루트 글자 크기를 변경했거나 사용자가 브라우저의 기본 글자 크기를 조정했다면 실제 1rem의 값은 달라집니다.

아래는 root font-size가 16px일 때의 대표적인 예시입니다.

1\,\mathrm{rem} = 16\,\mathrm{px}

0.5rem = 8px · 0.75rem = 12px · 1.5rem = 24px · 2rem = 32px

px를 rem으로 변환하는 계산식

px → rem 변환은 픽셀 값을 root font-size로 나누면 됩니다. 16px 기준이라면 입력한 px 값을 16으로 나누어 계산합니다.

\mathrm{rem} = \frac{\mathrm{px}}{\text{root font-size (px)}}

예를 들어, 24px을 rem으로 변환할 때 root font-size가 16px이라면 다음과 같습니다.

\frac{24}{16} = 1.5\,\mathrm{rem}

따라서 24px = 1.5rem입니다. 같은 24px이라도 root font-size가 10px이면 2.4rem으로 변환됩니다.

rem을 px로 변환하는 계산식

rem → px 변환은 rem 값에 root font-size를 곱하면 됩니다.

\mathrm{px} = \mathrm{rem} \times \text{root font-size (px)}

root font-size가 16px일 때 1.25rem을 px로 변환하면 다음과 같습니다.

1.25 \times 16 = 20\,\mathrm{px}

따라서 1.25rem = 20px입니다. CSS에서 글자 크기, padding, margin 등을 px 단위로 다시 확인할 때 사용할 수 있습니다.

Root font-size란?

Root font-size는 문서 최상위 요소인 html에 적용되는 글자 크기입니다. rem 단위는 이 값을 기준으로 계산되므로 px와 rem을 정확하게 변환하려면 현재 프로젝트의 root font-size를 알아야 합니다.

예를 들어, CSS에서 다음과 같이 지정할 수 있습니다.

html { font-size: 16px; }

위 설정에서는 1rem이 16px입니다. root font-size를 20px로 변경하면 1rem은 20px, 1.5rem은 30px이 됩니다. 이 변환기에서는 root font-size를 직접 입력하거나 제공되는 프리셋을 선택하여 계산 기준을 변경할 수 있으며, 한 번 설정한 기준값은 다음 방문 때도 유지됩니다.

px, rem, em의 차이

CSS에서 사용하는 px, rem, em은 모두 길이를 표현하는 단위지만 크기를 계산하는 기준이 다릅니다.

px은 CSS 픽셀을 나타내는 절대 길이 단위입니다. rem은 루트 요소의 font-size를 기준으로 하는 상대 길이 단위입니다. em은 사용되는 CSS 속성에 따라 해당 요소 또는 부모 요소의 글자 크기를 기준으로 계산됩니다.

특히 em을 font-size에 사용하면 부모 요소의 글자 크기를 기준으로 계산되므로 중첩된 요소에서 크기가 누적될 수 있습니다. 반면 rem은 공통된 루트 크기를 참조하므로 여러 컴포넌트의 크기를 일관성 있게 관리할 때 유용합니다.

em, pt, %, Tailwind 간격으로 환산하기

변환 결과에는 rem과 px 외에도 자주 함께 쓰는 단위가 표시됩니다.

em — 부모 요소의 font-size가 root font-size와 같다면 rem과 같은 값입니다.
pt — CSS에서 1px은 0.75pt입니다. 16px은 12pt, 24px은 18pt입니다.
% — root font-size를 100%로 보았을 때의 비율입니다. 16px 기준 24px은 150%입니다.
Tailwind 간격 — Tailwind CSS의 간격 1단위는 0.25rem입니다. 1.5rem은 6이므로 p-6, gap-6처럼 사용합니다. 기본 스케일에 없는 값은 p-[0.9375rem]처럼 임의 값으로 표시합니다.

소수 자릿수와 반올림 오차

px를 rem으로 바꾸면 15px = 0.9375rem처럼 소수가 길어질 수 있습니다. 소수 자릿수를 2자리로 줄이면 0.94rem이 되고, 이를 다시 px로 환산하면 15.04px로 원래 값과 0.04px 차이가 납니다. 변환 결과의 반올림 오차 항목에서 선택한 자릿수로 인한 차이를 확인할 수 있습니다.

CSS 코드의 px을 rem으로 일괄 변환하기

CSS 일괄 변환에 CSS 코드를 붙여넣으면 코드 안의 px 값을 현재 root font-size 기준의 rem으로 한 번에 바꿉니다. 반대로 rem 값을 px로 되돌릴 수도 있습니다.

1px 이하는 그대로 두기 — 테두리(border)처럼 얇은 선은 rem으로 바꾸면 화면 배율에 따라 흐려지거나 사라질 수 있어 px로 남겨 두는 경우가 많습니다.
@media 조건은 그대로 두기 — 미디어 쿼리 조건의 rem은 html에 지정한 font-size가 아니라 브라우저 기본 글자 크기를 기준으로 계산되므로, root font-size를 바꿔 쓰는 프로젝트에서는 결과가 달라질 수 있습니다.
주석과 url() 안의 값은 변환하지 않습니다.

자주 쓰는 px ↔ rem 변환표

아래 px rem 변환표는 8px, 12px, 16px, 24px, 32px 등 웹디자인에서 자주 사용하는 픽셀 값을 root font-size 16px 기준의 rem 단위로 환산한 표입니다. 다른 기준값의 변환표는 위 변환기에서 root font-size를 바꾸면 확인할 수 있습니다.

px	rem (16px 기준)
1px	0.0625rem
2px	0.125rem
4px	0.25rem
8px	0.5rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
28px	1.75rem
32px	2rem
36px	2.25rem
40px	2.5rem
48px	3rem
64px	4rem
80px	5rem
96px	6rem

CSS에서 rem을 사용하는 방법

rem은 폰트 크기뿐 아니라 margin, padding, width, gap, border-radius 등 다양한 CSS 길이 속성에 사용할 수 있습니다.

/* root font-size: 16px 기준 */
.title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
}

위 예시에서 글자 크기는 24px, 아래쪽 여백은 16px, 내부 여백은 12px에 해당합니다. 루트 글자 크기가 변경되면 rem으로 지정된 길이도 그 기준에 따라 달라집니다.

음수 margin처럼 음수 길이가 허용되는 속성에도 rem을 사용할 수 있습니다. 예를 들어, 16px 기준의 -8px은 -0.5rem입니다. 다만 모든 px 값을 rem으로 변경해야 하는 것은 아니며, 디자인 목적과 속성의 특성에 맞게 단위를 선택하는 것이 좋습니다.

root font-size를 10px로 설정해도 될까요?

개발 과정에서 rem 계산을 쉽게 하기 위해 root font-size를 10px로 지정하는 방식을 사용하기도 합니다. 이 경우 1.6rem = 16px, 2.4rem = 24px처럼 값을 환산할 수 있습니다.

다만 html에 font-size: 10px을 고정하면 브라우저의 기본 글자 크기 설정이 반영되지 않을 수 있습니다. 접근성과 사용자 설정을 고려한다면 상대 단위나 백분율 기반의 설정을 검토하는 것이 좋습니다.

이 계산기는 10px, 16px 등 어떤 양수 기준에서도 변환할 수 있으므로 실제 프로젝트에서 사용하는 root font-size를 입력해 계산하세요.

자주 묻는 질문

Q. 1rem은 항상 16px인가요?
A. 아닙니다. 기본 설정에서 16px인 경우가 많지만 루트 요소의 font-size에 따라 달라집니다. root font-size가 20px이면 1rem은 20px입니다.
Q. 16px은 몇 rem인가요?
A. root font-size가 16px이면 16px은 1rem입니다. 10px 기준이라면 1.6rem, 20px 기준이라면 0.8rem입니다.
Q. 24px은 몇 rem인가요?
A. 16px 기준으로 24px은 1.5rem입니다. 계산식은 24 ÷ 16 = 1.5입니다. 10px 기준에서는 2.4rem입니다.
Q. 1.5rem은 몇 px인가요?
A. root font-size가 16px이면 1.5rem은 24px입니다. 20px 기준이라면 30px입니다.
Q. rem과 em은 어떤 차이가 있나요?
A. rem은 루트 요소의 글자 크기를 기준으로 계산합니다. em은 font-size 속성에 사용할 때 부모 요소의 글자 크기, 그 외 일반적인 길이 속성에서는 해당 요소의 글자 크기를 기준으로 계산됩니다.
Q. rem을 사용하면 반응형 웹이 자동으로 만들어지나요?
A. 아닙니다. rem은 루트 글자 크기에 상대적인 단위일 뿐, 화면 너비에 따라 자동으로 크기를 조절하는 단위는 아닙니다. 반응형 웹을 구현하려면 미디어 쿼리, 유연한 레이아웃, CSS의 clamp() 같은 기능을 함께 활용할 수 있습니다.
Q. px 대신 rem을 사용하는 이유는 무엇인가요?
A. rem은 공통된 크기 기준을 사용하므로 웹사이트 전체의 글자 크기와 간격을 일관성 있게 관리하기 좋습니다. 사용자 글자 크기 설정을 반영한 확장성 있는 디자인을 구성할 때도 도움이 될 수 있습니다.
Q. Figma에서 확인한 px 값을 rem으로 바꿀 수 있나요?
A. 네. Figma 등 디자인 도구에서 확인한 px 값을 입력하고 개발 프로젝트의 root font-size를 설정하면 CSS에 사용할 rem 값을 계산할 수 있습니다.
Q. 변환 결과에 소수점이 나와도 괜찮나요?
A. 네. rem은 소수점을 사용할 수 있습니다. 예를 들어 16px 기준으로 15px은 0.9375rem입니다. 다만 소수점을 임의로 반올림하면 원래 px 값과 약간의 차이가 발생할 수 있으며, 이 변환기에서는 선택한 소수 자릿수에 따른 오차를 함께 보여줍니다.
Q. CSS 코드의 px을 한 번에 rem으로 바꿀 수 있나요?
A. 네. "CSS 일괄 변환"에 CSS 코드를 붙여넣으면 px 값을 rem으로, 또는 rem 값을 px로 한 번에 바꿀 수 있습니다. 테두리에 쓰는 1px 이하 값과 @media 조건은 그대로 두도록 선택할 수 있습니다.
Q. 16px은 몇 pt인가요?
A. CSS에서 1px은 0.75pt이므로 16px은 12pt입니다. 반대로 12pt는 16px, root font-size 16px 기준으로 1rem입니다.

참고 자료

CSS 단위와 root font-size에 대한 자세한 내용은 MDN CSS length 공식 문서및 MDN font-size 문서를 참고할 수 있습니다.