HTML/CSS에 비디오 배경 추가

12419 단어 csshtmltutorial
안녕하세요, 크리에이터 여러분.

다음은 웹사이트에 비디오 배경을 추가하는 방법에 대한 간단한 자습서입니다! 반응형으로 만들기 위한 모든 팁과 요령을 배우게 됩니다.

비디오 버전을 보고 싶다면 바로 여기:



1. 코드의 기본 구조.



레스토랑에서 멋진 웹사이트를 만들어달라고 요청했다고 가정해 보겠습니다. 지금은 헤드만 있는 HTML 파일을 만듭니다. 원하는 글꼴을 추가하거나 내가 찾은 글꼴을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video Background</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto&display=swap"
      rel="stylesheet"
    />
  </head>
</html>


지금은 값을 재설정하고 글꼴을 추가할 CSS 파일을 만듭니다.

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Playfair Display, sans-serif;
  background: #f1f1f1;
}


2. HTML에 비디오를 추가하십시오!



이제 태그로 추가할 수 있는 소스를 요청하는 동영상 태그가 있는 본문을 만들어야 하지만 자동 재생(동영상이 자동으로 재생됨)과 같은 일부 속성을 추가해야 합니다. muted(비디오가 있는 경우 사운드를 음소거) 및 루프(비디오를 무한 반복함):

<body>
      <div class="home">
        <video autoplay muted loop>
          <source src="ressources/cooking.mp4" type="video/mp4" />
        </video>
      </div>
  </body>


리소스 폴더에 비디오를 추가해야 합니다.

보시다시피 작동합니다! 다만, 화면의 측면과 하단에 스크롤바가 있고 영상이 너무 밝아서 그 위에 텍스트를 추가하면 글자가 잘 안보이게 됩니다. 그 모든 것을 바꾸자!

3. 일부 텍스트가 포함된 오버레이를 추가합니다.



레스토랑을 보여주기 위해 텍스트가 포함된 오버레이를 비디오 아래에 추가해 보겠습니다.

<div class="overlay"></div>
<div class="home-content">
     <h1>High-End Kitchen.</h1>
     <div class="middle-line"></div>
     <button>DISCOVER</button>
</div>


4. 페이지의 스타일을 지정합시다!



CSS 파일로 이동하여 높이가 100vh인 컨테이너를 만들고(전체 화면을 차지하기 위해) 시작합니다. 일부 요소(이 컨테이너의 자식)는 절대적이기 때문에 상대적인 위치에 배치합니다.

.home {
  height: 100vh;
  position: relative;
}


이제 비디오를 다루겠습니다.

video {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}


이제 뷰포트의 전체 너비와 높이를 사용하므로 페이지의 측면과 하단에 더 이상 스크롤 막대가 없습니다!

이제 오버레이로 비디오를 어둡게 해 보겠습니다.

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.6);
}


보시다시피 다음 중 하나를 사용할 수 있습니다.

width: 100%;
height: 100%;


또는

 top: 0;
 left: 0;
 bottom: 0;
 right: 0;


요소를 화면의 모든 모서리에 고정하기 때문에 똑같은 작업을 수행합니다! 이것은 당신이 알 수 있는 약간의 트릭일 뿐입니다.

이제 제목과 버튼의 크기를 늘리고, 화면 중앙에 정리하고, 제목과 버튼 사이에 세로 구분선을 만들어 콘텐츠의 스타일을 지정해 보겠습니다.

.home-content {
  width: 600px;
  margin: 0 auto;
  position: relative;
  top: 150px;
  color: #fff;
  z-index: 3;
}

.home-content h1 {
  font-family: Playfair Display, serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 85px;
  line-height: 1.1;
}

.middle-line {
  height: 200px;
  width: 2px;
  background: #fff;
  margin: 40px auto;
}

.home-content button {
  display: block;
  font-size: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  margin: 50px auto 0;
  padding: 16px 30px;
  cursor: pointer;
}


이제 멋진 고해상도 비디오 배경이 있는 멋진 웹사이트 방문 페이지가 생겼습니다!

소스 코드here를 확인하세요.

와서 제 유튜브 채널을 보세요:

즐거운 코딩!

엔조.
javascript 변 수 는 배열 로 전 달 된 구 덩이 를 참조 합 니 다.
NSX-T3.2 L2 VPN 허브 & 복사 구성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage