html 자동완성으로 video 태그를 넣기 [배경 자동재생/object-fit] (3)
html 자동완성으로 video 태그를 넣기 [배경 자동재생/object-fit] (3) — #htmlvideo #video태그자동재생 #objectfit 웹사이트 디자인 소개 및 학습목표 **글읽기 전에 잠깐!** **정...
#MASK#Naver Blog
#htmlvideo #video태그자동재생 #objectfit
웹사이트 디자인 소개 및 학습목표
**\\글읽기 전에 잠깐!\*\***
**\*\***정보처리기사 필기** 준비중이라면?\*\***
MASK이미지 모션을 활용하여 회사 소개 페이지 만들기
mask모션을 활용하여 웹사이트를 제작해봅니다. 본글은 패스트 캠퍼스 "최성일"강사님의 강의를 요약한 내용입니다.
이전글을 차례대로 보고 오셔야 이해가 빠릅니다
사용하는 언어
HTML
<video> 태그 넣기
- main>section>article\*4>video{src="", autoplay,loop, muted}
- 영상이 자동 재생이 안될 경우 muted속성을 추가해주자
CSS
- video태그 관련 속성들
- .on시 속성 변경
HTML
video
각 article에(총4개) video를 넣어주자. html 자동완성기능을 이용하면 정말 편리하다
| <main> <section> <article>\*4 <video src="src/vid1.mp4" loop="loop" muted="muted" autoplay="autoplay"></video> </article> </section></main> | video 자동완성구문main>section>article\*4>video\[src=src/vid$.mp4 loop autoplay muted\]video 자동재생이 안될경우속성에 autoplay loop muted 세개의 속성이 하나라도 빠져있는지 확인하자 |
|---|
영상이 뒤죽박죽이다. 속성을 하나의 영상만 화면에 맞게 배열하자.
CSS
section 큰틀 속성
| section{ width: 100%; height: 100%; position: absolute; top:0px; left: 0px; } | 큰틀 기본 속성 자주나오니 외워두는게 좋다 |
|---|
article 작은틀 속성
| article{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } | 작은틀 기본속성 z-inde를 1 //제일밑에 깔려있게 |
|---|
video태그 속성
| video{ width: 100%; height: 100%; object-fit: cover; } | video태그에 넓이 값주면 화면에 딱맞게 배열됨object-fit:cover적용시 화면에 꽉차게 나옴 |
|---|
object-fit: cover적용전 (좌) / object-fit: cover적용전 (우)
article.on 속성변경
| <article class="on"> <video ></video> </article> article.on { z-index: 3; } | article.on 속성변경가장 첫 패널에 .on클래스 추가해준다.on시 z-index를 3으로 준다(패널중 가장 최상위) |
|---|
복습
짚어갈 포인트
- html 자동완성
- object-fit:cover;
- article.on{z-index:3;}
이미 예전에 다뤘던 내용이 많아 생략한 부분이 많습니다.. MUSIC PLAYER, SVG UI 보고오면 더 이해가 빠를 것입니다.