절대적인 단위

px

모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위

[문제점]

컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지되는 문제점

div {
  width: 1000px;
  font-size: 24px;
}

또한, 폰트 사이즈를 px로 쓰게 되면, 사용자가 브라우저에서 폰트 사이즈 설정을 변경해도 이에 반응하지 않는다.

상대적인 단위

em

부모 요소(상위 요소)의 폰트 사이즈에 따라서 크기가 지정되는 단위로,
부모 사이즈에 따라서 자식 요소의 사이즈가 상대적으로 정해진다.
(em = 부모 요소의 폰트 사이즈를 곱한 값)

.parent {font-size : 8em} /* 부모요소 16px * 8 = 128px */
.child {font-size : 0.5rem} /* 자식요소 128px * 0.5 = 64px */

rem

웹에 가장 최상위인 루트 요소의 폰트 사이즈에 따라 크기가 지정되는 단위
(rem = 루트 요소의 폰트 사이즈를 곱한 값)

html {font-size : 16px} /* 기본적으로 브라우저 폰트사이즈는 16px로 설정되어있음 */
h1 {font-size : 3rem} /* 16px * 3 = 48px */
h2 {font-size : 0.5rem} /* 16px * 0.5 = 8px */

html이나 body에 따로 폰트 사이즈를 지정하지 않으면
기본적으로 font-size: 100%로 저징되어있고, 이는 브라우저에서 지정된 폰트 사이즈를 따라간다는 의미이다.

em vs. rem

rem은 루트 요소에 있는 font-size에 영향을 받으므로
컴포넌트가 페이지 어디에 들어가도 유동적으로 변하지 않는다.

em은 부모 요소에 따라 사이즈가 유동적으로 변한다.
컴포넌트가 어디에 사용되는지 부모요소에 따라서 사이즈가 변경이 필요할 때 사용한다.
다만, font-size가 직관적으로 계산되지 않아서 어려움이 생길 수 있다.

%

부모의 사이즈에 대한 퍼센트로 적용된다.
예를 들어, 부모의 width가 300px일때, child의 width 속성을 50%로 주면 최종적으로 150px로 계산된다.
위의 em과 마찬가지로 % 역시 부모의 크기에 영향을 받는 단위이다!

font-size : 100%는,
font-size : 1em과 동일하다.

vw, vh

창 사이즈(뷰포트)에 반응해서 크기가 상대적으로 바뀐다.
vw(=viewport width)는 창 사이즈 중 가로폭의 1%를 크기로 갖는다.
즉, 1vw를 주면 폭이 1000px인 경우 10px로 처리된다.
vh(=viewport height)도 동일하게 창 사이즈 중 높이의 1%를 크기로 갖는다.

.div1 {
  width: 30px; // 절대적 단위 (고정)
}
.div2 {
  width: 3vw; // 상대적 단위, 창 사이즈가 1000px이면 300px
}

---

References

https://www.youtube.com/watch?v=7Z3t1OWOpHo
https://webclub.tistory.com/356