CSS - CSS의 단위

CSS의 단위

CSS에서 사용하는 대표적인 크기 단위는 px, %, em이다. (px은 절대값 %, em는 상대값)
대부분 브라우저의 폰트 사이즈 기본값은 16px, 100%, 1em이다.

절대적인 단위로, 모니터의 해상도에 따라서 다른 크기를 가진다.
해상도가 높다면 작게 보이고, 낮다면 크게 보인다.

상대적인 단위로, %(백분율) 단위는 부모 요소를 기준으로 비율을 표현된다.

body {
  font-size: 14px;
}
div {
  font-size: 120%; /* 14px * 1.2 = 16.8px */
}

상대적인 단위로, 부모요소의 폰트 사이즈에 대한 상대값을 나타낸다.
부모요소의 폰트 크기가 정해져 있지 않다면 1em = 16px이다.

html {
  font-size: 20px;
}

body {
  font-size: 18px;
}

div {
  font-size: 1.2rem; /* 18px * 1.2 = 21.6px */
}

상대적인 단위로, em과 비슷하지만 부모요소가 아닌 root요소(html)의 font-size에 비례한다.

html {
  font-size: 20px;
}

body {
  font-size: 18px;
}

div {
  font-size: 1.2rem; /* 20px * 1.2 = 24px */
}

ex) width: 100vw 하면 너비가 꽉차고 width: 100vw하면 vieport 너비의 반이 된다.