CSS Unit Converter는 다양한 CSS 단위를 실시간으로 변환해주는 도구입니다. 📏 지원 단위 • px (Pixels) - 절대 단위 • rem (Root EM) - 루트 요소 기준 상대 단위 • em (EM) - 부모 요소 기준 상대 단위 • % (Percentage) - 백분율 • vh (Viewport Height) - 뷰포트 높이 기준 • vw (Viewport Width) - 뷰포트 너비 기준 • pt (Points) - 인쇄 단위 ⚙️ 설정 옵션 • Base Font Size: rem/em 계산의 기준이 되는 폰트 크기 (기본값: 16px) • Viewport Width: vw 계산의 기준이 되는 뷰포트 너비 (기본값: 1920px) • Viewport Height: vh 계산의 기준이 되는 뷰포트 높이 (기본값: 1080px) 🔄 변환 방법 1. 변환할 값을 입력하세요 2. 현재 단위를 선택하세요 (px, rem, em 등) 3. 모든 단위로 자동 변환된 결과가 표시됩니다 4. 각 결과값을 클릭하여 복사할 수 있습니다 📋 빠른 참조표 일반적으로 자주 사용하는 크기의 px-rem 변환표를 제공합니다.

CSS 단위는 크게 절대 단위와 상대 단위로 나뉩니다. 📐 절대 단위 • px (Pixels): 화면의 물리적 픽셀 • pt (Points): 1pt = 1/72 inch, 주로 인쇄용 📊 상대 단위 - 폰트 기반 • rem: 루트(html) 요소의 font-size 기준 • em: 부모 요소의 font-size 기준 • %: 부모 요소의 크기 기준 🖥️ 상대 단위 - 뷰포트 기반 • vh: 뷰포트 높이의 1% • vw: 뷰포트 너비의 1% 💡 사용 권장사항 • 폰트 크기: rem 사용 권장 (접근성 향상) • 여백/패딩: rem 또는 px • 반응형 레이아웃: vh, vw, % 활용 • 인쇄 스타일: pt 사용 🎯 rem vs em • rem: 일관성 있는 크기 조정 • em: 컴포넌트 기반 크기 조정 • 일반적으로 rem이 더 예측 가능하고 관리하기 쉽습니다 ⚠️ 주의사항 • vh/vw는 모바일 브라우저에서 주소창 높이로 인해 예상과 다를 수 있습니다 • em은 중첩될 경우 계산이 복잡해질 수 있습니다 • 접근성을 위해 고정 px보다 상대 단위 사용을 권장합니다

💡 CSS Unit Converter 활용 가이드 1. 반응형 디자인 뷰포트 단위(vh, vw)를 사용하여 화면 크기에 따라 자동으로 조정되는 레이아웃을 만들 수 있습니다. 2. 접근성 향상 rem 단위를 사용하면 사용자가 브라우저 폰트 크기를 조정했을 때 전체 레이아웃이 함께 조정됩니다. 3. 일관성 유지 디자인 시스템에서 8px 그리드 시스템을 사용한다면: - 8px = 0.5rem - 16px = 1rem - 24px = 1.5rem - 32px = 2rem 4. 모바일 최적화 모바일 기기의 뷰포트를 고려하여 설정을 조정하세요: - iPhone 13: 390 × 844 - iPhone 13 Pro Max: 428 × 926 - iPad: 768 × 1024 5. CSS 변수 활용 변환된 값을 CSS 변수로 설정하여 재사용: css :root { --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ } 6. 미디어 쿼리 breakpoints 일반적인 breakpoints를 rem으로 변환: - Mobile: < 48rem (768px) - Tablet: 48rem - 64rem (768px - 1024px) - Desktop: > 64rem (1024px) 7. 인쇄 스타일 인쇄용 CSS를 작성할 때는 pt 단위를 사용하세요: css @media print { body { font-size: 12pt; } h1 { font-size: 24pt; } } 8. 폰트 크기 스케일 타이포그래피 스케일 생성: - Small: 0.875rem (14px) - Base: 1rem (16px) - H3: 1.25rem (20px) - H2: 1.5rem (24px) - H1: 2rem (32px) 9. 컴포넌트 크기 설정 버튼, 카드 등의 컴포넌트 크기를 rem으로 설정하면 전체적인 스케일 조정이 쉽습니다. 10. 개발자 도구 활용 브라우저 개발자 도구에서 계산된 값을 확인하고, 이 도구로 다시 변환하여 최적의 단위를 찾으세요.