Skip to content

CSS 단위 정리

CSS에서 주로 사용하는 단위에 대한 내용은 MDN Web Docs의 CSS values and units와 W3Schools의 CSS Units에 자세히 정리되어 있다.

절대 단위

다른 값의 영항을 받지 않는 절대적인 단위들

  • px
    • 1px = 1/96th of 1in
  • pt
    • 1pt = 1/72nd of 1in
  • pc
    • 1pc = 1/6th of 1in

상대 단위

화면 사이즈에 따라 반응형 웹을 만들때 쓰기 좋은 단위들

  • %
    • 부모 태그의 크기 기준으로 % 계산
  • vw
    • viewport 넓이의 1%
  • vh
    • viewport 높이의 1%
  • em
    • 해당 태그의 폰트 크기 기준 비례값1
    • 해당 태그에 font-size 속성이 없을 경우 상속 받은 폰트 크기 기준
  • rem
    • <html> 태그2의 폰트 크기 기준 비례값3
HTML root 태그 폰트 크기 설정법 
html {
  font-size: 16px;
}

Tip

em을 사용해서 스타일된 태그의 경우 유지보수가 힘들어지는 경향이 있기 때문에 rem을 사용하는 것이 추천됨

  1. 현재 태그의 font-size가 12px일 때, 2em == 12px * 2 == 24px ↩

  2. HTML root 태그 ↩

  3. 현재 태그의 font-size가 12px이고 html 태그가 16px이면, 2rem == 16px * 2 == 32px ↩