Skip to main content

CSS 단위

px​

  • Pixel(Picture + Element)
  • 디바이스 화면 표현하는 가장 작은 단위
  • 고정된 값이 사용하기 쉬움
tip

px 단위만 사용해도 되지 않나????

px만 사용해도 문제는 없다. 다만 각 디바이스의 화면 밀도, 크기, 위치에 따라 화면상 다르게 표현될 수 있다.

%

  • 부모 요소를 기준으로 하는 백분율 단위

vw,vh​

  • 뷰포트(화면) 넓이(w -> weight의 줄임말), 높이(h -> height의 줄임말) 기준으로 백분율 단위
  • 1vw = 화면의 1%

vmin, vmax​

  • 화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율

em​

  • 부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위

rem​

  • root + em을 합친 언어
  • html태그의 글자 크기를 기준으로 하는 배수 단위이며, 기본 폰트 사이즈는 16px이다.