CSS 단위
- 1. px: px단위는 화소 1개의 크기를 의미한다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않다.
- 2. %: %는 백분율 단위의 상대 단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다.
- 3. em: em은 배수 단위로 상대 단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다. 지정된 사이즈에 em의 값만큼 곱해서 계산한다.
- 4. rem: rem에서 r은 root(최상위)를 뜻한다.
최상위의 태그에서 지정한 사이즈에 rem의 값만큼 곱해서 계산한다.
- 5. vh: vh는 Viewport height의 축약어이며, Viewport는 웹사이트에서 보여지는 영역을 뜻한다. 속성값이 1vh일 경우 뷰포트 넓이의 1%만큼 계산이 된다.
- 6. vw: vw는 Viewport weight의 축약어이다.
속성값이 1vw일 경우 뷰포트 너비의 1%만큼 계산이 된다.
- 7. vmin: 뷰포트 너비 또는 높이를 기준으로 하는 최소 값이다. 뷰포트의 너비, 높이 값 중 작은 값을 기준으로 값이 동적으로 설정된다. 기준값의 1% 값
- 8. vmax: 뷰포트 너비 또는 높이를 기준으로 하는 최대 값이다. 뷰포트의 너비, 높이 값 중 큰 값을 기준으로 값이 동적으로 설정된다. 기준값의 1% 값