[CSS] 단위

px (픽셀)

 

% (상대적 백분율)

 

em

div {
  font-size: 16px; /* 16px === 1em */
}

div {
  font-size: 2em; /* 2em === 32px */
}

해당 요소의 글꼴 크기가 1em 의 기준이 된다.

.parent {
  width: 300px;
  height: 200px;
  background-color: blue;
  font-size: 10px;
}

.child {
  /* parent 에서 상속되어 font-size: 10px 을 가진다. 1em === 10px */
  width: 20em; /* 10 * 20 = 200px */
  height: 50%;
  background-color: orange;
}

상위 요소의 font-size 가 변경되면 1em 의 기준이 바뀔 수 있으므로

em 단위는 잘못 사용하면 혼란스러울 수 있다.

rem

html {
  font-size: 16px; /* 16px === 1rem */
}

div {
  font-size: 2rem; /* 2rem === 32px */
}

루트 요소 (html) 의 글꼴 크기가 1rem 의 기준이 된다.

html {
  /* font-size: 16px; */
}

.parent {
  width: 300px;
  height: 200px;
  background-color: blue;
  font-size: 10px;
}

.child {
  width: 20rem; /* 16 * 20 === 320px */
  height: 50%;
  background-color: orange;
}

기본적으로 브라우저는 따로 명시하지 않은 경우 16px 만큼의 글꼴 크기를 가진다.

 

vw

뷰포트 가로 너비의 백분율

ex) 1vw: 뷰포트 가로 너비의 1% 크기

 

vh

뷰포트 세로 너비의 백분율

ex) 10vh: 뷰포트 세로 너비의 10% 크기