[HTML/CSS] px, em, rem, vw, vh 에 대하여

용어 정리

px ( pixel ) : 픽셀
em ( element ) : 엘리멘트
rem ( root - element ) : 루트 엘리멘트
vw ( Viewport Width ) : 뷰포트 길이
vh ( Viewport Height ) : 뷰포트 높이

절대 길이 단위

px

px 는 고정 값을 쓰는 절대 길이 단위이다.
특정 뷰가 늘어나건 줄어들건에 관계없이 지정한 사이즈를 계속 보여준다

참고로 96px 는 1 인치라고 한다.

상대 길이 단위

em, rem, vw, vh 는 상대 길이 단위이다.

em, rem

em 과 rem 은 폰트에 비례한 크기로 em은 element 의 폰트 사이즈, rem은 root 의 element 사이즈이다.
em, rem 둘다 디폴트 값은 16px 이다.

<div class="root">
  <div class="child">
    <div class="rem-body">rem</div>
    <div class="em-body">em</div>
  </div>
</div>

<style>
  .root {    font-size: 16px;  }
  .child {    font-size: 18px;  }
  .rem-body {    font-size: 1rem;  }
  .em-body {    font-size: 1em;  }
</style>

라고 했을때 rem-body 는 16px, em-body 는 18px 의 크기를 가지게 되는것이다.
하지만 em 의 단점은 폰트 사이즈가 직관적이지 못하다는것에 있다

<div class="layer1">
  <span>1</span>
  <div class="layer2">
    <span>2</span>
    <div class="layer3">
      <span>3</span>
      <div class="layer4">
        <span>4</span>
      </div>
    </div>
  </div>
</div>

<style>
  .layer1 {    font-size: 2em;  }  /* 32px */
  .layer2 {    font-size: 2em;  }  /* 64px */
  .layer3 {    font-size: 2em;  }  /* 128px */
  .layer4 {    font-size: 2em;  }  /* 256px */
</style>

라고 가정했을때 4의 폰트 사이즈는 기본 크기인 16의 16배 값인 256px가 되게 된다.
rem 이였으면 root 값을 따라 똑같이 32px 로 고정되는것에 다른 결과가 나오게 되는것이다.

vh / vw 그리고 %

vh, vw 는 viewPort 에 비례하는 수치이다.

1vh, 1vw 는 각각 viewPort 의 1/100 의 수치를 가지고 있다.

viewPort 는 실제 사용자에게 보여지는 영역을 의미한다.

% 는 현재 포함된 부모요소에 비례한 상대적 크기를 의미한다.

즉 100vh 와 100% 의 차이는 스크롤 아래까지 포함해서 전부를 포함하는 방법은 100vh이고,

100% 는 현재의 부모 요소의 길이에 맞춰서 반환되는 형태이다.