CSS 단위 변환기
px, rem, em, vw, vh 및 기타 CSS 단위 간에 변환합니다
설정 및 입력
빠른 프리셋 및 예시
브라우저에서 실행됩니다. 입력한 내용은 이 기기에만 남습니다.
결과
값을 입력하면 결과가 표시됩니다.
참고 자료 및 계산 상세
무료 CSS 단위 변환기 소개
이 CSS 단위 변환기는 웹 개발자와 디자이너가 주요 CSS 길이 단위 사이를 즉시 변환할 수 있는 무료 종합 도구입니다. 픽셀을 rem으로, em을 퍼센트로, 뷰포트 단위를 절대 단위로 바꿔야 할 때 10가지 CSS 단위에 대한 정확한 변환 결과를 실시간으로 동시에 보여 줍니다.
올바른 CSS 단위를 이해하고 올바르게 사용하는 것은 반응형이면서 접근성 높은 웹사이트를 만드는 데 기본이 됩니다. rem과 em 같은 상대 단위는 글꼴 크기 설정에 따라 조절되므로 레이아웃이 사용자 환경설정과 접근성 요구에 맞게 적응합니다. 뷰포트 단위(vw, vh)는 화면 크기에 반응하는 유동적인 디자인을 만들고, 절대 단위(px, pt, cm, mm, in)는 정밀한 제어가 필요할 때 고정된 크기를 제공합니다.
이 CSS 단위 변환 도구는 단순한 계산기와 달리 rem/em/% 계산의 기준 글꼴 크기를 직접 지정하고 vw/vh 변환용 뷰포트 크기를 설정할 수 있습니다. 10가지 단위의 결과가 한눈에 보이는 격자 레이아웃에 표시되며, 한 번의 클릭으로 복사하고 단위를 즉시 교환할 수 있어 어떤 디자인 상황에서도 알맞은 CSS 값을 가장 빠르게 찾을 수 있습니다.
주요 기능
- px, rem, em, %, vw, vh, pt, cm, mm, in 등 10가지 CSS 단위 간 변환
- 모든 변환 결과를 반응형 격자 레이아웃에 동시에 표시
- 정확한 rem, em, 퍼센트 계산을 위한 기준 글꼴 크기 설정
- 정밀한 vw, vh 변환을 위한 뷰포트 너비와 높이 설정
- 단위 접미사를 포함해 클릭 한 번으로 클립보드에 복사
- 변환된 값을 새 원본으로 지정하는 즉시 단위 교환
- 1rem, 100vw, 50%, 표준 글꼴 크기 같은 자주 쓰는 값의 빠른 프리셋
- 각 CSS 단위가 무엇을 나타내는지 보여 주는 단위 설명
- 적절한 소수 자릿수로 보여 주는 스마트 숫자 서식
- 어떤 코딩 환경에서도 편안하게 쓸 수 있는 다크 모드 지원
CSS 단위 변환기 사용 방법
- 값 입력: 도구 상단의 입력란에 변환할 숫자 값을 입력합니다.
- 원본 단위 선택: 드롭다운 메뉴에서 입력한 값의 CSS 단위(px, rem, em, %, vw, vh, pt, cm, mm, in)를 선택합니다.
- 필요하면 설정 조정: 프로젝트 설정에 맞게 기준 글꼴 크기(기본값 16px)와 뷰포트 크기(기본값 1920x1080)를 변경합니다.
- 모든 변환 결과 확인: 10가지 단위 변환 결과가 아래 격자에 즉시 표시됩니다. 원본 단위는 파란색으로 강조되어 쉽게 구별할 수 있습니다.
- 복사 또는 교환: 복사 아이콘을 클릭하면 변환된 값이 단위 접미사와 함께 복사되고, 교환 아이콘을 클릭하면 그 값이 이후 변환의 새 원본으로 설정됩니다.
활용 사례
- 반응형 디자인: Figma나 Sketch의 픽셀 기반 디자인을 확장 가능하고 접근성 높은 CSS 레이아웃을 위한 rem과 em 단위로 변환합니다.
- 접근성 준수: 고정 px 값을 상대 단위인 rem/em으로 바꿔 레이아웃이 사용자의 글꼴 크기 설정과 WCAG 지침을 따르도록 합니다.
- 뷰포트 기반 레이아웃: 전체 화면 섹션, 반응형 타이포그래피, 유동적인 간격에 쓸 정확한 vw와 vh 값을 계산합니다.
- 인쇄용 스타일시트 작성: 화면 단위를 CSS @media print 스타일시트용 pt, cm, mm, in 같은 인쇄 친화적인 값으로 변환합니다.
- 디자인 시스템 개발: 디자인 토큰 전반에서 단위 체계 간 변환을 통해 일관된 간격과 타이포그래피 스케일을 정립합니다.
- CSS 프레임워크 마이그레이션: 한 CSS 프레임워크나 방법론에서 다른 것으로 옮길 때 단위 체계 간 변환을 수행합니다.
- 크로스 플랫폼 개발: 플랫폼별 단위 사이를 변환하여 웹, 모바일 웹, 하이브리드 앱 개발 전반에서 일관된 크기를 유지합니다.
자주 묻는 질문
이 도구는 무료인가요?
네, CSS 단위 변환기는 완전 무료로 사용할 수 있습니다. 사용 횟수 제한도, 계정도, 유료 기능도 없습니다. 필요한 만큼 얼마든지 값을 변환하세요.
내 데이터는 안전한가요?
물론입니다. 모든 변환은 JavaScript로 브라우저 안에서만 계산됩니다. 어떤 데이터도 서버로 전송되지 않습니다. 페이지를 한 번 불러온 뒤에는 오프라인에서도 완전히 작동합니다.
기준 글꼴 크기를 설정해야 하는 이유는 무엇인가요?
rem, em, % 같은 상대 단위는 기준이 되는 글꼴 크기에 따라 달라집니다. 대부분의 브라우저는 기본값이 16px이지만 프로젝트에서는 다른 기준을 쓸 수 있습니다. 올바른 기준 글꼴 크기를 설정해야 해당 프로젝트 설정에 맞는 정확한 변환 결과를 얻을 수 있습니다.
rem과 em의 차이는 무엇인가요?
rem과 em은 모두 글꼴 크기를 기준으로 하지만, rem은 항상 루트 요소(html)의 글꼴 크기를 기준으로 하고 em은 부모 요소의 글꼴 크기를 기준으로 합니다. 이 변환기에서는 구체적인 DOM 맥락을 알 수 없으므로 둘 다 기준 글꼴 크기 설정을 사용합니다.
뷰포트 단위는 어떻게 계산되나요?
1vw는 뷰포트 너비의 1%이고 1vh는 뷰포트 높이의 1%입니다. 이 변환기는 사용자가 설정한 뷰포트 크기(기본값 1920x1080)로 이 값들을 계산합니다. 정확한 결과를 얻으려면 설정을 대상 화면 크기에 맞게 조정하세요.
px에서 pt로의 변환은 어떻게 이루어지나요?
이 변환은 1인치당 96 CSS 픽셀, 1인치당 72포인트라는 표준 비율을 사용합니다. 따라서 1pt는 약 1.333px(96/72)입니다. 이 비율은 모든 최신 브라우저와 운영체제에서 동일합니다.
팁과 모범 사례
- 타이포그래피에는 rem 사용: html 요소에 기준 글꼴 크기를 설정하고 모든 텍스트 크기에 rem 단위를 사용하면 사이트 전체에서 일관되고 접근성 높은 타이포그래피를 유지할 수 있습니다.
- 상대 단위 우선: 간격과 레이아웃에 rem, em, %를 사용하면 사용자 환경설정과 다양한 화면 크기에 적응하는 디자인을 만들 수 있습니다.
- 프로젝트 설정에 맞추기: 정확한 결과를 위해 변환기의 기준 글꼴 크기와 뷰포트 크기를 항상 실제 프로젝트 설정에 맞게 지정하세요.
- 뷰포트 단위는 신중하게 사용: vw와 vh는 유동적인 레이아웃에 강력하지만, 스크롤에 따라 뷰포트 크기가 바뀌는 모바일 브라우저에서는 문제가 생길 수 있습니다. 더 견고한 반응형 값이 필요하다면 CSS clamp() 사용을 고려해 보세요.
- 여러 기기에서 테스트: 단위를 변환한 뒤에는 여러 기기와 화면 크기에서 CSS를 테스트해 값이 원하는 시각적 결과를 내는지 확인하세요.
- 자주 쓰는 변환 활용: 1rem, 표준 글꼴 크기, 일반적인 뷰포트 계산처럼 자주 필요한 값은 빠른 프리셋을 사용해 작업 속도를 높이세요.