[html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편

안녕하세요

오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다

 

CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다

 

들어가기에 앞서 사이즈는

width : 100%

height : 100vh 이며

 

레이아웃

<section class="">
	<header class="">
    	<div class="header_logo"></div>
        <div class="header_menu"></div>
    <header>
    <video></video>
    <div class="wrap"></div>
    <div class="info"></div>
    <div class="sns"></div>
</section>

엄청 간단합니다 ㅎㅎ

 

미리보기 화면

동영상 웹 페이지

---

1. 배경에 동영상 넣는 방법 & 화면 꽉 채우는 방법

 

video HTML 코드

<video src="./game.mp4" muted autoplay loop></video>

 

HTML 에 video Tag를 가져와서 src에 경로를 입력해 줍니다

video 태그 안에도 수많은 것들이 있지만 그 중에 사용된 3개를 먼저 설명 드리겠습니다

muted	소리가 있는 동영상은 소리가 안나오게 만들어 준다
autoplay	홈페이지가 로딩 되자마자 동영상 자동 재생
loop	동영상이 끝나면 처음으로 돌아가서 다시 재생

 

경로에 관한 설명

./  = HTML 파일이 있는 현재 위치에서

../ = HTML 파일이 있는 위치에서 상위 폴더

 

간단하게 설명하자면, 동영상 파일과 html 파일이 같은 폴더 안에 있다 !!

하시면 ./ 경로를 사용하시면 되구요

 

동영상 파일이 폴더안에 image 안에 들어가 있고 html 은 다른 폴더에 들어가있다!!

하시면 ../ 경로를 사용해서 찾으시면 됩니다

 

다음에 경로에 관한 설명은 한번 더 자세하게 다루도록 하겠습니다

 

이제 비디오를 넣었으니 화면을 한번 봐주세요

아마... 동영상 파일 가로x세로 사이즈가 크기 때문에 일부분만 보일것입니다

 

그래도 당황하지마시고 아래와 같이 따라해주세요

 

video CSS 코드

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

 

가로 값과 세로 값을 설정해주신 뒤

object-fit:cover 으로 설정해준 사이즈로 화면을 꽉 채워 줍니다

cover 이니까 맞게 덮어라 이렇게 이해하시면 쉬울듯 합니다

 

object-fit : fill 이라는 것도 있는데

오늘은 cover 만 소개해드리도록 하겠습니다

 

---

2. 동영상을 보기 편하고 좋게 만들어보자

 

제 맨 위 레이아웃에 보시면

.wrap 이라는게 보이시는데 저 부분에 저는

linear-gradient 라는 속성을 사용하였습니다

 

이제 동영상이나 이미지들을 보면 너무 쨍해서 하기 어렵다!!

또는, 동영상,이미지에 다른 색상을 주고 싶다 하실때 사용하는 overlay 방식입니다

 

linear-gradient 적용 전

 

linear-gradient 적용 후

 

CSS 코드

.wrap {
    ....
    width : 100%;
    height : 100%;
    background: linear-gradient(to left, rgb(113, 113, 255), rgb(138, 255, 146));
    mix-blend-mode : overlay;
}

저는 초록과 파랑을 활용해서 제작을 해보았습니다

 

---

3. 텍스트를 동영상 & 이미지 위로 올려보자

 

이제 동영상 위로 텍스트를 밀어올릴 차례입니다

 

HTML 코드

<header>
	<h2 class="logo"><i class="fas fa-gamepad"></i> Game</h2>
	<div class="header_menu">
	<li><a href="">Home</a></li>
	<li><a href="">Proudct</a></li>
	<li><a href="">Recommend</a></li>
	<li><a href="">Q&A</a></li>
	<li><a href="">Contact</a></li>
	</div>
</header>

 

여기서 아마 아무리 하셔도 텍스트가 보이지 않으실거예요..

동영상에 텍스트가 가려져 버렸기 때문입니다

 

그럴때 해결할 수 있는 방법!!

header {
    ...
    z-index: 1000;
}

바로 z-index 를 활용하는 것입니다

 

z-index를 활용해서

포토샵의 레이아웃처럼 활용하실 수 있습니다

포토샵의 레이아웃이 위에있는 레이아웃일 수록 맨 위에 있듯이...

 

어떤 것의 div를 더 위로 올릴것인가에 관한 결정을 할 수 있습니다

z-index : 2, z-index : 999, z-index : -9999

 

-로 하시면 우선순위가 뒤로 밀리는 것이구요

그냥 적게 되시면 이제 숫자가 높은게 가장 위로 되는 것입니다

 

위 의 예로는

-9999 < 2 < 999

순으로 div가 배치될 것입니다

 

아마 현재는 그냥 너무 다다닥 붙어있을 것입니다

padding 과 display 속성들을 활용하여 보기 좋게 만들어주세요

저는 요즘 display : flex 를 자주 사용하기 때문에

혹시 궁금하신 분들은 제 글 포스팅 해놓은게 있습니다 참고해주세요

 

2020/08/01 - [웹코딩 공부&공유/css] - 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기

나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기

 

일단 이렇게 1편을 마무리 하고 2편에서 다시 찾아뵙도록 하겠습니다

봐주셔서 감사합니다 !!

 

혹시 모르시는 사항 또는 궁금하신 사항 또는 지적사항 댓글로 꼭 알려주세요

같이 공부하면 너무 좋을것 같습니다 !!

 

모든 이미지, 텍스트는 pixabay 의 사진,동영상을 기준으로 합니다