단위에는 절대단위, 상대단위 가 있다.

말그대로 절대값인지 상대값인지에 따라 나뉨

---

절대단위

• px = pixel = 화소 : 화면을 구성하는 가장 기본이 되는 단위
• pt = 인쇄를 위한 단위 (1pt = 1/72inch) => 웹에서는 웬만하면 쓰지말자

---

상대단위

• % : 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다

• em : 스타일 지정요소(당사자)의 font-size 속성 값에 비례하여 값을 결정한다

  font-size : 16px인경우(당사자인 경우)
    
  1em => 16 * 1 = 16px;
  0.8em => 16 * 0.8 = 12.8px
  3em => 16 * 3 = 48px
  

• rem : 최상위 html요소의 font-size속성 값에 비례하여 값을 결정

  font-size : 16px인경우(당사자가 아니라 최상위 엘리먼트가)
    
  1em => 16 * 1 = 16px;
  0.8em => 16 * 0.8 = 12.8px
  3em => 16 * 3 = 48px
  

• vw / vh : viewport의 너비값과 높이값에 비례

  view-port : 1200px * 920px
    
  10vw => 1200 * 0.1 = 120px
  50vh => 920 * 0.5 = 460px
  100vw => 1200 * 1 = 1200px
  

• calc : 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용

  calc(2*100px);
  calc(100%/4);
  calc(50px + 50px);
  calc(100% - 120px);
  

  주의해야할점 : calc 을 사용할때 +,- 를 사용하게 되면 +전후로 공백을 무조건 띄워야 함. -도 마찬가지. *이나 /은 공백이 없어도 괜찮다

이렇게 또 하나 배웠군