Video 태그로 영상 배경 만들기

오늘은 비디오 소스를 사용하는 태그와 관련 속성들에 대해 공부하였다.

img src태그와 비슷하게 video src 로 시작한다.

img 태그 옆에width나 height가 들어갔던 것처럼 video 태그에도 여러가지 속성들이 있다.

• autoplay : 사용자가 재생 버튼을 누르지 않아도 자동 재생된다.
• loop : 반복 재생
• controls : 컨트롤 바 생성
• muted : 음소거 상태
  (autoplay 속성을 기입하여도 사이트 정책 상 자동재생이 안 될 때가 있다. 그런 경우 muted가 포함되어 있으면 백그라운드 영상으로 인식되어 자동재생이 가능하게끔 설정된 환경들이 있다고 한다.)
• poster : 영상이 재생되기 전까지 나오게 될 이미지. 썸네일 같은거라고 보면 되겠다.(엄밀히 다르지만)

width 값 중에 calc 라는 속성이 있는데 calculate를 생각하면 된다. 말 그대로 계산할 수 있는 태그로, calc() 괄호 안에 숫자를 넣어 다양하게 활용할 수 있다.

이번엔 width:calc(100% - 520px); 이렇게 써봤다. 100%인 크기에서 520px만큼 뺀 너비라는 뜻!

숫자와 수학 기호는 한 번 띄워주어야 한다!

오늘거 너무 어려워... 너무너무... 뭔가 내용은 많았는데 가져온 게 이거밖에 없다ㅠㅠㅠ