[CSS] 단위

정진우·2024년 5월 20일

CSS

목록 보기

14/15

CSS의 단위

절대 단위와 상대 단위는 CSS에서 사용되는 두 가지 주요한 크기 단위입니다.

절대 단위

절대 단위는 특정 크기를 고정적으로 지정하는 단위입니다. 정확히 그 크기로 나타내는 것을 말합니다.

단위	설명
px (픽셀)	화면의 픽셀을 기준으로 하는 단위입니다. 웹 디자인에서 가장 흔히 사용되는 단위로, 고정된 크기를 정의하는 데 사용됩니다. 웹에서는 절대 단위는 px만 사용합니다.
pt (포인트)	1포인트는 1/72인치입니다. 주로 인쇄 매체에서 텍스트 크기를 정의하는 데 사용됩니다.
in (인치)	인치 단위입니다. 1인치는 96픽셀(px)입니다.
cm (센티미터)	센티미터 단위입니다.
vh (뷰포트 높이)	뷰포트의 높이를 기준으로 하는 단위입니다. 1vh는 뷰포트 높이의 1%를 의미합니다.
mm (밀리미터)	밀리미터 단위입니다.

상대 단위

상대 단위는 다른 값이나 부모 요소의 크기에 따라 상대적으로 크기가 결정되는 단위입니다. 웹 디자인에서 더 유연하고 반응적인 레이아웃을 만들 때 주로 사용됩니다.
반응형 웹 디자인에서는 주로 상대 단위를 사용하여 화면 크기에 따라 유동적으로 변화하는 레이아웃을 만들 수 있습니다.

단위	설명
em	현재 요소의 폰트 크기를 기준으로 하는 단위입니다. 예를 들어, 폰트 크기가 16px인 요소에서 `2em`은 32px이 됩니다. 자식 요소는 부모 요소의 폰트 크기를 기준으로 계산됩니다.
rem (루트 em)	최상위(root) 요소의 폰트 크기를 기준으로 하는 단위입니다. 일반적으로 `<html>` 요소의 폰트 크기를 기준으로 합니다. 예를 들어, `<html>`의 폰트 크기가 16px이면, `2rem`은 32px이 됩니다.
% (백분율)	주로 부모 요소의 크기를 기준으로 크기를 지정할 때 사용됩니다. 예를 들어, 자식 요소의 폭을 `50%`로 설정하면, 부모 요소 폭의 절반이 됩니다.
vw (뷰포트 너비)	뷰포트의 너비를 기준으로 하는 단위입니다. 1vw는 뷰포트 너비의 1%를 의미합니다.
vh (뷰포트 높이)	뷰포트의 높이를 기준으로 하는 단위입니다. 1vh는 뷰포트 높이의 1%를 의미합니다.
vmin	뷰포트 너비와 높이 중 더 작은 값을 기준으로 한 1%입니다.
vmax	뷰포트 너비와 높이 중 더 큰 값을 기준으로 한 1%입니다.

em

em 단위는 상대 단위 중 하나로, 현재 요소의 폰트 크기를 기준으로 상대적인 크기를 지정하는 데 사용됩니다. 예를 들어, 폰트 크기가 16px인 요소에서 2em은 32px이 됩니다. 자식 요소는 부모 요소의 폰트 크기를 기준으로 계산됩니다.

<div class="parent">
  Parent
  <div class="child">Child</div>
</div>

.parent {
  font-size: 8em;
}
.child {
  font-size: 0.5em;
}

HTML에서는 기본적으로 폰트 크기를 16px로 설정합니다. CSS 스타일을 별도로 지정하지 않으면 이 값이 기본으로 적용됩니다. 부모 요소에 8em을 설정하면 이는 16px의 8배인 128px이 됩니다. 그리고 자식 요소의 값은 0.5em으로, 이는 부모 요소의 128px의 0.5배인 64px임을 알 수 있습니다.

<div class="level1">
  <div>level1</div>
  <div class="level2">
    <div>level2</div>
    <div class="level3">
      <div>level3</div>
      <div class="level4">
        <div>level4</div>
      </div>
    </div>
  </div>
</div>

.level1 {
  font-size: 2em;
}
.level2 {
  font-size: 2em;
}
.level3 {
  font-size: 2em;
}
.level4 {
  font-size: 2em;
}

크기가 2배씩 커지는걸 확인할 수 있습니다.

주의사항

누적 효과 : 여러 중첩된 요소에 em 단위를 사용하면, 폰트 크기가 의도치 않게 커질 수 있습니다.
유지보수 : 폰트 크기를 조정할 때, 상위 요소의 폰트 크기가 변경되면 하위 요소에 적용된 em 단위도 모두 재계산되어야 합니다.

rem

rem 단위는 root em을 의미하며, 최상위 요소인 <html> 요소의 폰트 크기를 기준으로 상대적인 크기를 지정하는 데 사용됩니다.
루트 기준 : rem 단위는 최상위 <html> 요소의 폰트 크기를 기준으로 합니다. 예를 들어, <html> 요소의 폰트 크기가 16픽셀이면, 1rem은 항상 16픽셀입니다.
상속 없음 : rem 단위는 부모 요소의 폰트 크기에 영향을 받지 않으며, 항상 루트 폰트 크기를 기준으로 계산됩니다.
일관성 : 모든 요소가 동일한 기준을 사용하기 때문에, 요소 간의 크기를 예측하고 조정하기가 용이합니다.

<div class="level1">
  <div>level1</div>
  <div class="level2">
    <div>level2</div>
    <div class="level3">
      <div>level3</div>
      <div class="level4">
        <div>level4</div>
      </div>
    </div>
  </div>
</div>

.level1 {
  font-size: 2rem;
}
.level2 {
  font-size: 2rem;
}
.level3 {
  font-size: 2rem;
}
.level4 {
  font-size: 2rem;
}

rem 단위를 사용하면, 모든 요소가 동일한 루트 폰트 크기를 기준으로 크기가 계산되므로, 크기를 예측하고 유지 관리하기가 더 쉽습니다.
부모 요소의 폰트 크기를 고려할 필요가 없기 때문에, 크기를 계산하고 적용하는 과정이 더 단순해집니다.
루트 폰트 크기를 조정함으로써, 전체 레이아웃의 크기를 쉽게 조정할 수 있습니다. 예를 들어, 미디어 쿼리를 사용하여 작은 화면에서는 루트 폰트 크기를 줄이고, 큰 화면에서는 늘릴 수 있습니다.