분류: 개발 도구
CSS 단위 변환기
px, rem, em, %, vw, vh 변환
px, rem, em, 퍼센트, vw, vh 중 하나로 값을 입력하고, 그 기준이 되는 기본 글꼴 크기와 뷰포트, 컨테이너를 지정하면 같은 길이를 다른 모든 단위로 확인할 수 있습니다.
변환은 입력한 숫자를 바탕으로 페이지에서 이루어집니다. 어디로도 전송되지 않습니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
px를 rem으로 바꾸는 계산은 어디서든 똑같지만, 퍼센트와 vw, vh는 그렇지 않습니다. 페이지마다 달라지는 컨테이너 크기나 뷰포트에 따라 값이 달라지기 때문입니다. 이 도구는 먼저 그 조건을 물어보므로, 결과로 나오는 숫자는 '루트가 16px일 것'이라는 막연한 추정이 아니라 실제로 화면에 렌더링될 값입니다. rem과 em은 여기서 동일하게 처리됩니다. 둘 다 입력한 기준 글꼴 크기로 계산되는데, 페이지에 실제 부모 요소가 없는 이상 둘을 구분할 진짜 부모 크기가 없기 때문입니다. 기준 글꼴 크기를 바꿔 보면 방문자가 글자 크기를 키웠을 때 모든 rem과 em 값이 한꺼번에 어떻게 달라지는지 볼 수 있습니다.
사용 방법
- 값을 입력하고 변환할 단위를 선택합니다.
- 적용할 기준 글꼴 크기, 뷰포트 너비와 높이, 컨테이너 크기를 설정합니다.
- 같은 길이가 다른 모든 단위로 변환된 값을 확인합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- rem과 em의 결과가 왜 같나요?
- 둘 다 기준 글꼴 크기에서 계산되기 때문입니다. rem은 항상 루트 크기를, em은 부모 크기를 쓰지만, 이 도구에는 실제 부모 크기를 읽어 올 페이지가 없어 입력한 기준 글꼴 크기를 두 값 모두에 사용합니다.
- 컨테이너 크기는 어디에 쓰이나요?
- 퍼센트의 기준으로 쓰입니다. 퍼센트는 무언가에 대한 비율일 때만 의미가 있는데, 여기서는 입력한 컨테이너 크기가 그 기준이 됩니다.
- 서버로 전송되는 정보가 있나요?
- 없습니다. 입력한 숫자를 바탕으로 변환은 페이지에서 계산됩니다.