CSS 단위 변환기 사용법 px em cm mm in 차이와 계산기 첨부

CSS 작업을 하다 보면 px, em, mm, cm, in 같은 단위를 자주 보게 됩니다. 처음엔 비슷해 보여도 막상 티스토리 스킨을 만지거나 워드프레스 본문 폭, 버튼 높이, 이미지 여백, 인쇄용 문서를 맞추다 보면 단위 선택에 따라 결과가 꽤 달라집니다. 특히 웹 화면 기준으로 맞출지, 아니면 출력물이나 실측 기준으로 맞출지에 따라 써야 하는 단위가 달라집니다.

저도 티스토리 HTML을 직접 수정할 때 폰트 크기는 px로 할지 em으로 할지, 이미지 주변 여백은 몇 px가 적당한지, 인쇄용 안내문은 cm나 mm로 잡아야 할지 헷갈릴 때가 많았습니다. 그래서 아래처럼 in · cm · mm · em · px 단위를 한 번에 계산할 수 있는 변환기를 넣어두면 생각보다 훨씬 편합니다.

CSS 단위 변환기가 필요한 이유

웹에서 가장 많이 쓰는 단위는 역시 px입니다. 버튼 높이, 테두리 두께, 여백, 카드 간격처럼 화면에서 딱 떨어지는 수치를 맞출 때 가장 직관적입니다. 반면 em은 부모 요소의 글자 크기를 기준으로 바뀌기 때문에, 반응형 텍스트나 블록 간 비율을 자연스럽게 맞출 때 더 유리합니다.

그리고 mm, cm, in은 화면용보다는 출력물이나 실측 기준이 필요한 작업에서 자주 등장합니다. 예를 들어 스티커 출력 크기, 명함 여백, 라벨 디자인, 프린트용 안내문, 포장지 규격처럼 실제 길이를 계산해야 하는 경우입니다. 이럴 때 매번 검색해서 계산하면 번거롭기 때문에 한 번에 변환되는 계산기가 있으면 작업 속도가 훨씬 빨라집니다.

단위 변환기 in cm mm em px

아래 계산기는 인치(in), 센티미터(cm), 밀리미터(mm), em, 픽셀(px)을 서로 바꿔줍니다. em은 기준 폰트 크기에 따라 값이 달라지기 때문에, 기본값은 16px로 두고 필요하면 직접 바꿔서 계산하면 됩니다.

단위 변환기 in · cm · mm · em · px

인치(in), 센티미터(cm), 밀리미터(mm), em, 픽셀(px)을 한 번에 변환합니다. em은 기준 폰트(px)를 바꾸면 결과가 바로 달라집니다.

값

단위 px em mm cm in

기준 폰트

px = 1em

CSS 기준으로 1in = 96px, 1in = 2.54cm, 1cm = 10mm로 계산합니다.

변환 결과

in · cm · mm · em · px 변환 결과

단위	값	복사
px	-
em	-
mm	-
cm	-
in	-

참고

em은 기준 폰트 크기에 따라 결과가 달라집니다. 웹에서는 16px이 많이 쓰여 기본값을 16으로 넣었습니다.

by 잡가이버

단위별 차이와 많이 쓰는 상황

px는 화면에서 크기를 딱 맞춰야 할 때 가장 많이 씁니다. 예를 들어 버튼 높이를 44px로 맞추거나, 카드 모서리 둥글기를 12px로 주는 식입니다. 화면 디자인 기준으로 작업할 때는 가장 익숙하고 결과도 바로 확인됩니다.

em은 텍스트가 커지거나 줄어들 때 같이 비율이 바뀌게 만들고 싶을 때 좋습니다. 예를 들어 본문 폰트가 16px이고 버튼 안쪽 여백을 1em으로 줬다면, 글자 크기가 커지면 버튼 여백도 함께 커집니다. 반응형 구성을 잡을 때 꽤 편합니다.

cm, mm, in은 웹 화면보다 출력, 실측, 인쇄 기준에 더 잘 어울립니다. 예를 들어 택배 라벨 너비를 100mm로 잡거나, 인쇄용 안내문을 A4 기준 여백 1cm로 계산하는 경우입니다.

실무 예시로 보는 단위 변환

예를 들어 티스토리 본문 안에 들어가는 버튼 높이를 48px로 잡고 싶다면, 기준 폰트가 16px일 때는 3em입니다. 반대로 어떤 CSS 코드에서 버튼 패딩이 1.25em으로 적혀 있고 기준 폰트가 16px이라면 실제 화면에서는 20px 정도로 계산됩니다.

또 다른 예로, 인쇄용 스티커 폭이 50mm라고 하면 이는 약 5cm이고, CSS 기준으로는 약 188.976px 정도입니다. 웹에서 미리보기 박스를 만들 때 이런 식으로 환산해 두면 실제 출력 크기 감을 잡기가 훨씬 쉽습니다.

입력값	변환 예시	활용 예시
16px	1em	기본 본문 글씨 크기
32px	2em	제목, 큰 버튼 높이
1in	96px / 2.54cm	출력 크기 비교 기준
10mm	1cm	라벨, 스티커, 실측 여백
50mm	약 188.976px	출력물 웹 미리보기

티스토리와 워드프레스에서 자주 쓰는 방법

티스토리 본문이나 스킨 편집에서는 대체로 px가 가장 다루기 쉽습니다. 본문 폭, 썸네일 테두리, 버튼 높이, 댓글 박스 여백처럼 화면 기준이 명확한 부분은 px가 편합니다. 반면 본문 전체 글씨 비율이나 특정 박스 안쪽 여백을 유연하게 두고 싶다면 em이 더 자연스럽습니다.

워드프레스도 비슷합니다. 다만 블록 테마나 반응형 레이아웃을 많이 쓴다면 px만 고집하기보다 텍스트 관련 값은 em이나 rem, 정확한 간격은 px처럼 나눠 쓰는 편이 결과가 더 안정적입니다.

실제로 업무를 하면서 단위 변환이 필요한 경우 위 계산기를 활용하면 훨씬 편합니다. 특히 CSS 수정을 자주 하거나, 티스토리 HTML 편집과 워드프레스 커스텀 CSS를 같이 쓰는 분이라면 하나쯤 넣어두면 꽤 자주 쓰게 됩니다.

HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성

퍼센트 단위와 함께 볼 때 주의할 점

마찬가지로 % 단위는 해당 요소의 상위 요소를 기준으로 계산됩니다. 그래서 px처럼 절대값으로 고정되는 것이 아니라, 부모 폭이나 높이가 바뀌면 함께 달라집니다. 예를 들어 이미지 폭을 100%로 두면 부모 박스 너비를 꽉 채우게 되고, padding이나 margin도 기준 요소에 따라 체감이 달라질 수 있습니다.

이 차이를 모르고 CSS를 섞어 쓰면, 데스크톱에서는 괜찮은데 모바일에서 갑자기 글씨가 커 보이거나 여백이 깨지는 경우가 생깁니다. 그래서 px는 고정형, em과 %는 상대형이라고 생각해 두면 정리가 쉽습니다.

이 표와 계산기를 같이 보면 각 단위들의 관계를 한눈에 파악할 수 있고, 상황에 따라 어느 단위를 써야 할지도 훨씬 빨리 판단할 수 있습니다. 저는 화면 디자인은 px 위주로, 텍스트 비율은 em 위주로, 출력물은 mm나 cm 기준으로 나눠서 쓰는 편이 가장 깔끔했습니다.

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

Q. px와 em 중 무엇이 더 좋나요?

화면 간격이나 박스 크기는 px가 편하고, 글자 비율이나 유연한 레이아웃은 em이 더 잘 맞습니다. 둘 중 하나만 고집하기보다 용도를 나눠 쓰는 편이 결과가 좋습니다.

Q. 1in은 왜 96px로 계산하나요?

CSS 표준에서 화면 기준 단위로 1인치를 96픽셀로 계산하기 때문입니다. 실제 모니터 물리 크기와 완전히 같지는 않지만, 웹 계산 기준은 이렇게 맞춰집니다.

Q. 티스토리에서 이런 계산기를 넣어도 되나요?

스킨이나 HTML 편집이 가능한 환경이라면 삽입할 수 있습니다. 다만 사용 중인 스킨이나 스크립트 차단 설정에 따라 일부 버튼 동작은 확인이 필요합니다.