CSS 단위 변환기 조정 가능한 뷰포트와 글꼴 크기로 px, em, rem, %, vw, vh, vmin 및 vmax를 서로 변환합니다.

What Is CSS 단위 변환기?

CSS 단위 변환기는 다양한 CSS 길이 단위를 번역하며, 문맥 의존적인 단위에 대한 고려를 포함합니다. 고정 단위(px)는 항상 같은 시각적 크기를 나타내지만 상대 단위는 문맥에 따라 다릅니다. em 및 rem은 글꼴 크기에 관련되고, %는 부모 요소와 관련되며, 뷰포트 단위(vw, vh, vmin, vmax)는 브라우저 창 치수로 관련됩니다. 이 변환기는 모든 문맥 변수(뷰포트 크기, 기본 글꼴 크기, 부모 크기)를 구성하여 정확한 CSS 단위 간의 변환을 허용하며, 반응형 디자인 계산을 빠르고 정밀하게 만듭니다.

Why Use CSS 단위 변환기?

• 정확한 vw/vh 계산을 위한 구성 가능한 뷰포트 크기.
• em/rem 변환을 위한 조절 가능한 기본 글꼴 크기.
• 퍼센트 계산을 위한 부모 요소 크기.
• 8개의 필수 CSS 길이 단위 모두 포함.
• 반응형 디자인 워크플로에 적합합니다.

Common Use Cases

반응형 디자인

유동적인 타이포그래피와 레이아웃을 위한 vw 값을 계산합니다.

디자인-코드

픽셀 기반 디자인 사양을 반응형 CSS 단위로 변환합니다.

접근성

고정 픽셀 크기를 상대적인 rem 단위로 변환합니다.

레이아웃 디버깅

다양한 CSS 단어가 실제 픽셀 크기로 어떻게 번역되는지 이해합니다.

Technical Guide

CSS 길이 단위는 두 가지 범주로 나뉩니다.

절대:
• px: CSS 픽셀(1/96 인치, 표준 디스플레이에서는 1 디바이스 픽셀)

상대:
• em: 요소의 글꼴 크기에 상대적입니다. 2em = 현재 글꼴 크기의 2배
• rem: 루트 글꼴 크기(HTML 요소)에 상대적입니다. em보다 더 예측 가능합니다.
• %: 부모 요소의 해당 속성 값에 상대적입니다
• vw: 뷰포트 너비의 1%. 100vw = 전체 뷰포트 너비
• vh: 뷰포트 높이의 1%. 100vh = 전체 뷰포트 높이
• vmin: 더 작은 뷰포트 차원의 1%
• vmax: 더 큰 뷰포트 차원의 1%

일반적인 반응형 패턴:
• 유동 타이포그래피: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• 전체 높이 섹션: min-height: 100vh
• 반응형 간격: padding: 5vw

Tips & Best Practices

• 1
  접근성을 위해 rem을 글꼴 크기에 사용하고, px를 테두리와 그림자에 사용하세요.
• 2
  반응형 정사각형 컨테이너에는 vmin이 좋습니다.
• 3
  vw 단위로 클램프()를 사용하면 미디어 쿼리를 사용하지 않고 유동적인 타이포그래피를 구현할 수 있습니다.
• 4
  모바일에서 100vh는 주소 표시줄을 포함할 수 있으므로 대신 100dvh(다이내믹 뷰포트 높이)를 사용하세요.
• 5
  의심스러운 경우 rem과 px부터 시작하고, 뷰포트 상대 크기가 필요할 때만 vw/vh를 추가하세요.

Related Tools

길이 변환기

밀리미터, 센티미터, 미터, 킬로미터, 인치, 피트, 야드, 마일, 해리 등 다양한 길이 단위를 즉시 변환합니다.

⚖️ Unit Converters

휘도 변환기

칸델라/제곱미터, 닛, 램버트, 풋램버트 간의 변환을 수행합니다.

⚖️ Unit Converters

타이포그라피 단위 변환기

px, pt, em, rem, cm, mm, 인치 및 피카를 기본 폰트 크기를 설정하여 변환합니다.

⚖️ Unit Converters

힘 변환기

뉴턴, 킬로뉴턴, 파운드력, 킬로그램력, 다인, 파운달 간의 단위 변환을 수행합니다.

⚖️ Unit Converters

Frequently Asked Questions

Q px를 vw로 어떻게 변환합니까?

px 값을 뷰포트 너비로 나누고 100을 곱합니다. 예: 1920px 뷰포트에서 192px = 192/1920 × 100 = 10vw

Q vw와 %의 차이점은 무엇입니까?

vw는 항상 뷰포트 너비에 상대적입니다. %는 부모 요소에 상대적이며, 이는 뷰포트보다 작을 수 있습니다.

Q rem과 em을 언제 사용해야 합니까?

일관된 크기를 위해 루트(계승되는 서프라이즈 없음)에 상대적인 rem을 사용하세요. 부모의 글꼴 크기와 함께 크기가 조정되어야 할 때는 em을 사용합니다.

Q vmin은 무엇입니까?

vmin은 더 작은 뷰포트 차원(너비 또는 높이)의 1%에 해당합니다. 1920×1080 뷰포트에서 1vmin = 10.8px

Q 100vh 페이지가 모바일에서 스크롤바를 가집니까?

모바일 브라우저는 URL 표시줄을 뷰포트 높이 계산에 포함합니다. 실제로 보이는 높이를 얻으려면 100dvh(다이내믹 뷰포트 높이) 또는 자바스크립트를 사용하세요.

About This Tool

CSS 단위 변환기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.