CSS 단위 변환기

CSS 단위 변환기 - px, rem, em, % 계산기

🎨 CSS 단위(px, rem, em, %, pt, vw, vh) 사이를 변환하세요. 반응형 웹 디자인과 개발에 필수적인 도구입니다.

CSS 단위 종류

• 절대 단위: px, pt, cm, mm, in - 문맥과 관계없이 고정 크기
• 상대 단위: rem, em, %, vw, vh - 부모/뷰포트 기준으로 스케일
• 폰트 기준 상대 단위: rem, em, ch, ex - 폰트 크기 기반
• 뷰포트 기준 상대 단위: vw, vh, vmin, vmax - 뷰포트 크기 기반

단위 설명

• px(픽셀): 1px = 1 디바이스 픽셀. 정밀하지만 스케일링에 불리할 수 있음.
• rem: 루트 요소(html) 폰트 크기에 비례. 기본적으로 1rem = 16px.
• em: 부모 요소 폰트 크기에 비례. 중첩 요소에서 누적될 수 있음.
• %: 부모 요소의 속성에 비례. 100% = 부모와 동일.
• pt(포인트): 인쇄 단위. 1pt = 1/72 인치 ≈ 1.333px.
• vw: 1vw = 뷰포트 너비의 1%. 100vw = 전체 너비.
• vh: 1vh = 뷰포트 높이의 1%. 100vh = 전체 높이.

자주 쓰는 변환

• 1rem = 16px (브라우저 기본 설정)
• 1em = 16px (부모가 16px인 경우)
• 100% = 부모 요소 크기
• 12pt = 16px (인쇄에서 흔함)
• 1vw = 19.2px (1920px 뷰포트 기준)

62.5% 방법

html { font-size: 62.5%; } 로 설정하면 1rem = 10px이 되어 계산이 쉬워집니다: 1.6rem = 16px, 2.4rem = 24px 등.

접근성 고려사항

• 폰트는 rem 사용: 사용자의 브라우저 글꼴 설정을 존중
• 폰트에 px 지양: 사용자 설정에 따라 스케일되지 않음
• 상대 단위 사용: 확대/줌에 더 친화적
• 다양한 크기로 테스트: 200% 줌 및 큰 글씨 설정 확인

반응형 디자인

미디어 쿼리는 rem 권장: @media (min-width: 48rem) 를 768px 대신 사용하면, 사용자의 글꼴 크기 설정에 따라 브레이크포인트도 함께 스케일됩니다.

💡 프로 팁: 최신 베스트 프랙티스는 대부분의 크기(폰트, 간격, 브레이크포인트)에 rem, 테두리/세부 조정에 px, 레이아웃에는 % 또는 뷰포트 단위를 사용하는 것입니다. em은 예기치 않게 누적될 수 있어 간격에는 주의하세요.