📋 모든 단위로 변환

px
16
픽셀 (절대)
rem
1
루트 기준
em
1
부모 기준
vw
0.833
뷰포트 너비
vh
1.481
뷰포트 높이
%
100
백분율

💻 CSS 코드

/* CSS Variables */
:root {
  --size-px: 16px;
  --size-rem: 1rem;
  --size-em: 1em;
  --size-vw: 0.833vw;
  --size-vh: 1.481vh;
}

⚙️ 기준값 설정

px

rem 기준 (기본: 16px)

px

em 기준

px

vw 기준

px

vh 기준

빠른 설정:

📊 자주 사용하는 단위 변환표

px rem em vw vh

📚 CSS 단위 가이드

📐

px (픽셀)

화면의 물리적 픽셀을 기준으로 하는 절대 단위입니다. 정확한 크기가 필요할 때 사용합니다.

🔤

rem

HTML 루트 요소의 font-size 기준 상대 단위입니다. 반응형 디자인에 적합합니다.

📝

em

부모 요소의 font-size 기준 상대 단위입니다. 컴포넌트 내부 크기 조절에 유용합니다.

🖥️

vw / vh

뷰포트 너비/높이의 1% 기준입니다. 전체 화면 레이아웃에 적합합니다.