CSS 단위 변환기

두 갈래의 단위 계열

모든 CSS 길이는 두 계열 중 하나에 속합니다. px, pt, cm, mm, in 같은 절대 단위는 컨텍스트에 따라 변하지 않는 고정된 물리적 또는 장치 크기를 나타냅니다. em, rem, percent, vw, vh, ch, ex 같은 상대 단위는 보통 글꼴 크기나 뷰포트 같은 다른 무언가를 기준으로 크기를 나타냅니다. 반응형이면서 접근성 있는 CSS의 모든 기술은 결국 각 작업에 맞는 계열을 고르는 일로 귀결되며, 이 변환기는 그 둘 사이를 깔끔하게 옮기기 위해 존재합니다.

이 경계가 중요한 까닭은 절대 단위는 값을 얼려 버리는 반면 상대 단위는 값이 적응하게 두기 때문입니다. 픽셀로 지정한 제목은 사용자가 브라우저를 어떻게 설정했든 같은 크기로 머물지만, rem으로 지정한 같은 제목은 사용자가 기본 글자 크기를 키우면 함께 커집니다. 둘 중 하나는 친절한 동작이고, 다른 하나는 조용히 누군가를 배제합니다.

픽셀과 16px 기준선

px는 거의 모든 변환의 기준점입니다. 이름과 달리 CSS 픽셀이 언제나 물리적 화면 점 하나인 것은 아닙니다. 고밀도 디스플레이에서는 16px짜리 단어가 읽기 편한 크기로 유지되도록 브라우저가 px를 여러 장치 점에 대응시키는데, 그래서 하드웨어가 달라져도 px는 절대 단위로 칩니다. 이 도구의 대부분의 변환은 한 숫자, 즉 루트 글꼴 크기에 달려 있으며, 그 기본값은 16px인데 이는 브라우저가 별도 설정 없이 html 요소에 적용하는 크기이기 때문입니다. 고급 설정에서 그 기준을 바꾸면 모든 rem과 em 결과가 그에 맞춰 다시 계산됩니다.

em 대 rem: 캐스케이드의 차이

이것이 가장 많은 개발자를 걸려 넘어지게 하는 구분입니다. rem은 언제나 루트 글꼴 크기를 기준으로 하므로, 1.5rem은 문서 어디에서나 같은 길이이며 예측 가능하고 평평합니다. em은 그것이 놓인 요소의 글꼴 크기를 기준으로 하는데, 이는 em이 누적된다는 뜻입니다. 목록 항목이 1.2em으로 설정되고 그 부모도 1.2em이라면, 자식은 조부모의 1.2 곱하기 1.2이며, 중첩이 텍스트를 조용히 뜻밖의 크기로 불려 놓을 수 있습니다.

그 누적이 가끔은 원하는 바이기도 합니다. em으로 표현한 안쪽 여백이나 바깥 여백은 요소 자신의 텍스트에 맞춰 크기가 조정되므로, 버튼의 라벨이 길어져도 여백 비율이 유지됩니다. 하지만 전역 타이포그래피 척도에는 바로 그 누적되지 않는 성질 때문에 rem이 보통 더 안전한 기본값입니다. 이 변환기는 루트 글꼴 크기와 부모 글꼴 크기를 따로 설정할 수 있게 하여, rem 결과와 em 결과가 바로 그 차이를 반영하도록 합니다.

유동적 레이아웃을 위한 뷰포트 단위

뷰포트 단위는 창 자체의 크기를 기준으로 측정합니다. 1vw는 뷰포트 너비의 1퍼센트이고 1vh는 높이의 1퍼센트라서, 50vw는 글꼴 설정과 상관없이 언제나 창 너비의 절반입니다. 이들은 유동적 레이아웃과, 글자 크기가 아니라 화면에 맞춰 커져야 하는 큰 디스플레이 제목의 근간입니다.

다만 조심해서 쓰세요. 본문 글을 순전히 vw로만 크기 지정하면 좁은 휴대폰에서는 읽을 수 없을 만큼 작아지고 넓은 모니터에서는 부풀어 오르며, 일부 환경에서는 사용자의 확대를 무시할 수 있습니다. 현대적 해법은 clamp 함수인데, 최솟값과 선호하는 유동값, 최댓값을 받아, 제목이 뷰포트에 맞춰 커지되 결코 하한 아래로 떨어지거나 상한을 넘지 않게 합니다. 하한과 상한을 여기서 rem으로 변환하면, 그것들이 여전히 사용자 글꼴 설정을 존중하게 됩니다.

percent, ch, ex

percent는 상대적이지만, 무엇에 상대적인지는 속성에 따라 다릅니다. width에서는 담는 블록 너비의 백분율이고, font-size에서는 부모 글꼴 크기의 백분율이라서, 타이포그래피에서는 em과 매우 비슷하게 동작합니다. 바로 그 컨텍스트 의존성 때문에 이 도구는 글꼴 크기의 퍼센트를 변환할 때 부모 글꼴 크기를 묻습니다. 간과하기 쉬운 글꼴 기준 단위가 두 개 더 있습니다. ch는 현재 글꼴에서 숫자 0의 너비로, 문단을 약 60ch라는 편안한 읽기 폭으로 제한하는 데 완벽하고, ex는 소문자 x의 높이로, 글꼴 비율에 묶인 세로 조정에 유용합니다.

절대 인쇄 단위: pt, in, cm, mm

물리 단위는 CSS 사양의 정확한 비율로 규정되며, 그래서 여기 변환은 근삿값이 아닙니다. 1인치는 96px이고, 1포인트는 1인치의 72분의 1이라서 1과 3분의 1 픽셀로 계산되며, 1센티미터는 약 37.8px이고, 1밀리미터는 그것의 10분의 1입니다. 이 비율들은 실제 디스플레이와 상관없이 고정되어 있습니다.

화면에서는 이 단위들이 대체로 함정입니다. 페이지 위의 1센티미터가 모니터에 댄 자의 1센티미터와 일치하는 일은 드물기 때문입니다. 이들의 진짜 보금자리는 인쇄 스타일시트인데, 물리적 종이 한 장이 이들에게 진짜 의미를 부여하며, 특히 pt는 디자이너와 워드프로세서가 글자 크기를 표현하는 관습적 방식으로 남아 있습니다. 인쇄용으로 꾸밀 때는 pt, cm, mm에 손을 뻗고, 화면용으로 꾸밀 때는 rem, em, 그리고 뷰포트 단위에 손을 뻗으세요.

접근성: px 글꼴이 문제인 이유

글꼴 크기를 px로 설정하면, 그것을 못 박아 고정하는 셈입니다. 흔히 필요해서 브라우저 기본 글자 크기를 키운 사용자는 아무 변화도 보지 못하는데, 고정된 픽셀 값이 그 선호를 통째로 무시하기 때문입니다. 대신 텍스트를 rem으로 크기 지정하면 사용자가 선택한 루트 글꼴 크기에 맞춰 크기가 조정되는데, 이는 CSS에서 얻을 수 있는 가장 효과가 큰 접근성 개선 중 하나이면서 기본 독자에게는 시각적으로 아무 대가도 들지 않습니다.

여기서 실용적인 작업 흐름이 자연스레 나옵니다. 직관적이니 픽셀로 디자인한 다음, 출시 전에 타이포그래피와 간격을 rem으로 변환해 레이아웃이 사용자 설정을 존중하게 하는 것입니다. 이것이 이 도구가 수행하는 가장 흔한 변환이며, 기본 16px 기준에서는 산수가 친절합니다. 16px는 1rem, 24px는 1.5rem, 8px는 0.5rem이기 때문입니다.