Lynda.com 웹 HTML 배경 비디오 디자인

• 할 수있다 15, 2024

백그라운드 비디오는 Lynda.com 비디오 교육 과정에서 제품을 마케팅 할 수있는 좋은 방법입니다. 웹 디자인 : HTML 배경 비디오 Chris Converse를 사용하면 웹 페이지에 자동 재생 배경 비디오를 추가하는 방법을 배웁니다. 또한 CSS를 사용하여 배경 비디오 위에 다른 디자인 요소를 배치하는 방법을 배웁니다. 그리고 운동 파일은 표준 멤버십에도 무료입니다.

Converse는 기본 html 파일로 시작하여 디자인 요소 (텍스트 태그 라인, 로고 svg 및 비디오)의 기본 div 컨테이너를 빌드합니다. 비디오 태그에서 자동 재생을 사용하는 방법과 가장 일반적인 두 가지 유형의 비디오 인 .mp4 및 .ogg를 설정하는 방법을 보여줍니다.

다음으로 Converse는 CSS 파일 및 CSS로 이동하여 비디오 및 중앙 로고 이미지의 스타일을 지정하고 배치합니다. 그는 태그 라인 텍스트에 대해서도 동일한 작업을 수행합니다. 특히 테두리 작업을위한 그의 기법이 마음에 들었습니다.

그런 다음 Converse는 중소형 화면 및 CSS에 대한 미디어 쿼리를 사용하여이 레이아웃을 반응 형으로 만드는 방법을 설명합니다. 다시 그는 비디오, 로고 및 태그 라인에 대한 스타일을 설정합니다. 또한 비디오를 재생할 수없고 비디오를 숨길 수없는 작은 화면의 대체 이미지를 설정하는 방법을 보여줍니다.

보다 복잡한 문제로 넘어 가면서 Converse는 JavaScript를 사용하여 터치 이벤트와 같은 모바일 장치의 기능에 대한 디스플레이를보다 복잡하게 제어하는 ​​방법을 보여줍니다. 그는 현재 장치의 기능을 기반으로 JavaScript를 통해 페이지에 추가 할 수있는 CSS 클래스를 생성하는 Modernizr이라는 타사 웹 사이트를 소개합니다. 코드를 생성하고 다운로드하여 웹 페이지 코드에 추가하는 방법을 보여줍니다.

마지막 강의에서 Converse는 비디오가 전체 브라우저 창을 덮도록 레이아웃의 위치와 다른 스타일을 코딩하는 방법을 보여줍니다.

이 과정은 웹 및 모바일 장치의 배경 비디오를 스타일 지정하고 배치하는 데 사용되는 HTML 및 CSS에 관한 것입니다. 그러나 저자가 빠른 다운로드를 위해 비디오 파일을 호스팅하고 최적화하는 옵션에 대해 논의하기를 희망했습니다. 또한 정적 요소 대신 배경 비디오에 대화 형 디자인 요소를 추가하는 방법을 알고 있으면 좋을 것입니다.

Chris Converse는 Rochester Institute of Technology에서 그래픽 디자인 학위를 받았으며 22 년 동안 디자인 및 기술 분야에서 경험을 쌓았습니다.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

공개 : 나는이 기사에 대해 재정적으로 보상을받지 않았다. 의견은 내 경험에 따라 완전히 나 자신입니다.

비디오 지침: How to embed Naver map to website (할 수있다 2024).