CSS 단위 변환기
CSS 단위 px, rem, em, vw를 즉시 상호 변환합니다. 루트 폰트 크기와 뷰포트 너비 설정 가능. 무료, 브라우저에서 완결.
사용 방법
- Value 필드에 숫자를 입력합니다.
- 원본 단위(px, rem, em, 또는 vw)를 선택합니다.
- 네 가지 단위의 변환 결과가 즉시 업데이트됩니다.
- 필요하면 루트 폰트 크기나 뷰포트 너비를 프로젝트 설정에 맞게 조정합니다.
- 결과 옆의 Copy 버튼을 클릭해 클립보드에 복사합니다.
자주 쓰는 변환 예시
기본 설정(루트 폰트 크기 16px, 뷰포트 1920px) 기준:
16px=1rem=1em=0.833vw1rem=16px100vw=1920px=120rem
각 단위 사용 시나리오
- px — 절대 크기. 테두리, 그림자 등 세부 요소에 적합합니다.
- rem — 사용자 브라우저 폰트 크기 설정에 따라 스케일됩니다. 접근성 중심 디자인에서 폰트 크기와 간격에 권장.
- em — 부모 요소의 폰트 크기를 기준으로 합니다. 컴포넌트 내부 상대 사이징에 유용합니다.
- vw — 뷰포트 너비를 기준으로 합니다. 유동적 타이포그래피와 전체 너비 레이아웃에 적합합니다.
FAQ
지원하는 CSS 단위는 무엇입니까?
px, rem, em, vw를 지원합니다. 임의의 단위로 값을 입력하면 네 가지 단위 결과가 즉시 표시됩니다.
rem은 어떻게 계산됩니까?
rem(루트 em)은 루트 요소의 폰트 크기를 기준으로 합니다. 기본값은 16px이므로 1rem = 16px입니다. 설정에서 루트 폰트 크기를 변경할 수 있습니다.
vw는 어떻게 계산됩니까?
vw는 뷰포트 너비의 1%입니다. 뷰포트 너비가 1920px이면 1vw = 19.2px입니다. 대상 레이아웃에 맞게 뷰포트 너비를 조정하세요.
데이터가 서버로 전송됩니까?
아니요. 모든 변환은 브라우저 내에서 완결됩니다. 데이터는 기기 밖으로 나가지 않습니다.