ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ja ko ko en en en ko ko ko ko ko ko ko ko ko ko ko en ko ko da ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#23 반응형 영상 배경 만들기 – 웹 코딩 강좌 | 디자인베이스
홈 웹 코딩 #23 반응형 영상 배경 만들기 – 웹 코딩 강좌
오늘은 HTML에서 video 태그를 활용해서 영상을 웹에 넣는 방법을 배워볼게요. 그리고 자연스럽게 간단한 레이아웃을 만드는 연습도 해볼게요. 비디오 태그에 사용 가능한 기능들을 자세히 알아보도록 할게요.
예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
src : 비디오 파일이 있는 경로
controls : 플레이, 정지 등 영상을 컨트롤하는 기능 표시
autoplay 웹페이지가 열릴 때 자동으로 비디오 재생
loop 비디오 반복 재생
poster : 동영상 재생 전에 보여줄 이미지 / 영상이 무거울 때 사용하면 좋겠죠.
source src : .mp4 / .ogg / .webm 동영상 포맷과 불러올 위치 입력
HTML에서 Video 태그는 일반적으로 이런 식으로 사용합니다. 참고로 모바일 브라우저 환경에서 영상을 자동 재생하기 위해서는 muted(음소거) 상태여야 됩니다.
조금 더 상세하게 사용을 하자면 아래처럼 사용 가능합니다.
죄송합니다. 현재 사용중인 브라우저는 임베드한 비디오를 제공하지 않습니다.
#18 CSS 코드로 애니메이션 구현하는 방법 – 웹 코딩 강좌
#9 스케치 60 핵심 업데이트 컴포넌트 패널과 팝오버 살펴보기 – 스케치 강좌
#15 에펙에서 프로토 타이핑을? 플러그인 AEUX – 스케치 강좌
디자이너가 무조건 피해야 할 회사 유형
오너의 마음으로 프로젝트의 A부터 Z까지
투명 비닐 포장 목업
감성충만 빛 그림자 서식류 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.