CSS px·rem·em 단위 변환 방법과 기준값 설정

변환 전에 기준값을 정하는 법

CSS에서 같은 숫자라도 단위에 따라 의미가 달라집니다. px는 픽셀 기준으로 읽히지만 em과 rem은 기준 크기에 의존하고, %는 기준 크기에 대한 비율로 계산됩니다. vw와 vh는 뷰포트의 가로와 세로를 기준으로 하므로 화면 조건을 함께 살펴봐야 합니다. 이 변환기는 숫자와 출발 단위, 도착 단위를 정해 서로 다른 CSS 단위로 값을 바꾸는 데 사용할 수 있습니다.

출발 단위와 도착 단위에는 px, em, rem, %, vw, vh, pt, cm, mm, in을 사용할 수 있습니다. 글꼴 기준으로 작성된 값을 픽셀로 확인하거나, 픽셀 값을 상대 단위로 바꿀 때 입력 조건을 명시하면 결과를 해석하기 쉽습니다. 단위만 바꾸는 계산이므로 실제 스타일에서 필요한 기준 크기와 뷰포트 조건을 상황에 맞게 정해야 합니다.

em과 rem의 계산에서 기준 크기는 중요한 역할을 합니다. 같은 2em이라도 기준 크기가 다르면 픽셀로 환산되는 값이 달라집니다. 백분율 역시 기준 크기를 바탕으로 계산되며, vw는 뷰포트 너비, vh는 뷰포트 높이를 사용합니다. 따라서 화면 설계값을 비교할 때는 결과 숫자만 보지 말고 어떤 기준을 입력했는지 기록하는 편이 좋습니다.

값과 조건을 넣어 변환 실행하기

1. 변환할 숫자를 입력합니다. 숫자를 비워 두면 기본 숫자 16이 사용됩니다. 특정 CSS 값의 환산이 목적이라면 소수점이 포함된 숫자도 입력한 뒤 해당 값의 단위를 선택합니다.

2. 출발 단위와 도착 단위를 지정합니다. 선택할 수 있는 단위는 px, em, rem, %, vw, vh, pt, cm, mm, in입니다. 예를 들어 픽셀 값을 rem으로 바꾸려면 출발 단위에 px, 도착 단위에 rem을 설정합니다. 입력하지 않은 출발 단위는 px, 입력하지 않은 도착 단위는 rem으로 처리됩니다.

3. 기준 크기를 확인합니다. em, rem, 또는 %가 출발 단위라면 기준 크기가 계산에 사용됩니다. 별도의 값을 입력하지 않으면 기준 크기는 16입니다. 이 값은 해당 상대 단위가 몇 픽셀에 해당하는지 결정하므로, 디자인에서 사용하는 기준 글꼴 크기나 기준 크기와 맞춰 입력해야 합니다.

4. 뷰포트 조건을 점검합니다. vw를 출발 단위나 도착 단위로 사용하면 뷰포트 너비가 필요하고, vh를 사용하면 뷰포트 높이가 필요합니다. 생략된 뷰포트 너비는 1920, 높이는 1080으로 처리됩니다. 특정 화면을 기준으로 계산하려면 그 화면의 조건에 맞는 값을 넣습니다.

5. 변환을 실행한 다음 성공 결과에서 도착 단위 값과 중간 픽셀 값을 함께 살펴봅니다. 계산은 입력값을 먼저 픽셀 값으로 바꾼 뒤 요청한 도착 단위로 다시 변환하는 방식입니다. 이 중간값을 확인하면 상대 단위나 물리 단위가 어떤 픽셀 기준을 거쳤는지 추적할 수 있습니다.

6. 입력 조건과 결과를 비교합니다. 기준 크기 또는 뷰포트 값을 바꿨다면 같은 숫자를 다시 계산해 결과의 변화도 확인합니다. pt, cm, mm, in을 사용할 때는 각각의 픽셀 환산 계수가 적용되므로, 출발 단위와 도착 단위를 바꾸어 입력할 때 단위 방향을 혼동하지 않도록 합니다.

입력값을 모두 제공하지 않아도 기본값으로 변환을 실행할 수 있지만, 기본값은 특정 프로젝트의 디자인 기준을 대신하지 않습니다. 실제 CSS에 적용할 값이라면 사용 중인 기준 크기와 화면 조건을 먼저 정한 뒤 입력하는 편이 결과를 비교하기 좋습니다.

성공값과 실패 범위를 구분하기

성공 결과의 계산 흐름은 두 단계입니다. 먼저 출발값을 픽셀 값으로 환산하고, 그 픽셀 값을 도착 단위의 규칙에 따라 바꿉니다. em과 rem으로 갈 때는 픽셀 값을 기준 크기로 나누고, %로 바꿀 때는 픽셀 값에 100을 곱한 뒤 기준 크기로 나눕니다. 반대로 em과 rem을 출발 단위로 쓰면 입력 숫자에 기준 크기를 곱하고, %는 입력 숫자에 기준 크기를 곱한 뒤 100으로 나눕니다.

vw로 변환할 때는 픽셀 값을 뷰포트 너비로 나눈 뒤 100을 곱합니다. vh는 같은 방식으로 뷰포트 높이를 사용합니다. 반대 방향에서 vw는 입력 숫자에 뷰포트 너비를 곱하고 100으로 나누며, vh는 입력 숫자에 뷰포트 높이를 곱하고 100으로 나눕니다. pt는 1포인트를 1.33333픽셀로, cm은 1센티미터를 37.795픽셀로, mm은 1밀리미터를 3.7795픽셀로, in은 1인치를 96픽셀로 환산합니다.

성공한 결과에서는 변환값과 중간 픽셀 값이 소수점 넷째 자리까지 반올림됩니다. 그러므로 긴 소수점이 그대로 표시되지 않을 수 있으며, 여러 단계를 다시 계산할 때는 표시된 반올림값과 원래 입력값 사이에 작은 차이가 생길 수 있습니다. 결과를 CSS에 옮길 때는 변환 대상과 계산에 사용한 기준 조건을 함께 적어 두면 다른 화면 조건에서 숫자가 달라지는 이유를 설명하기 쉽습니다.

기준 크기가 0이면 em, rem, %로 변환하는 결과가 0으로 돌아옵니다. 관련 뷰포트 값이 0인 상태에서 vw 또는 vh로 변환해도 결과가 0입니다. 이 값은 실패 표시와 같은 의미가 아니므로, 결과가 0이면 먼저 분모 역할을 하는 기준 크기나 뷰포트 값을 확인해야 합니다.

단위 이름은 소문자로 처리됩니다. 목록에 없는 출발 단위는 오류로 거부되는 대신 입력 숫자가 이미 픽셀인 것처럼 계산될 수 있고, 목록에 없는 도착 단위는 픽셀 값을 그대로 둘 수 있습니다. 따라서 오탈자가 있어도 기대한 단위 변환이 일어나지 않을 수 있습니다. 변환 중 예외가 발생한 경우에는 작업이 성공으로 끝나지 않고 예외 내용이 포함된 실패 결과가 반환됩니다.

사용 예시

웹 페이지의 16px 크기를 기준 크기 16에서 사용하는 rem 값으로 바꾸려는 상황입니다.

기준 크기를 16으로 설정하고 숫자 16, 출발 단위 px, 도착 단위 rem을 지정한 다음 변환을 실행합니다.

성공 결과에는 중간 픽셀 값 16과 도착 단위 값 1.0이 포함됩니다.

제한 사항

• 지원 목록 밖의 단위가 거부된다고 볼 수 없으며, 기준 크기나 관련 뷰포트 치수가 0이면 해당 상대 단위 변환 결과가 0이 될 수 있습니다. 변환 중 예외가 생기면 성공값 대신 예외 내용이 포함된 실패 결과가 반환됩니다.

자주 발생하는 오류

• 단위 철자를 잘못 입력해도 출발 단위가 픽셀처럼 취급되거나 도착 단위가 픽셀값을 유지할 수 있습니다. 결과가 예상과 다르면 입력한 단위를 px, em, rem, %, vw, vh, pt, cm, mm, in 가운데 의도한 값과 대조하고 다시 실행하세요.

자주 묻는 질문

기준 크기와 뷰포트 값을 반드시 입력해야 하나요?

입력하지 않아도 변환 자체는 기본 조건으로 진행됩니다. 기준 크기의 기본값은 16이고, 뷰포트 너비와 높이의 기본값은 각각 1920과 1080이므로 특정 화면이나 프로젝트 기준을 반영하려면 해당 값을 직접 지정해야 합니다.

em, rem, %도 다른 CSS 단위로 바꿀 수 있나요?

세 단위 모두 변환 대상이 될 수 있습니다. em과 rem을 출발값으로 쓰면 입력 숫자에 기준 크기를 곱하고, 백분율 출발값은 기준 크기를 곱한 뒤 100으로 나누므로 같은 숫자라도 단위에 따라 픽셀 결과가 달라집니다.

지원되지 않는 단위를 입력하면 어떤 결과가 나오나요?

지원 목록 밖의 이름이 입력되면 일반적인 단위 거부 결과가 나오지 않을 수 있습니다. 출발 쪽은 숫자를 픽셀로 간주할 수 있고 도착 쪽은 픽셀값을 바꾸지 않을 수 있으므로, 입력 전에 단위 철자와 위치를 지원 목록과 대조하는 것이 좋습니다.