[Css] Css 단위
in Development on Css
![[Css] Css 단위](/assets/img/css_logo.png){kind=logo}
- %
- em
- rem
- vh & vw (vertical height & vertical width) / vmin(viewport minimum) & vmax(viewport maximum)
- Reference
%
- 부모 엘리먼트(.parent)크기에 따라 %가 차지
em
- 부모 사이즈를 기준으로 한 단위
- 현재의 사이즈를 정의
- body태그에 em값을 이용해 사이즈를 지정하면 모든 자식 요소들은 body의 사이즈에 영향을 받게 된다.
- 만약 em으로 정의한 사이즈를 각각의 자식에 선언하게 되면 각 부모의 사이즈를 상속받아 점점 더 커지게 된다.
rem
- 최상위 엘리먼트의 폰트 사이즈를 기준으로 한 단위
- rem과 em중 rem이 더 접근성이 편리 -> 최상위 엘리먼트에 상대적 크기가 변경되므로 광범위한 특징을 가지고 있기 때문
vh & vw (vertical height & vertical width) / vmin(viewport minimum) & vmax(viewport maximum)
- 뷰포트를 기준으로 하는 길이 값으로, 문서 또는 모바일 기기에서 볼 수 있는 부분의 크기를 기준으로 크기 설정
- 보여지는 영역을 의미
- vh, vw요소는 높이값과 넓이의 1/100의 단위 -> 1vh = 1%
- vmin & vmax는 뷰포트 너비 또는 높이를 기준으로 하는 최소 또는 최대 값
- ex) 1000 x 500 크기의 뷰포트가 있다고 했을 때 1vmin 값은 5px 이고, 1vmax 값은 10px로 계산
Reference
https://webclub.tistory.com/356
https://velog.io/@milkyway/CSS-단위-비교-vh-vw-em-rem
