CSS로 작업할 때 가장 기본적이면서도 많은 혼란을 주는 부분 중 하나가 바로 단위 선택입니다. 10px, 1.5em, 2rem, 50vh... 이 모든 숫자들이 어떤 의미를 가지고 있으며, 언제 어떤 단위를 선택해야 할까요? 잘못된 단위 선택은 반응형 디자인을 망치거나 접근성 문제를 일으킬 수 있습니다. 이 글에서는 각 CSS 단위의 특성과 적절한 사용 상황을 자세히 알아보고, 실무에서 활용할 수 있는 최적의 전략을 소개하겠습니다.
CSS 단위의 종류
CSS 단위는 크게 두 가지 카테고리로 나눌 수 있습니다:
- 절대 단위: 화면 크기나 다른 요소의 크기에 상관없이 항상 같은 크기를 유지
- 상대 단위: 다른 요소의 크기나 뷰포트(viewport) 크기에 따라 변하는 단위
그럼 이제 각 단위의 특성과 사용법을 자세히 살펴보겠습니다.
절대 단위 (Absolute Units)
px (픽셀)
픽셀은 CSS에서 가장 기본적이고 이해하기 쉬운 단위입니다. 화면의 각 점(디스플레이의 최소 단위)을 나타냅니다.
.box {
width: 200px;
height: 100px;
font-size: 16px;
}장점:
- 정확하고 예측 가능한 크기 지정 가능
- 모든 브라우저에서 일관되게 작동
- 디자인 목업을 CSS로 변환하기 쉬움
단점:
- 사용자의 기본 글꼴 크기 설정을 무시함
- 화면 크기에 따라 자동으로 조정되지 않음
- 접근성 측면에서 좋지 않을 수 있음
적합한 사용 상황:
- 테두리, 그림자, 이미지 크기 등 정확한 치수가 필요한 경우
- 화면 크기에 관계없이 일정한 크기를 유지해야 하는 요소
pt, cm, mm, in
이 단위들은 실제 물리적 길이를 나타내며, 주로 인쇄 미디어에서 사용됩니다.
@media print {
body {
font-size: 12pt;
margin: 2cm;
}
}적합한 사용 상황:
- 인쇄용 스타일시트
- 물리적 측정이 중요한 특수 상황
일반적인 웹 디자인에서는 거의 사용되지 않으므로 자세한 설명은 생략하겠습니다.
상대 단위 (Relative Units)
em
em은 현재 요소의 글꼴 크기를 기준으로 하는 단위입니다. 예를 들어 요소의 font-size가 16px이라면, 1em은 16px을 의미합니다.
.parent {
font-size: 16px; /* 기본값 */
}
.child {
font-size: 1.5em; /* 16px * 1.5 = 24px */
padding: 1em; /* 24px * 1 = 24px (자신의 font-size 기준) */
}중요한 점은 em이 중첩될 때 계산이 복잡해질 수 있다는 것입니다:
.grand-parent {
font-size: 16px;
}
.parent {
font-size: 1.5em; /* 16px * 1.5 = 24px */
}
.child {
font-size: 1.5em; /* 24px * 1.5 = 36px */
}장점:
- 부모 요소를 기준으로 비례적인 크기 지정 가능
- 컴포넌트 단위로 확장/축소가 용이함
단점:
- 중첩 구조에서 계산이 복잡해질 수 있음
- 의도치 않은 크기 변화가 발생할 수 있음
적합한 사용 상황:
- 요소 내부의 여백, 마진 등을 현재 글꼴 크기에 비례하게 설정할 때
- 버튼, 카드 등의 독립 컴포넌트 스타일링
rem
rem(root em)은 루트 요소(일반적으로 <html>)의 글꼴 크기를 기준으로 하는 단위입니다. 기본값은 대부분의 브라우저에서 16px입니다.
html {
font-size: 16px; /* 기본값 */
}
.element {
font-size: 1.5rem; /* 16px * 1.5 = 24px */
margin: 1rem; /* 16px * 1 = 16px */
}
.deep-nested {
font-size: 1.5rem; /* 항상 16px * 1.5 = 24px (중첩에 영향받지 않음) */
}장점:
- 중첩 구조에서도 일관된 크기 계산
- 루트 글꼴 크기만 변경하면 전체 사이트 비율 조정 가능
- 접근성 측면에서 우수함
단점:
- 특정 컴포넌트 내에서만 크기를 비례적으로 조정하기 어려움
적합한 사용 상황:
- 글꼴 크기
- 전체 레이아웃의 마진, 패딩
- 접근성이 중요한 사이트
% (퍼센트)
퍼센트는 부모 요소의 해당 속성값을 기준으로 계산됩니다.
.parent {
width: 400px;
}
.child {
width: 50%; /* 부모의 50% = 200px */
padding: 10%; /* 부모 width의 10% = 40px */
}주의할 점은 padding과 margin의 퍼센트 값은 항상 부모 요소의 너비를 기준으로 계산된다는 것입니다.
장점:
- 부모 컨테이너를 기준으로 비례적 레이아웃 구성 가능
- 반응형 디자인에 유용함
단점:
- 부모-자식 관계가 복잡해지면 계산이 어려워짐
- 속성에 따라 기준이 달라질 수 있음
적합한 사용 상황:
- 반응형 레이아웃
- 부모 요소 내에서 비례적 크기가 필요한 경우
vh & vw (Viewport Height & Width)
뷰포트 단위는 브라우저의 보이는 영역(뷰포트)을 기준으로 하는 단위입니다.
1vh= 뷰포트 높이의 1%1vw= 뷰포트 너비의 1%
.hero {
height: 100vh; /* 뷰포트 높이의 100% */
width: 100vw; /* 뷰포트 너비의 100% */
}
.half-width {
width: 50vw; /* 뷰포트 너비의 50% */
}장점:
- 화면 크기에 따라 자동으로 조정됨
- 스크롤 없이 화면에 꽉 차는 디자인에 적합
- 부모 요소의 크기에 상관없이 뷰포트 기준으로 일관된 크기 설정 가능
단점:
- 모바일 기기에서 주소창 등에 의해 뷰포트 크기가 변할 수 있음
- 작은 화면에서 콘텐츠가 잘릴 수 있음
적합한 사용 상황:
- 전체 화면 섹션 (hero 섹션, 랜딩 페이지)
- 화면 크기에 따라 동적으로 조정되어야 하는 요소
vmin & vmax
vmin: 뷰포트의 너비와 높이 중 작은 값의 1%vmax: 뷰포트의 너비와 높이 중 큰 값의 1%
.responsive-element {
font-size: 5vmin; /* 뷰포트 너비/높이 중 작은 쪽의 5% */
width: 50vmax; /* 뷰포트 너비/높이 중 큰 쪽의 50% */
}적합한 사용 상황:
- 세로모드와 가로모드 모두에서 균형 잡힌 크기가 필요한 경우
- 화면 방향에 관계없이 가시성을 유지해야 하는 요소
기타 유용한 단위
ch
1ch는 현재 글꼴의 '0' 문자 너비를 의미합니다. 고정폭 글꼴에서는 모든 문자의 너비가 같지만, 일반 글꼴에서는 대략적인 기준이 됩니다.
.readable-paragraph {
width: 60ch; /* 약 60자 정도가 한 줄에 들어가는 너비 */
}적합한 사용 상황:
- 텍스트 블록의 가독성 최적화
- 한 줄에 적절한 문자 수를 유지해야 하는 경우
ex
1ex는 현재 글꼴의 소문자 'x' 높이를 의미합니다.
.superscript {
position: relative;
top: -1ex;
}적합한 사용 상황:
- 수학적 표기법이나 특수 텍스트 배치
- 현재 글꼴에 비례하는 세밀한 조정이 필요한 경우
실전 전략: 언제 어떤 단위를 사용할까?
글꼴 크기
/* 권장 방식 */
:root {
font-size: 16px; /* 기본 크기 설정 */
}
body {
font-size: 1rem; /* 루트 크기 기준 */
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
/* 반응형 글꼴 크기 */
@media (max-width: 768px) {
:root {
font-size: 14px; /* 작은 화면에서는 기본 크기 줄이기 */
}
}추천 단위: rem (접근성과 일관성을 위해)
레이아웃과 컨테이너
.container {
width: 90%; /* 반응형 너비 */
max-width: 1200px; /* 최대 너비 제한 */
margin: 0 auto; /* 가운데 정렬 */
}
.sidebar {
width: 25%; /* 컨테이너의 25% */
}
.main-content {
width: 75%; /* 컨테이너의 75% */
}추천 단위: % (반응형 레이아웃을 위해), px (최대/최소 크기 제한에)
여백 (Margin, Padding)
.card {
padding: 1.5rem; /* 루트 글꼴 크기 기준 */
}
.button {
padding: 0.5em 1em; /* 버튼 자체의 글꼴 크기 기준 */
margin-right: 1rem; /* 루트 글꼴 크기 기준 */
}추천 단위:
- 컴포넌트 내부 여백:
em(컴포넌트 크기에 비례) - 컴포넌트 간 여백:
rem(일관된 간격)
전체 화면 요소
.hero-section {
height: 100vh;
padding: 2rem;
}
.background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
}추천 단위: vh, vw (뷰포트 기준 크기)
테두리, 그림자, 작은 세부 요소
.button {
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}추천 단위: px (정확한 크기 지정)
반응형 디자인을 위한 단위 조합
현대적인 웹 디자인에서는 여러 단위를 적절히 조합하는 것이 중요합니다.
유동적 타이포그래피
/* 기본 접근 방식 */
h1 {
font-size: 2.5rem;
}
/* 더 유동적인 접근 방식 */
h1 {
font-size: calc(1.5rem + 2vw);
}calc() 함수와 다양한 단위를 조합하면 화면 크기에 따라 부드럽게 조정되는 글꼴 크기를 만들 수 있습니다.
clamp() 함수 활용
CSS clamp() 함수를 사용하면 최소값, 기본값, 최대값을 한 번에 지정할 수 있습니다.
.container {
width: clamp(320px, 80%, 1200px);
/* 최소 320px, 기본적으로 80%, 최대 1200px */
}
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
/* 최소 1.5rem, 기본적으로 뷰포트 너비의 5%, 최대 3rem */
}이 방식은 반응형 디자인을 구현하는 강력한 방법입니다.
단위 선택의 실용 가이드
접근성을 고려한 단위 선택
사용자는 브라우저 설정에서 기본 글꼴 크기를 변경할 수 있습니다. 접근성을 높이려면 이 설정을 존중해야 합니다.
/* 안 좋은 예: 사용자 설정 무시 */
body {
font-size: 16px;
}
/* 좋은 예: 사용자 설정 존중 */
body {
font-size: 1rem;
}시각 장애가 있는 사용자는 종종 기본 글꼴 크기를 20px 이상으로 설정합니다. 픽셀 단위를 사용하면 이 설정이 무시되어 접근성이 저하됩니다.
미디어 쿼리에서의 단위 선택
미디어 쿼리에서 브레이크포인트를 지정할 때는 주로 px이나 em을 사용합니다.
/* 픽셀 기반 (일반적) */
@media (max-width: 768px) {
/* 태블릿 스타일 */
}
/* em 기반 (사용자 글꼴 크기 고려) */
@media (max-width: 48em) { /* 16px * 48 = 768px */
/* 태블릿 스타일 */
}em 기반 미디어 쿼리는 사용자의 기본 글꼴 크기 설정에 따라 브레이크포인트가 조정되는 장점이 있습니다.
격자 시스템과 단위
CSS Grid나 Flexbox로 레이아웃을 구성할 때도 단위 선택이 중요합니다.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}여기서 1fr은 사용 가능한 공간을 균등하게 분배하는 "fraction" 단위입니다. Grid 레이아웃에서 매우 유용한 단위입니다.
단위 변환 및 계산
다양한 단위 간의 관계를 이해하는 것이 중요합니다. 기본적인 변환 방법을 알아봅시다.
일반적인 변환 공식
1rem= 루트 글꼴 크기 (일반적으로 16px)1em= 현재 요소의 글꼴 크기1vh= 뷰포트 높이의 1%1vw= 뷰포트 너비의 1%
calc() 함수로 단위 계산
calc() 함수를 사용하면 다른 단위를 조합하여 계산할 수 있습니다.
.element {
/* 100% 너비에서 2rem 뺀 값 */
width: calc(100% - 2rem);
/* 뷰포트 높이의 절반에 1rem 더한 값 */
height: calc(50vh + 1rem);
/* 복잡한 계산도 가능 */
padding: calc((100vw - 1200px) / 2);
}이 기능은 복잡한 레이아웃을 구현할 때 매우 유용합니다.
맞춤형 속성(CSS 변수)과 단위
CSS 변수를 사용하면 단위 관리가 더욱 효율적이고 일관되게 됩니다.
:root {
--spacing-unit: 0.5rem;
--container-width: 1200px;
--font-size-base: 1rem;
--font-size-heading: 2rem;
}
.container {
max-width: var(--container-width);
padding: calc(var(--spacing-unit) * 2);
}
h1 {
font-size: var(--font-size-heading);
margin-bottom: calc(var(--spacing-unit) * 4);
}이렇게 하면 전체 사이트의 스타일을 중앙에서 쉽게 관리할 수 있습니다.
결론: 상황에 맞는 단위 선택 전략
CSS 단위 선택에는 "항상 옳은" 방법이 없습니다. 프로젝트의 요구사항과 상황에 따라 적절한 단위를 선택해야 합니다. 하지만 몇 가지 일반적인 가이드라인을 제시할 수 있습니다:
- 글꼴 크기:
rem을 기본으로 사용하고, 필요에 따라em이나 반응형 단위 조합 (clamp,calc활용) - 컨테이너와 레이아웃:
%,vh/vw,fr단위로 유동적인 레이아웃 구성 - 컴포넌트 내부 여백:
em으로 컴포넌트 크기에 비례하게 설정 - 컴포넌트 간 간격:
rem으로 일관된 간격 유지 - 세부 요소(테두리, 그림자 등):
px로 정확한 크기 지정 - 최대/최소 크기 제한:
px이나rem으로 한계 설정
결국 좋은 CSS는 다양한 단위를 적절히 조합하여 접근성, 반응성, 일관성, 유지보수성을 모두 고려한 결과입니다.
여러 단위의 특성을 이해하고 각 상황에 맞는 최적의 선택을 할 수 있다면, 당신은 이미 CSS 마스터의 길에 한 걸음 더 다가간 것입니다. 이 가이드가 여러분의 CSS 작업을 더 효율적이고 전문적으로 만드는 데 도움이 되길 바랍니다!
'TypeScript > CSS' 카테고리의 다른 글
| CSS Flexbox vs Grid: 언제 무엇을 사용해야 할까? (0) | 2025.05.17 |
|---|---|
| CSS 초보자가 흔히 저지르는 10가지 실수와 해결책 (0) | 2025.05.16 |
| CSS 선택자 총정리: 원하는 요소를 정확히 타겟팅하는 방법 (0) | 2025.05.14 |
| CSS 애니메이션 마스터하기: 자바스크립트 없이 인터랙티브한 웹 만들기 (0) | 2025.05.13 |
| 반응형 웹 디자인: 모바일부터 데스크톱까지 완벽하게 대응하는 CSS 기법 (1) | 2025.05.12 |