CSS단위

실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-1.html

절대단위

• px
  ( 1px = 1/96th of 1 inch )
• pt
  ( 1pt - 1/72 of 1 inch )

상대단위

• %

부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.

• em

font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.

• rem

root의 font-size를 기준으로 값을 환산합니다.

• vw

viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

div{
    font-size:16px;
  }
  .px{
    font-size:16px;
  }
  .pt{
    font-size:12pt;
  }
  .percent{
    font-size:120%;
  }
  .em{
    font-size:3em;
  }

<p class="px">단위 16px</p>
  <p class="pt">단위 12pt</p>
  <p class="percent">단위 120%</p>
  <p class="em">단위 3em</p>

이렇게 각각의 단위를 입력하여 출력하면

이런 값이 나오는데 이 때 검사를 눌러 개발자도구를 확인해주면

각 글자의 절대값을 확인할수 있게 된다.