px em rem

Selector, Property, Values

px, em, rem에 대하여

• absolute length unit
  px : 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위

• relative length units (for responsive Web)
  : 브라우저 환경에서 폰트사이즈를 변경시키면 페이지의 폰트사이즈도 변경됨.
  em : relative to parent element
  rem : relative to root element (r=root)
  기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px이므로 1rem = 16px
  

1. 부모 요소에 따라서 크기가 변경되어야 한다면 %, em
   browser 크기에 따라서 크기가 변경되어야 한다면 v*, rem
2. 요소의 너비와 높이에 따라서 사이즈가 변경되어야 한다면 %, v*
   font 크기에 따라서 사이즈가 변경되어야 한다면 em, rem

전역 CSS 변수 선언하기

나중에 전체에 걸쳐 해당 값을 바꿔야 할 경우 유용하다.

지정
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
사용
element {
  background-color: var(--main-bg-color);
}