CSS Units
CSS Units: 웹 페이지 스타일링에서 사용하는 단위의 종류와 사용 방법
- *CSS Units(단위)**는 웹 페이지의 요소 크기, 배치, 간격 등을 정의하는 데 사용됩니다. 텍스트 크기나 레이아웃에 따라 적절한 단위를 선택하는 것이 반응형 디자인과 사용자 경험을 최적화하는 데 중요한 역할을 합니다. CSS에서 사용하는 단위는 크게 절대 단위와 상대 단위로 나뉩니다.
1. 절대 단위 (Absolute Units)
절대 단위는 고정된 크기를 나타내며, 화면 크기나 사용자 설정에 영향을 받지 않습니다. 주로 픽셀(px) 단위가 많이 사용되지만, 인치(in), 센티미터(cm) 등의 단위도 사용할 수 있습니다.
주요 절대 단위:
px(픽셀): 화면의 물리적 픽셀을 기준으로 한 단위로, 디지털 디스플레이에서 가장 많이 사용되는 단위입니다.in(인치): 1인치는 2.54cm에 해당하는 단위입니다.cm(센티미터): 물리적 단위로 1cm는 10mm입니다.mm(밀리미터): 1mm는 1cm의 1/10입니다.pt(포인트): 인쇄에서 사용되는 단위로, 1pt는 1/72인치입니다.pc(파이카): 1파이카는 12포인트에 해당합니다.
예시:
/* 절대 단위 예시 */
.container {
width: 300px; /* 300 픽셀의 고정된 너비 */
padding: 1in; /* 1인치 패딩 */
border: 1cm solid black; /* 1센티미터 두께의 테두리 */
}
장점:
- 정확한 크기를 보장합니다.
- 픽셀 기반 디자인에서 일관된 결과를 제공합니다.
단점:
- 반응형 디자인에 적합하지 않으며, 화면 크기나 해상도가 다른 장치에서 가변성이 부족합니다.
2. 상대 단위 (Relative Units)
상대 단위는 기준 요소의 크기나 뷰포트 크기에 따라 달라지는 유연한 크기를 나타냅니다. 상대 단위는 반응형 웹 디자인에서 필수적이며, 다양한 화면 크기에 대응할 수 있습니다.
주요 상대 단위:
%(퍼센트): 부모 요소의 크기를 기준으로 비율을 나타냅니다.em: 현재 요소 또는 부모 요소의 폰트 크기를 기준으로 하는 단위.rem: **루트 요소(html 태그)**의 폰트 크기를 기준으로 하는 단위.vw: 뷰포트 너비의 1%를 나타냅니다.vh: 뷰포트 높이의 1%를 나타냅니다.vmin: 뷰포트 너비와 높이 중 작은 값의 1%를 나타냅니다.vmax: 뷰포트 너비와 높이 중 큰 값의 1%를 나타냅니다.
예시:
/* 상대 단위 예시 */
.container {
width: 50%; /* 부모 요소 너비의 50% */
padding: 2em; /* 부모 요소 폰트 크기의 2배 패딩 */
margin: 5vw; /* 뷰포트 너비의 5%만큼의 마진 */
font-size: 1.5rem; /* 루트 요소 폰트 크기의 1.5배 */
}
장점:
- 반응형 디자인에 적합하여, 다양한 화면 크기와 해상도에서 일관된 레이아웃을 제공합니다.
- 유연한 레이아웃을 가능하게 하여 사용자 환경에 맞춰 적응합니다.
단점:
- 복잡한 계산이 필요할 수 있으며, 요소 계층에 따라 의도치 않은 결과를 초래할 수 있습니다.
3. 픽셀(px)
- *픽셀(px)**은 디지털 디스플레이에서 가장 많이 사용되는 절대 단위로, 각 디스플레이의 물리적 픽셀에 기반합니다. 픽셀은 화면 해상도와 상관없이 고정된 크기를 유지하기 때문에 정밀한 디자인에서 유리합니다.
예시:
.box {
width: 200px;
height: 100px;
padding: 20px;
}
장점:
- 고정된 크기를 제공하며 정밀한 제어가 가능합니다.
- 픽셀 단위는 대부분의 브라우저에서 일관성 있게 표현됩니다.
단점:
- 반응형 디자인에 적합하지 않으며, 사용자 설정(폰트 크기 확대/축소 등)에 영향을 받지 않습니다.
4. 퍼센트(%)
- *퍼센트(%)**는 부모 요소 또는 지정된 기준의 크기에 상대적인 비율을 나타냅니다. 주로 레이아웃이나 크기 조정에 많이 사용되며, 반응형 디자인에서 유연한 레이아웃을 구현하는 데 필수적입니다.
예시:
.container {
width: 80%; /* 부모 요소의 너비 80% */
padding: 10%; /* 부모 요소의 너비 10%만큼 패딩 */
}
장점:
- 부모 요소의 크기에 따라 유동적으로 변화하여 유연한 레이아웃을 제공.
- 반응형 디자인에서 화면 크기에 맞춘 적응형 레이아웃 구현 가능.
단점:
- 요소의 크기가 부모 요소에 종속되기 때문에, 복잡한 레이아웃에서는 예상치 못한 결과를 초래할 수 있습니다.
5. em과 rem
em과 rem은 폰트 크기와 관련된 상대 단위입니다. em은 현재 요소 또는 부모 요소의 폰트 크기를 기준으로 하고, rem은 루트 요소(html 태그)의 폰트 크기를 기준으로 합니다.
5.1 em
em은 부모 요소의 폰트 크기에 상대적으로 크기를 설정하는 단위입니다. 주로 텍스트 크기나 간격을 설정하는 데 사용됩니다.
예시:
/* 부모 폰트 크기가 16px일 때 */
.container {
font-size: 2em; /* 부모 폰트 크기의 2배 = 32px */
padding: 1.5em; /* 부모 폰트 크기의 1.5배 = 24px */
}
5.2 rem
rem은 html 요소의 폰트 크기(기본적으로 16px)를 기준으로 하며, 글로벌한 크기를 설정할 때 유용합니다.
예시:
html {
font-size: 16px; /* 기본 폰트 크기 설정 */
}
.container {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
padding: 2rem; /* 2 * 16px = 32px */
}
장점:
- em: 부모 요소의 크기에 맞춰 상대적인 크기를 제공.
- rem: 전체 사이트에서 일관된 기준 폰트 크기를 설정하고 유지 가능.
단점:
- em은 부모 요소에 따라 크기가 달라질 수 있어, 여러 단계로 중첩된 경우 관리하기 어려울 수 있습니다.
- rem은 전역 폰트 크기가 설정된 경우 유용하지만, 특정 요소마다 다르게 설정된 폰트 크기를 적용하는 데는 다소 제약이 있을 수 있습니다. 그러나 rem은 반응형 웹 디자인에서 일관된 타이포그래피와 레이아웃 관리를 용이하게 만들어 주므로, 폰트 크기를 전체적으로 조정할 때 매우 유용합니다.
em vs rem:
- em: 부모 요소에 대한 상대적 단위. 중첩된 요소들에서는 크기가 계속 증가할 수 있어 의도하지 않은 크기 변화가 발생할 수 있음.
- rem: 루트 요소(html)의 폰트 크기를 기준으로 하므로, 전역적으로 관리하기 쉬움.
6. 뷰포트 단위 (vw, vh, vmin, vmax)
뷰포트 단위는 화면의 뷰포트 크기에 기반하여 요소의 크기를 조정하는 상대 단위입니다. vw, vh 등의 단위는 반응형 웹 디자인에서 화면 크기에 맞게 유연한 레이아웃을 만들 때 자주 사용됩니다.
주요 뷰포트 단위:
vw(viewport width): 뷰포트 너비의 1%에 해당하는 값입니다.vh(viewport height): 뷰포트 높이의 1%에 해당하는 값입니다.vmin: 뷰포트 너비와 뷰포트 높이 중 작은 값의 1%입니다.vmax: 뷰포트 너비와 뷰포트 높이 중 큰 값의 1%입니다.
예시:
.container {
width: 80vw; /* 뷰포트 너비의 80% */
height: 100vh; /* 뷰포트 높이의 100% */
padding: 5vmin; /* 뷰포트 크기 중 작은 값의 5% */
}
장점:
- 뷰포트 크기에 맞춰 요소 크기가 자동으로 조정됩니다.
- 반응형 웹 디자인에서 다양한 장치 크기에 대응할 수 있습니다.
단점:
- vw와 vh는 사용자가 창 크기를 조절할 때 너비와 높이가 동적으로 변하기 때문에, 정밀한 레이아웃에는 사용에 주의가 필요합니다.
7. calc()를 사용한 단위 결합
CSS calc() 함수는 다양한 단위를 수학적으로 결합하여 요소의 크기를 동적으로 설정할 수 있는 기능을 제공합니다. 절대 단위와 상대 단위를 함께 사용하거나, 복잡한 계산이 필요한 경우 유용합니다.
예시:
.container {
width: calc(100% - 50px); /* 부모 요소 너비에서 50px을 뺀 값으로 설정 */
padding: calc(2em + 10px); /* em과 px 단위의 결합 */
}
장점:
- 동적으로 크기를 계산할 수 있어 더 유연한 레이아웃을 만들 수 있습니다.
- 절대 단위와 상대 단위를 함께 사용할 수 있어 정밀한 제어가 가능합니다.
단점:
- 복잡한 계산식을 사용할 경우 유지 관리가 어려워질 수 있습니다.
8. 상대적 길이 단위: ex와 ch
ex와 ch는 폰트 관련 상대적 길이 단위입니다. ex는 현재 폰트의 x-height를 기준으로 하고, ch는 0(zero)의 너비를 기준으로 합니다. 이 단위는 텍스트가 글꼴에 따라 다르게 보일 때 정교한 레이아웃을 만드는 데 사용됩니다.
예시:
.text-box {
width: 30ch; /* 0(zero) 너비를 기준으로 30개의 문자 크기 */
line-height: 1.5ex; /* 현재 폰트의 x-height를 기준으로 줄 높이 설정 */
}
장점:
- 텍스트 기반 레이아웃에서 더 정밀한 제어를 할 수 있습니다.
- 폰트 크기에 따른 가변적인 요소 크기를 쉽게 설정할 수 있습니다.
단점:
- 글꼴마다 다른 x-height와 문자 크기를 가지므로, 다양한 폰트에서 일관된 결과를 보장하기 어렵습니다.
9. Grid와 Flexbox에서 단위 사용
CSS Grid와 Flexbox는 요소의 레이아웃을 설정할 때 다양한 단위를 사용해
유연한 배치를 가능하게 합니다. 특히 fr(fraction) 단위는 Grid Layout에서
비율 기반 레이아웃을 설정할 때 유용합니다.
Grid에서 fr 단위:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 1:2 비율로 두 열 설정 */
grid-gap: 10px;
}
fr단위는 남은 공간을 비율에 따라 자동으로 분배합니다.
Flexbox에서 단위 사용:
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
flex: 1 1 200px; /* 최소 크기는 200px, 남은 공간은 비율에 따라 */
}
- Flexbox에서는 요소의 성장이나 축소를 제어하는 비율 기반 레이아웃을 쉽게 설정할 수 있습니다.
CSS Units는 웹 페이지의 크기와 배치를 결정하는 중요한 요소입니다. 절대 단위와 상대 단위의 올바른 사용은 유연한 반응형 레이아웃을 구현하는 데 필수적입니다. 다양한 단위를 적절히 사용하여 사용자 경험을 최적화하고, 다양한 화면 크기에서 일관성 있는 디자인을 제공할 수 있습니다.
- 절대 단위(px, cm, in): 고정된 크기를 보장하지만, 반응형에는 적합하지 않음.
- 상대 단위(%, em, rem): 유연한 레이아웃과 텍스트 크기 조정에 적합.
- 뷰포트 단위(vw, vh): 화면 크기에 맞춘 반응형 웹 디자인에서 매우 유용.
- calc() 함수: 복잡한 계산식으로 동적 크기 설정이 가능.
이처럼 다양한 CSS 단위를 상황에 맞게 조합하여 효율적인 웹 디자인을 구현할 수 있습니다.