![[CSS]: 크기(size)](/images/htmlcss_logo.png){kind=logo}
Table of Contents
CSS Size 단위 가이드
CSS에서 크기를 지정할 때 다양한 단위를 사용할 수 있다. px, em, rem, %, vw, vh 등의 단위가 있으며, 각각의 특징과 사용법을 이해하는 것이 중요하다. 이번 글에서는 CSS의 크기 단위를 정리하고 언제 어떤 단위를 사용하면 좋은지 알아보자.
1. 절대 단위 vs 상대 단위
CSS에서 크기 단위는 크게 절대 단위(Absolute Units) 와 상대 단위(Relative Units) 로 나뉜다.
✅ 절대 단위 (Absolute Units)
절대 단위는 고정된 크기를 가지며, 환경에 따라 변하지 않는다.
| 단위 | 설명 |
|---|---|
px |
픽셀 (가장 일반적인 단위) |
cm |
센티미터 |
mm |
밀리미터 |
in |
인치 (1in = 2.54cm) |
pt |
포인트 (1pt = 1/72인치) |
pc |
파이카 (1pc = 12pt) |
예제:
.box {
width: 200px;
height: 100px;
}
💡 절대 단위는 일반적으로 웹보다는 인쇄 디자인에서 사용됨.
✅ 상대 단위 (Relative Units)
상대 단위는 부모 요소나 뷰포트 크기에 따라 크기가 변한다.
| 단위 | 기준 |
|---|---|
% |
부모 요소의 크기에 대한 백분율 |
em |
부모 요소의 폰트 크기 기준 (1em = 부모 폰트 크기) |
rem |
루트 요소(<html>)의 폰트 크기 기준 (기본 16px) |
vw |
뷰포트 너비(Viewport Width)의 백분율 (1vw = 1%) |
vh |
뷰포트 높이(Viewport Height)의 백분율 (1vh = 1%) |
vmin |
vw와 vh 중 작은 값 기준 |
vmax |
vw와 vh 중 큰 값 기준 |
예제:
.container {
width: 50%; /* 부모 요소의 절반 크기 */
font-size: 2em; /* 부모 폰트 크기의 2배 */
}
2. 주요 단위별 특징 및 사용 사례
🔹 px (픽셀)
- 화면 해상도에 따라 고정된 크기를 가짐
- 웹에서 가장 일반적으로 사용됨
- 반응형 디자인에서는 유연성이 떨어질 수 있음
💡 사용 예시: 버튼, 아이콘 크기 등 픽셀 단위가 필요한 요소
.button {
width: 120px;
height: 40px;
}
🔹 % (퍼센트)
- 부모 요소의 크기에 상대적으로 변함
- 반응형 디자인에서 유용하게 사용됨
💡 사용 예시: 레이아웃 배치, 이미지 크기 조정 등
.container {
width: 80%; /* 부모 요소의 80% 크기 */
}
🔹 em vs rem
🔹 em (부모 폰트 크기 기준)
- 부모 요소의
font-size를 기준으로 크기 결정 - 부모 요소에 따라 크기가 계속 변경될 수 있음 (중첩 시 주의 필요)
.parent {
font-size: 16px;
}
.child {
font-size: 2em; /* 32px (16px × 2) */
}
🔹 rem (루트 폰트 크기 기준)
- HTML
<html>요소의font-size를 기준으로 크기 결정 - 부모 요소에 영향받지 않아 예측하기 쉬움
html {
font-size: 16px;
}
.box {
font-size: 1.5rem; /* 24px (16px × 1.5) */
}
💡 rem이 em보다 유지보수가 쉬운 경우가 많음
🔹 vw, vh (뷰포트 기준 단위)
- 뷰포트 크기에 상대적인 크기를 가짐
- 화면 크기에 따라 자동으로 조정됨
💡 사용 예시: 전체 화면을 채우는 요소
.fullscreen {
width: 100vw; /* 뷰포트 너비 100% */
height: 100vh; /* 뷰포트 높이 100% */
}
🔹 calc() 함수 활용
calc() 함수는 서로 다른 단위를 조합하여 크기를 동적으로 계산할 수 있게 해준다.
💡 사용 예시: 가변 크기 요소의 너비 설정
.dynamic-box {
width: calc(100% - 50px); /* 전체 크기에서 50px을 뺀 값 */
}
.header {
height: calc(100vh - 80px); /* 뷰포트 높이에서 헤더 크기 제외 */
}
✅ calc()를 사용하면 유연한 레이아웃을 만들 수 있어 반응형 디자인에 유용하다!
3. 단위 선택 가이드
어떤 단위를 사용해야 할까?
| 상황 | 추천 단위 |
|---|---|
| 고정 크기가 필요한 경우 | px |
| 반응형 레이아웃 | %, vw, vh |
| 폰트 크기 조정 | rem (혹은 em) |
| 요소의 크기를 폰트에 맞추려면 | em |
| 전체 화면을 채우는 경우 | vw, vh |
✅ 팁:
px은 고정 크기가 필요할 때 사용rem을 기본 폰트 크기로 사용하면 유지보수가 쉬움vw,vh를 활용하면 반응형 디자인을 간단하게 구현 가능calc()를 활용하여 유연한 크기 조정 가능
4. 결론
CSS에서 크기를 지정할 때 다양한 단위를 사용할 수 있으며, 목적에 따라 적절한 단위를 선택하는 것이 중요하다.
- 픽셀(
px)은 고정 크기가 필요한 경우 사용 - 퍼센트(
%)는 부모 요소에 비례하는 크기를 설정할 때 유용 em과rem은 텍스트 크기와 함께 조정이 필요한 경우 효과적- 뷰포트 단위(
vw,vh)는 반응형 레이아웃에서 강력한 도구 calc()를 활용하면 유연한 크기 조정이 가능
각 단위의 특성을 이해하고, 프로젝트의 요구사항에 맞게 적절히! 🚀