CSS 단위 변환기 - 무료 온라인 도구

기능

루트 글꼴 크기 지정

px ↔ rem ↔ em ↔ pt

바로 쓸 수 있는 CSS 출력

사용 방법

1. 루트 폰트 크기를 설정하세요 (기본값 16px).

2. 아무 단위 입력란에 값을 입력하세요.

3. 다른 모든 단위가 자동으로 업데이트됩니다.

이 도구에 대하여

픽셀은 직관적이지만 rem 단위는 사용자가 설정한 기본 글꼴 크기에 따라 커지고 작아지므로 접근성 면에서 중요합니다. 이 변환기는 사용자가 정한 루트 글꼴 크기(기본값은 브라우저 표준인 16px)를 기준으로 px, rem, em, pt를 동기화합니다. 어느 칸에 값을 입력해도 나머지가 갱신되므로, 픽셀로 전달받은 디자인을 스타일시트용 rem으로 바꾸거나 인쇄용 12pt가 화면에서 얼마인지 확인할 수 있습니다. 이 변환은 em을 rem과 같은 기준 크기로 계산한다고 가정합니다. 부모 요소가 루트 글꼴 크기를 쓰는 경우에는 맞지만, 자체 글꼴 크기를 가진 중첩 컴포넌트에서는 결과가 달라집니다.

자주 묻는 질문

rem과 em은 어떻게 다른가요?

rem은 루트 요소의 글꼴 크기를 기준으로 하므로 페이지 어디서나 1rem의 크기가 같습니다. em은 부모 요소의 글꼴 크기를 기준으로 하므로 중첩될수록 곱해집니다. 이 변환기는 em을 입력한 루트 크기 기준으로 계산합니다.

글꼴 크기에 px 대신 rem을 써야 하는 이유는 무엇인가요?

방문자가 브라우저 설정에서 기본 글꼴 크기를 키우면 rem으로 지정한 글자는 함께 커지지만 px로 지정한 글자는 그 설정을 무시합니다. 글자와 여백에 rem을 쓰면 시력이 좋지 않은 사람도 더 편하게 볼 수 있습니다.

포인트는 픽셀로 어떻게 환산하나요?

CSS에서는 1인치를 96px이자 72pt로 정의하므로 1pt는 4/3px(약 1.333px)입니다. 따라서 12pt 글꼴은 16px입니다.

루트 글꼴 크기를 62.5%로 바꿔야 하나요?

html { font-size: 62.5% }로 하면 1rem이 10px이 되어 계산은 쉬워지지만 기본 글자가 작아져 곳곳에서 보정해야 합니다. 요즘은 기본 16px을 그대로 두고 이런 변환기를 쓰는 팀이 많습니다.

CSS의 1px은 화면의 물리 픽셀 하나와 같은가요?

고밀도 디스플레이에서는 다릅니다. CSS 픽셀은 기준 단위이며, 픽셀 비율이 2인 기기에서는 CSS 픽셀 하나가 가로세로 각각 물리 픽셀 두 개로 그려집니다.

CSS 단위 변환기 (px ↔ rem ↔ em ↔ pt)

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구