원본: CSS 크기 단위 설명
CSS에는 속성의 다양한 크기를 나타내는 몇 가지 단위가 있습니다.
여러가지 CSS의 단위를 알면 어떤 화면에서도 멋지게 보이고 관리하기도 쉬운 스타일을 연출할 수 있습니다.
Table of Contents
CSS 크기 단위 란?
CSS의 단위는 요소 또는 해당 콘텐츠의 크기를 결정합니다. 예를 들어, 단락의 margin 속성을 설정하려면 특정 크기를 지정해야 하는데 이 값에는 CSS 단위도 포함됩니다.
다음의 예제를 살펴보겠습니다:
p {
margin: 20px;
}위의 경우 margin의 속성은 20px 입니다. 여기서 px(픽셀)가 CSS의 단위입니다.
요소의 속성에 px와 같은 단위를 흔히 쓰지만, 좀 더 생각해봐야 하는 부분은 “여기에 사용하기 가장 좋은 단위는 무엇인가?” 입니다.
이 질문에 답하기 위해, 단위의 타입을 선택할 때 고려해야 할 몇 가지 사항을 알아보겠습니다:
절대 단위 vs 상대 단위
사용할 단위에 대해 “절대 단위(absolute unit)”를 쓸 것인지 “상대 단위(relative unit)”를 쓸 것인지 판단하는 것이 중요합니다.
CSS 크기 단위: Absolute unit
절대 값을 가지는 단위는 상위 요소나 창의 크기와 관계없이 동일한 크기를 가집니다. 즉, 절대 단위를 가지는 속성은 사용자가 보기에 핸드폰이든 모니터에서든 동일한 크기로 보인다는 것 입니다.
반응형 웹을 적용할 필요가 없는 프로젝트에서는 절대 단위가 유용합니다. 예를 들어, 크기를 조정할 수 없는 PC 앱은 창 크기가 바뀌지 않으므로 콘텐츠의 크기도 바꿀 필요가 없어 기본 크기에 맞게 스타일을 지정할 수 있습니다.
노트: 절대 단위는 화면 크기에 따라 크기가 변경되지 않기 때문에 반응형 사이트에 적합하지 않을 수도 있습니다.
| Absolute Unit | Description | Example |
|---|---|---|
| px | 1 인치의 1/96 (96px = 1 inch) | font-size: 12px; |
| pt | 1 인치의 1/72 (72pt = 1 inch) | font-size: 12pt; |
| pc | 12pt = 1pc | font-size: 1.2pc; |
| cm | 센티미터 | font-size: 0.6cm; |
| mm | 밀리미터 (10 mm = 1 cm) | font-size: 4mm; |
| in | 인치 | font-size: 0.2in; |
px(픽셀)은 디스플레이 화면에서 가장 널리 사용되는 절대 단위 입니다. 센티미터나 밀리미터, 인치는 인쇄에 더 일반적으로 쓰입니다.
CSS 크기 단위: Relative unit
상대 단위는 상위 요소 또는 창의 크기에 따라 크기가 조정되기 때문에 반응형 사이트의 스타일 지정에 유용합니다.
일반적으로 반응형 사이트에서는 상대 크기를 기본으로 사용합니다. 이렇게 하면 다양한 화면 크기에 맞춰 일일이 스타일을 업데이트 하지 않아도 됩니다.
이는 어떤 단위를 사용할지 고를 때 절대 단위를 고르는 것 보다 조금 더 어려울 수 있으므로 옵션을 자세히 살펴보겠습니다.
| Relative Unit | Description |
|---|---|
| % | 부모 요소의 속성 값에 대한 상대적 퍼센테이지 |
| em | 요소의 현재 font-size에 대한 상대 값 |
| rem | <html> 요소 같은 루트의 font-size에 대한 상대 값 (rem = root em) |
| ch | 문자의 갯수에 따른 길이 |
| vh | viewport height에 대한 상대 값 (1vh = viewport height의 1%) |
| vw | viewport width에 대한 상대 값 (1vh = viewport width의 1%) |
| vmin | viewport의 작은 치수 값의 1% (핸드폰 세로모드의 경우 width가 height 보다 작으므로 이 경우 width로 계산) |
| vmax | viewport의 큰 치수 값의 1% |
| ex | 현재 폰트의 소문자 x 높이 기준 |
상황에 따라 적절한 옵션을 명확하게 선택하기는 힘듭니다. 예를 들어, %는 일반적으로 폰트 크기 보다 width 같은 레이아웃 관련 속성에 더 적합합니다.
다음은 각각의 상대 단위를 사용하는 예제입니다.
%:
자식 요소가 부모 요소에 꽉 채워지지 않도록 width의 10% margin을 설정합니다. 이 때 부모의 크기가 변경되면 margin도 업데이트 됩니다.
.child {
margin: 10%;
}
em:
자식 요소의 폰트 크기 가 부모 폰트 크기의 절반이 되게 하려면 다음과 같이 작성합니다. 이는 섹션 제목 밑의 단락에 사용할 수 있습니다.
.child {
font-size: 0.5em;
}rem:
루트 요소의 font-size의 두 배로 설정합니다. 이는 부모 컨테이너와 상관없이 모두 같은 크기를 가지므로 헤더 크기를 조정할 때 사용할 수 있습니다.
.header {
font-size: 2rem;
}ch:
다음은 고정 간격 폰트를 10 자만 넣을 수 있는 공간을 설정합니다.
.small-text {
width: 10ch;
}vh:
랜딩 페이지는 높이를 항상 viewport와 같게 하려면 다음과 같이 작성합니다.
.wrapper {
height: 100vh;
}vw:
문자열 섹션을 viewport 너비의 반이 되도록 하려면 다음과 같이 작성합니다.
.half-size {
width: 50vw;
}vmin:
viewport의 가로 세로 중 더 작은 치수 크기에 이미지를 맞추고자 할 때 다음과 같이 합니다.
.min-width {
width: 100vmin;
}vmax:
패턴 이미지를 배경으로 사용하는 경우 처럼 이미지가 잘려도 상관 없을 때 사용합니다.
.max-width {
width: 100vmax;
}ex:
이는 주로 폰트 높이의 중간 지점을 나타내는 척도로 사용할 수 있습니다. line-height를 글자 x 높이의 두배로 하고 싶다면 다음과 같이 작성할 수 있습니다.
.double-x {
line-height: 2ex;
}정리
일반적으로 CSS의 크기 단위를 선택하는 방법은 다음의 질문으로 귀결됩니다.
- viewport 크기가 변경될 때 지정된 항목의 크기도 변경하고 싶은가?
- 크기를 조정하려면 무엇을 기준으로 하는가?
위의 질문에 답을 내리다 보면 어떤 단위를 사용해야 할지 결정하기가 훨씬 쉬워집니다.