[CSS] CSS에서 사용하는 유닛 정리 (px, em, rem, vw, vh, %)

⚠️ 이 포스팅은 드림코딩의 프론트엔드 필수 반응형 CSS 단위 em 과 rem과 프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM)을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

 

---

 

1. 절대적인 유닛 (Absolute length units)

절대적인 유닛은 크기가 항상 일정하다. 절대적인 유닛의 종류로는 cm, mm, in, px 등이 있지만 컴퓨터 화면에서는 px만 유일하게 사용할 수 있다.

1.1 px (pixel)

픽셀은 화면의 점을 세는 단위로 모니터 위에서 나타낼수 있는 가장 작은 단위 값이다. 픽셀의 문제점은 값이 고정이 되어 있다는 것이다. 예를 들어 픽셀을 사용해 폰트사이즈를 지정하면 사용자가 브라우저에서 폰트 사이즈를 커스터마이즈해도 폰트사이즈가 변하지 않는다.

 

2. 상대적인 유닛 (Relative length units)

2.1 em

• 부모의 폰트 사이즈에 상대적으로 크기가 계산이 되어진다

예시

parent 클래스를 가진 엘리먼트가 child 클래스를 가진 엘리먼트의 부모 태그일때 아래의 CSS 코드를 적용해보자.

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

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

• parent가 8em이라는 것은 html의 폰트사이즈 16px에서 8배가 곱해진 값을 폰트사이즈로 가진다는 의미다
• 결론적으로 parent의 폰트사이즈는 128px로 브라우저에 표시 된다
• parent 안에 있는 child는 parent의 폰트사이즈인 128px에 0.5배가 곱해진 값인 64px이 폰트사이즈가 된다

 

2.2 rem

• 루트요소(html)의 폰트 사이즈에 상대적으로 크기가 계산이 되어진다
• 사용자가 따로 html 폰트 사이즈를 따로 지정하지 않는 이상 기본적으로 브라우저에 할당되는 폰트 사이즈 16px이 지정되어진다

예시

parent 클래스를 가진 엘리먼트가 child 클래스를 가진 엘리먼트의 부모 태그일때 아래의 CSS 코드를 적용해보자.

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

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

• root에 지정된 폰트 사이즈가 16px이므로 rem이 적용된 parent, child 요소에 모두 루트 폰트사이즈 16px을 곱한 값이 브라우저에 표시된다
• 결론적으로 parent의 폰트사이즈는 128px로 child의 폰트사이즈는 8px로 브라우저에 표시 된다

 

2.3 vw, vh

브라우저 화면에 표시되는 페이지 전체 영역을 viewport라고 한다. vw, vh는 viewport width, viewport height의 줄임말로 브라우저 너비, 높이에서 몇 %를 사용할 것인지에 대한 단위를 의미한다.

 

2.5 %

부모요소에 상대적으로 크기가 계산되는 단위로 % 대신 em 사용이 가능하다.

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

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