CSS 입문 | CSS 박스 모델 | 크기 단위(units)

CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다.

그 중에서도 가장 많이 쓰이는 크기 단위는 다음과 같다.

  1. 백분율 단위(%)
  2. 배수 단위(em)
  3. 픽셀 단위(px)

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다.
배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.

<style>
    #large { font-size: 200%; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>

NOTE
1배 = 1em = 100%를 의미합니다.