CSS 단위 변환

CSS 단위 변환 사용법

CSS에는 길이를 적는 단위가 여러 가지 있습니다. 디자인 시안은 대부분 px로 나오지만, 글꼴 크기는 rem으로, 화면에 맞춰 늘어나는 영역은 vw로, 인쇄용 스타일은 pt로 적는 일이 많습니다. 이 도구는 기준값(html 글꼴 크기, 부모 글꼴 크기, 화면 크기)을 정해 두고 한 값을 여러 단위로 한꺼번에 바꿔 보여 주며, CSS 코드를 통째로 넣어 px를 rem으로 일괄 변환할 수 있습니다.

쓰는 순서

1. 맨 위의 기준을 확인합니다. 브라우저 기본값은 html 글꼴 16px입니다. 사이트가 html { font-size: 62.5% } 를 쓴다면 10으로 바꿉니다.
2. vw, vh 를 계산하려면 뷰포트 크기를 넣습니다. 아이폰, 태블릿 같은 버튼으로 흔한 화면 크기를 넣을 수 있고, 처음 열었을 때는 지금 보고 있는 창의 크기가 들어갑니다.
3. 값 변환 탭에 값을 한 줄에 하나씩 넣습니다. 단위를 빼고 숫자만 적으면 px로 봅니다.
4. 표의 값을 누르면 그 값이 복사됩니다. 전체는 표 복사나 CSV로 저장으로 가져갑니다.

예시

기준을 html 16px, 부모 16px, 뷰포트 1920×1080 으로 두고 예시 버튼을 누르면 다음과 같이 나옵니다(일부).

뷰포트를 아이폰(375×812)으로 바꾸면 50vw 는 187.5px 가 됩니다. 같은 vw 값이 기기마다 얼마나 달라지는지 확인할 때 이렇게 씁니다.

단위별 계산 기준

물리 단위는 CSS 규격이 1인치를 96px로 정한 값을 따른 것입니다. 실제 화면에서 자로 재면 2.5cm 가 정확히 2.5cm 로 나오지 않습니다. 화면의 물리 크기와 해상도가 기기마다 다르기 때문이며, 인쇄할 때에만 대체로 맞습니다. % 는 글꼴 크기에 쓴 경우를 기준으로 계산합니다. width 의 % 는 부모 요소의 너비가 기준이라 이 표의 값과 다릅니다.

CSS 코드 통째로 변환

디자인 시안대로 px로 짠 CSS를 rem으로 바꿔야 할 때 값을 하나씩 계산하지 않아도 됩니다. CSS 코드 통째로 변환 탭에 코드를 붙여 넣거나 CSS 파일 열기로 불러오고, 바꿀 단위를 고르면 아래에 바뀐 코드가 나옵니다. 예시 버튼의 코드를 px → rem 으로 바꾸면 font-size 24px 는 1.5rem, line-height 32px 는 2rem, margin 16px 0 8px 는 1rem 0 0.5rem, padding 0 12px 는 0 0.75rem 이 되어 6곳이 바뀝니다.

• 1px 이하의 선 굵기는 그대로 두기: 켜 두면 border: 1px 이나 letter-spacing: -0.5px 같은 작은 값은 px로 남깁니다. 0.0625rem 처럼 바뀐 선은 기기에 따라 흐리게 보이거나 사라지기 때문입니다. 예시에서는 두 곳을 그대로 둡니다.
• @media 조건 안의 값도 바꾸기: 꺼 두면 @media (max-width: 768px) 의 768px 처럼 조건 부분은 그대로 두고 그 안의 규칙만 바꿉니다. 미디어 쿼리를 em이나 rem으로 적는 팀도 있어 선택할 수 있게 했습니다.
• 파일 이름이나 주소 안의 숫자(hero-1920px.jpg)는 바꾸지 않습니다. 0px 는 단위 없는 0 으로 적습니다.

결과는 바뀐 코드 복사나 CSS 파일로 저장으로 가져갑니다. SCSS나 LESS 파일도 열 수 있지만 변수 계산식 안의 값은 결과를 꼭 다시 확인하세요.

어떤 단위를 언제 쓰나

• 글꼴 크기: rem. 사용자가 브라우저에서 글자 크기를 키우면 함께 커집니다.
• 여백: rem이 무난합니다. 버튼 안쪽 여백처럼 글자 크기에 비례해야 하는 것은 em.
• 선 굵기, 그림자: px. 너무 작은 값은 rem으로 바꾸지 않습니다.
• 화면 전체를 채우는 영역: vw, vh. 휴대폰 주소창 때문에 100vh 가 화면보다 커지는 문제가 있어 요즘은 100dvh 를 함께 씁니다.
• 인쇄용: pt, mm.