CSS - Units(단위)

크기 단위

CSS에서 사용하는 대표적인 크기 단위는 px, em, % 등이 있다. px은 절대값이고, em, %는 상대값이다.

대부분의 브라우저 폰트 사이즈 기본값은 16px, 1em, 100%이다.

px

px은 픽셀(화소) 단위이다. 1px는 화소 1개의 크기를 의미한다. 모니터의 해상도가 1680 * 1050은 가로 1680개의 픽셀, 세로 1050개의 픽셀을 가진다는 의미이다.
px는 요소의 크기나 이미지의 크기 지정에 주로 사용된다.

%

%는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.

 <style>
    body {
      font-size: 14px;
      text-align: center;
    }
    div {
      font-size: 120%; /* 14px * 1.2 = 16.8px */
      font-weight: bold;
      padding: 2em;    /* 16.8px * 2 = 33.6px */
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>

body안에 div가 있다고 하면 font-size는 상속이 되고 그거에 120%인 16.8px가 div 요소의 font-size가 된다.

em

em은 배수 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 1em은 요소에 지정된 사이즈와 같고 2em은 그 두배이다.

rem

em의 기준은 상속의 영향으로 바뀔 수 있다. 즉 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다. rem은 최상위 요소의 사이즈를 기준으로 삼는다.

Viewport 단위

Viewport는 상대적인 단위로 현재 디스플레이에 보여지는 영역을 뜻한다.

vw : viewport 너비의 1/100
vh : viewport 높이의 1/100
vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax : viewport 너비 또는 높이 중 큰 쪽의 1/100