CSS에서 사용되는 단위: 절대 단위와 상대 단위의 이해

CSS에서 사용되는 단위는 절대 단위와 상대 단위로 나뉘며, 각각의 특성과 사용 사례를 이해하면 더욱 효율적인 스타일링이 가능합니다. 이 글에서는 주요 단위를 종류별로 나누어 설명합니다.

---

1. 절대 단위

절대 단위는 물리적으로 고정된 크기로, 화면의 크기나 해상도와 관계없이 일정한 크기를 유지합니다.

단위	설명	1단위 값
cm	센티미터 (centimeters)	1 cm
mm	밀리미터 (millimeters)	1 mm = 1/10 cm
in	인치 (inches)	1 in = 2.54 cm
px	픽셀 (pixels), 화면의 기본 단위	1 px = 디스플레이 장치의 1픽셀
pt	포인트 (points), 인쇄용 단위	1 pt = 1/72 in
pc	파이카 (picas), 인쇄에서 사용	1 pc = 12 pt

예시

h1 {
  font-size: 12pt; /* 12 포인트 */
}

주의: 디스플레이 해상도(DPI)나 사용자 설정에 따라 절대 단위의 실제 크기가 달라질 수 있습니다.

---

2. 상대 단위

상대 단위는 특정 기준값에 따라 크기가 결정됩니다. 반응형 웹 디자인이나 동적 스타일링에 적합합니다.

(1) 폰트 관련 상대 단위

단위	설명	기준 값
em	부모 요소의 font-size 기준	1em = 부모 요소의 font-size 크기
rem	최상위 요소(html)의 font-size 기준	1rem = 루트 요소의 font-size 크기

예시

html {
  font-size: 16px; /* rem의 기준 */
}
p {
  font-size: 2em;  /* 부모 font-size의 2배 */
}

---

(2) 뷰포트 관련 상대 단위

단위	설명	기준 값
vw	뷰포트 너비(Viewport Width)의 1%	1vw = 뷰포트 너비의 1%
vh	뷰포트 높이(Viewport Height)의 1%	1vh = 뷰포트 높이의 1%
vmin	뷰포트 너비와 높이 중 작은 값의 1%	min(vw, vh)의 1%
vmax	뷰포트 너비와 높이 중 큰 값의 1%	max(vw, vh)의 1%

예시

div {
  width: 50vw; /* 뷰포트 너비의 50% */
  height: 50vh; /* 뷰포트 높이의 50% */
}

---

(3) 기타 상대 단위

단위	설명	기준 값
%	부모 요소에 대한 백분율로 크기 지정	부모 요소의 크기
ex	소문자 x의 높이 기준 (폰트 의존적)	폰트마다 다름
ch	숫자 0의 너비 기준 (폰트 의존적)	폰트마다 다름

예시

.container {
  width: 80%; /* 부모의 80% */
}

---

3. 사용자 지정 단위

CSS에서는 계산과 조건부 단위를 사용할 수도 있습니다.

계산 및 조건부 단위

• calc(): 수학 계산을 활용.
• clamp(): 최소값, 기본값, 최대값을 지정.
• 사용자 정의 변수(--var-name).

예시

div {
  width: calc(100% - 50px); /* 부모 너비에서 50px 뺀 값 */
  font-size: clamp(1rem, 2.5vw, 3rem); /* 최소 1rem, 최대 3rem, vw 기준 */
}

---

4. 단위 선택 기준

1. 반응형 디자인: 상대 단위 (%, em, rem, vw, vh) 사용.
2. 고정된 크기: px나 절대 단위 (cm, in) 사용.
3. 폰트 크기: 기본적으로 rem을 권장하며, 특정 상황에서 em 활용.
4. 뷰포트 기반 크기: vw, vh를 사용하여 화면 크기에 적응.

---

CSS 단위는 디자인 요구와 사용자 환경을 고려하여 신중하게 선택해야 합니다. 적절한 단위 선택으로 반응형 웹 개발을 더욱 효율적으로 만들어 보세요!