[React] Video 높이 맞추기

개인 프로젝트 첫 메인화면에 비디오를 넣으려고 했을 때 문제가 발생 했습니다.

기존 CSS 조작하듯이 width: 100%을 주니까 높이가 맞지 않았습니다.

video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

그래서 React에서 사용하는 단위가 다른게 있나 인터넷 서치 중 찾았습니다.

◯ 문제

CSS는 부모의 너비와 높이 값에 맞게 사용할 수 있습니다.

즉 부모가 기준이 없거나 작으면 그에 맞지 않는다는 겁니다.

◯ 해결

vh 단위를 사용하면 됩니다 그리고 출처에 CSS 단위들 잘 정리 되있으니 참고하면 좋을 것 같습니다. 저도 많은 도움이 됐습니다 감사합니다.

▶ vh : 높이 값의 100분의 1의 단위 입니다. 쉽게 말해 100vh 하면 스크린 맞게 가득 채운다는 뜻 입니다.

출처