📏
CSS 단위 변환 완벽 가이드
CSS 단위란?
CSS 단위는 요소의 크기, 간격, 위치 등을 정의하는 측정 기준입니다. 웹 개발에서 가장 중요한 개념 중 하나로, 올바른 단위 선택은 반응형 디자인과 접근성에 직접적인 영향을 미칩니다.
CSS 단위의 분류
- 절대 단위: px, pt, cm, mm 등 - 화면 크기에 관계없이 고정
- 상대 단위: rem, em, %, vw, vh 등 - 다른 값을 기준으로 계산
주요 CSS 단위 완벽 이해하기
1. px (픽셀) - 절대 단위
.element {
font-size: 16px;
padding: 20px;
}
| 특징 | 설명 |
|---|---|
| 타입 | 절대 단위 |
| 기준 | 화면의 물리적 픽셀 |
| 장점 | 정확한 크기 지정 가능 |
| 단점 | 반응형 디자인에 부적합 |
| 사용처 | 테두리, 작은 아이콘, 정밀한 레이아웃 |
px 사용 시 주의점
- 사용자의 브라우저 글꼴 크기 설정을 무시함
- 접근성 문제 발생 가능
- 반응형 디자인에서 유연성 부족
2. rem (root em) - 상대 단위
html {
font-size: 16px; /* 기준값 */
}
.element {
font-size: 1.5rem; /* 24px (16 × 1.5) */
margin: 2rem; /* 32px (16 × 2) */
}
| 특징 | 설명 |
|---|---|
| 타입 | 상대 단위 |
| 기준 | html 요소의 font-size |
| 기본값 | 1rem = 16px (브라우저 기본) |
| 장점 | 일관된 비율, 접근성 우수 |
| 사용처 | 폰트 크기, 간격, 레이아웃 |
rem의 장점
- 일관성: 전체 사이트의 크기를 한 곳에서 조절 가능
- 접근성: 사용자의 브라우저 설정 반영
- 유지보수: 디자인 시스템에 적합
- 반응형: 미디어 쿼리로 기준값만 변경하면 전체 조정
rem 실무 팁
/* 62.5% 트릭: 1rem = 10px로 계산하기 쉽게 */
html {
font-size: 62.5%; /* 16px × 0.625 = 10px */
}
.element {
font-size: 1.6rem; /* 16px */
padding: 2rem; /* 20px */
}
3. em - 상대 단위
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px (20 × 1.5) */
padding: 2em; /* 60px (30 × 2) - font-size 기준! */
}
| 특징 | 설명 |
|---|---|
| 타입 | 상대 단위 |
| 기준 | 부모 요소의 font-size |
| 장점 | 컴포넌트 내 상대적 크기 조절 |
| 단점 | 중첩 시 계산 복잡 |
| 사용처 | 버튼 padding, 컴포넌트 내부 간격 |
em vs rem
| 비교 | em | rem |
|---|---|---|
| 기준 | 부모 요소 | html 요소 |
| 중첩 영향 | 받음 (복잡) | 받지 않음 (일관) |
| 계산 | 상황에 따라 다름 | 항상 동일 |
| 사용 권장 | 컴포넌트 내부 | 전역 레이아웃 |
4. vw (Viewport Width) - 뷰포트 단위
.hero-title {
font-size: 5vw; /* 뷰포트 너비의 5% */
width: 100vw; /* 전체 뷰포트 너비 */
}
| 특징 | 설명 |
|---|---|
| 타입 | 상대 단위 |
| 기준 | 뷰포트 너비의 1% |
| 장점 | 화면 크기에 완벽히 반응 |
| 단점 | 극단적인 크기 문제 가능 |
| 사용처 | 풀스크린 레이아웃, 반응형 타이포그래피 |
vw 계산 공식
1vw = 뷰포트 너비 / 100
예시 (뷰포트 1920px):
1vw = 19.2px
5vw = 96px
50vw = 960px
5. vh (Viewport Height) - 뷰포트 단위
.hero-section {
height: 100vh; /* 전체 뷰포트 높이 */
min-height: 50vh;
}
| 특징 | 설명 |
|---|---|
| 타입 | 상대 단위 |
| 기준 | 뷰포트 높이의 1% |
| 장점 | 세로 레이아웃에 유용 |
| 단점 | 모바일 주소창 문제 |
| 사용처 | 히어로 섹션, 풀스크린 모달 |
vh 모바일 주의사항
/* 모바일 주소창 문제 해결 */
.hero {
height: 100vh;
height: 100dvh; /* Dynamic Viewport Height - 추천 */
}
| 단위 | 설명 |
|---|---|
| svh | Small Viewport Height (주소창 표시 시) |
| lvh | Large Viewport Height (주소창 숨김 시) |
| dvh | Dynamic Viewport Height (동적 대응) |
단위 변환 공식
px ↔ rem 변환
rem = px / root-font-size
px = rem × root-font-size
예시 (root = 16px):
24px → 24 / 16 = 1.5rem
2rem → 2 × 16 = 32px
px ↔ em 변환
em = px / parent-font-size
px = em × parent-font-size
예시 (parent = 20px):
30px → 30 / 20 = 1.5em
2em → 2 × 20 = 40px
px ↔ vw 변환
vw = (px / viewport-width) × 100
px = (vw / 100) × viewport-width
예시 (viewport = 1920px):
96px → (96 / 1920) × 100 = 5vw
5vw → (5 / 100) × 1920 = 96px
px ↔ vh 변환
vh = (px / viewport-height) × 100
px = (vh / 100) × viewport-height
예시 (viewport = 1080px):
108px → (108 / 1080) × 100 = 10vh
10vh → (10 / 100) × 1080 = 108px
ColorPixLab 단위 변환기 사용법
1단계: 기준값 설정
- Root Font Size: html 요소의 기본 글꼴 크기 (기본 16px)
- Parent Font Size: em 계산용 부모 요소 글꼴 크기
- 뷰포트 크기: vw/vh 계산용 화면 크기
2단계: 값 입력 및 변환
- 변환하고 싶은 값을 입력
- 입력 단위와 출력 단위 선택
- 실시간으로 모든 단위 결과 확인
3단계: 결과 활용
- 개별 단위 복사
- CSS 변수 형태로 전체 복사
- 시각적 크기 미리보기로 확인
실무에서의 단위 선택 가이드
폰트 크기
/* 권장: rem */
body {
font-size: 1rem; /* 16px */
}
h1 {
font-size: 2.5rem; /* 40px */
}
/* 반응형 타이포그래피: clamp() */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
간격 (Margin, Padding)
/* 권장: rem 또는 em */
.card {
padding: 1.5rem;
margin-bottom: 2rem;
}
/* 버튼 내부: em (폰트 크기에 비례) */
.button {
padding: 0.5em 1em;
}
레이아웃 너비
/* 권장: %, vw, 또는 max-width 조합 */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.full-width {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
테두리, 작은 요소
/* 권장: px */
.element {
border: 1px solid #ccc;
border-radius: 4px;
}
단위 선택 체크리스트
| 용도 | 권장 단위 | 이유 |
|---|---|---|
| 폰트 크기 | rem | 접근성, 일관성 |
| 간격 (전역) | rem | 일관된 리듬 |
| 간격 (컴포넌트 내부) | em | 폰트 크기에 비례 |
| 테두리, 그림자 | px | 정밀한 제어 |
| 풀스크린 레이아웃 | vh, vw | 뷰포트 대응 |
| 반응형 타이포그래피 | clamp() + rem/vw | 최소/최대 제한 |
| 컨테이너 너비 | %, max-width | 유연성 + 제한 |
관련 도구
- CSS 단위 변환기 - px, rem, em, vw, vh 실시간 변환
- 그리드 계산기 - 반응형 그리드 레이아웃 생성
- WCAG 검사기 - 접근성 색상 대비 확인
결론
CSS 단위의 올바른 선택은 반응형 디자인과 접근성의 핵심입니다:
- rem을 기본으로 사용하여 일관성과 접근성 확보
- em은 컴포넌트 내부에서 상대적 크기 조절에 활용
- vw/vh는 풀스크린 레이아웃에 적합
- px는 정밀한 제어가 필요한 곳에 제한적으로 사용
- clamp()로 반응형 타이포그래피 구현
ColorPixLab의 단위 변환기로 복잡한 계산 없이 모든 CSS 단위를 쉽게 변환하고 실무에 활용해보세요!