1.정의 : 현재 실행중인 스크린 크기에 맞춰 상대적 크기 반환
- vh : viewport height
- vw : view width
> 100vh, 100vw가 전체 화면의 기준이 됨.
> 예를 들어, height 1000px / width 800px 이라고 가정 시,
1vh = 10px / 1vw = 8px 이 됨.
> height: 50vh = 500px / width: 25vw = 200px
2.%와 차이점
- vh와 vw는 열려있는 화면 전체의 상대길이를 의미 = 스크롤바를 포함한 길이 반환
- %는 창이 중심이 아닌, %를 사용하고 있는 요소의 부모 요소의 길이에 맞게 반환
*참고사이트
'CSS' 카테고리의 다른 글
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
|---|---|
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
| (border)에서 두께와 스타일을 별도로 만들고 싶을 때 (0) | 2022.11.19 |