CSS Units

CSS Units

CSS Units

CSS에서 사용할 수 있는 다양한 단위들이다.

  • Absolute Units

    절대 단위는 다른 어떤 것에 상대적이지 않으며 항상 같은 크기로 처리된다. 주로 출력 환경이 정해져 있을 때 유용하다.
    • cm

      1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
    • in

      1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
    • mm

      1cm의 1/10 값을 나타낸다.
    • pc

      1in의 1/16 값을 나타낸다.
    • pt

      1in의 1/72 값을 나타낸다.
    • px

      스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
    • Q

      1cm의 1/40을 나타낸다.
  • Angle Units

    CSS에서 각도 값은 <angel>로 표시된 <dimension>이다.
    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
    • grad

      400grad(그라디안)은 완전한 원을 만든다.
    • rad

      2π(라디안)이 완전한 원을 만든다.
    • turn

      1turn(턴)이 완전한 원을 만든다.
  • Font Units

    CSS에서 글꼴의 크기를 나타내는 상대적 값을 갖는 <length> 유형의 단위이다. 폰트 크기를 나타내는 단위이지만 다른 대상의 크기를 지정할 때도 사용되며 글꼴의 크기와 연관되어 있으므로 글꼴 크기와 유기적인 관계의 다른 대상의 크기를 지정할 때 장점을 가질 수 있다.
    • cap

      대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
    • ch

      글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
    • em

      대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
    • ex

      대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
    • ic

      한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.
    • lh

      요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
    • rem

      html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
    • rlh

      html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
  • Frequency Units

    진동수 단위를 나타내며 <frequency> 자료형 데이터를 표시한다. 
    • Hz

      1초당 발생한 진동수를 나타낸다.
    • kHz

      1000Hz를 나타낸다.
  • Relative Units

    • fr

      그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
    • vb

      html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
    • vh

      뷰포트 높이를 상대적으로 1% 높이를 갖는다.
    • vi

      html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
    • vmax

      vw 또는 vh 중 큰 값을 나타낸다.
    • vmin

      vw 또는 vh 중 작은 값을 나타낸다.
    • vw

      뷰포트 너비를 상대적으로 1% 폭을 갖는다.
  • Resolution Units

    해상도 단위는 <resolution>으로 표시된 치수이다. 모든 <resolution>의 단위는 호환되며 dppx는 표준 단위이다.
    • dpcm

      1cm당 점(dot)의 수를 나타낸다.
    • dpi

      1in당 점(dot)의 수를 나타낸다.
    • dppx

      1픽셀(pixel)당 점(dot)의 수를 나타낸다.
  • Time Units

    시간을 설정하는 값은 <time>으로 표시된 치수(dimensions)이다.
    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
    • s

      초를 나타낸다.