Softonic

픽셀을 em으로 변환

단계 1 / 2
결과

픽셀 값을 글꼴 크기 기준과 비교해 변환합니다. em, 같은 숫자 비율의 rem, 백분율, CSS 포인트를 함께 보여 줍니다. 처음에는 16px로 설정되어 있지만, 16px는 브라우저에서 흔히 쓰는 기본값일 뿐입니다. em을 구할 때는 실제 로컬 글꼴 크기를, rem을 구할 때는 루트(<html>) 글꼴 크기를 입력하세요.

픽셀 변환 방법

  1. 1

    픽셀 값 입력

    CSS 픽셀 값을 숫자로 입력합니다.

  2. 2

    알맞은 기준값 설정

    `em`은 해당 요소의 글꼴 크기, `rem`은 루트 글꼴 크기를 사용합니다. 기준값은 0일 수 없습니다.

  3. 3

    네 가지 결과 확인

    px ÷ 기준값을 em/rem으로, 비율 × 100을 백분율로, px × 0.75를 pt로 표시합니다.

계산식과 예시

em 또는 rem = px / 기준값
백분율       = (px / 기준값) × 100
pt           = px × 0.75

24px을 16px 기준으로 계산하면 1.5em, 1.5rem, 150%, 18pt가 나옵니다. CSS에서는 96px = 1in = 72pt로 정의하므로 포인트 변환에 0.75를 곱합니다. 이는 CSS 기준 단위 사이의 관계이며, 화면의 픽셀이 실제 물리적 길이와 일치한다는 뜻은 아닙니다.

CSS 단위 기준값이 의미하는 것
em 요소의 계산된 글꼴 크기. font-size 속성 자체에서는 상속받은 글꼴 크기
rem 루트 요소의 글꼴 크기
% 선택한 기준값을 100%로 나타낸 값
pt px와의 고정 CSS 비율. 기준값 입력란은 사용하지 않음

사용할 때 주의할 점

  • 중첩된 em 글꼴 크기는 서로 곱해집니다. 1.2em 안의 1.2em은 조상 요소 크기의 1.44배가 됩니다.
  • 이 계산기에는 기준값 입력란이 하나뿐이므로 표시되는 em과 rem의 숫자는 같습니다. 하지만 CSS에서 두 단위가 참조하는 글꼴 크기는 다릅니다.
  • em/rem은 소수점 이하 최대 6자리, 백분율/pt는 최대 4자리까지 표시하며 끝의 불필요한 0은 생략합니다.

자주 묻는 질문

루트를 기준으로 크기를 맞추려면 rem, 구성 요소가 주변 텍스트 크기에 따라 조정되어야 한다면 em을 사용하세요. 값을 복사하기 전에 용도에 맞는 기준값을 입력해야 합니다.

아닙니다. 16px은 흔한 초기값이지만 브라우저 설정이나 사이트 CSS에 따라 달라질 수 있습니다. 정확한 변환이 필요하면 계산된 글꼴 크기를 확인하세요.

결과를 갱신하기 위해 사이트에서 입력값을 처리합니다. 단계별 모드에서는 값이 페이지 URL에도 표시되므로 민감한 정보는 입력하지 마세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다