CSS 단위 변환기
CSS 길이를 px, rem, em, pt, %, vw, vh 단위로 변환하세요.
도구를 불러오는 중…
CSS 단위 변환기 — 하나의 CSS 길이 값을 px·rem·em·pt·%·vw·vh로 한 번에 변환합니다. 루트 폰트크기, 부모 폰트크기, 뷰포트 너비와 높이를 설정한 뒤 값을 입력하고 단위를 고르면 모든 등가 값이 즉시 표시됩니다. 모든 계산은 브라우저 안에서 이루어지므로 입력한 내용이 어디로도 업로드되지 않습니다.
CSS 단위 변환기란?
CSS 단위 변환기는 하나의 CSS 길이를 px, rem, em, pt, %, vw, vh의 7가지 자주 쓰는 단위로 변환하는 무료 브라우저 내 도구입니다. 프런트엔드 개발자와 웹 디자이너가 레이아웃을 절대 픽셀과 반응형 단위 사이에서 오가게 하거나, 사용자 지정 루트 폰트크기에서 rem이 몇 픽셀이 되는지 확인하거나, 인쇄용 pt 값을 화면 픽셀로 바꿀 때 사용합니다. rem은 루트 폰트크기, em과 %는 부모 폰트크기, vw/vh는 뷰포트에 따라 달라지므로 이 네 가지를 모두 조정 가능한 설정으로 제공합니다. 값을 입력하고 변환 전 단위를 고르면 모든 결과 칸이 동시에 갱신됩니다. 생성된 CSS 스니펫은 7가지 등가 값을 font-size 선언으로 나열해 그대로 붙여넣을 수 있습니다.
CSS 단위 변환기 사용법
- 설정을 열어 루트 폰트크기(rem의 기준이 되는 html의 font-size), 부모 폰트크기(em과 %에 사용), 뷰포트 너비와 높이(vw와 vh에 사용)를 입력합니다.
- 변환하려는 숫자를 값 입력란에 입력합니다.
- 변환 전 단위 드롭다운에서 원본 단위를 선택합니다: px, rem, em, pt, %, vw, vh.
- 라벨이 붙은 읽기 전용 결과 칸에서 각 등가 값을 확인합니다. 값, 단위, 또는 어떤 설정을 바꾸든 모두 자동으로 다시 계산됩니다.
- 생성된 CSS 스니펫을 복사하면 7가지 font-size 등가 값을 그대로 스타일시트에 붙여넣을 수 있습니다.
예시
루트 16일 때 px → rem
입력
루트 16px, 값 16, 변환 전 px
출력
rem = 1
루트 10일 때 rem → px
입력
루트 10px, 값 2, 변환 전 rem
출력
px = 20
px → pt
입력
값 16, 변환 전 px
출력
pt = 12
자주 묻는 질문
- 어떤 단위 사이에서 변환하나요?
- 7가지 CSS 길이 단위입니다: px, rem, em, pt, %, vw, vh. 이 중 무엇이든 원본 단위가 될 수 있으며 7가지 등가 값이 동시에 표시됩니다.
- 루트, 부모, 뷰포트 크기를 왜 설정해야 하나요?
- 이 단위들은 상대 단위이기 때문입니다. rem은 루트(html) 폰트크기의 배수이고, em과 %는 부모 폰트크기를 기준으로 하며, vw/vh는 뷰포트 너비와 높이의 백분율입니다. 설정에서 이 값들을 지정해야 각 상대 단위가 무엇으로 환산되는지 변환기가 알 수 있습니다.
- pt는 어떻게 처리되나요?
- CSS는 96px = 1in = 72pt로 정의하므로 1pt는 4/3 px, 1px는 0.75pt에 해당합니다. 변환기는 이 고정 비율을 사용하며 폰트크기나 뷰포트와 무관합니다.
- 값이나 설정이 유효하지 않으면 어떻게 되나요?
- 값이 유한한 숫자가 아니거나 루트, 부모, 뷰포트 크기 중 하나라도 비어 있거나 0 또는 음수이면, 유효한 숫자를 입력할 때까지 결과 칸에 대시(—)가 표시됩니다.
- 서버로 전송되는 내용이 있나요?
- 아니요. 모든 변환은 브라우저에서 완전히 클라이언트 측으로 실행되며 업로드나 서버 호출이 전혀 없습니다. 따라서 입력한 값이 기기를 벗어나는 일은 결코 없습니다.