CSS / 동영상을 배경으로 사용하는 방법

동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다.

예제로 사용한 동영상

예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다.

https://pixabay.com/videos/network-loop-energy-technology-12716/

전체 코드와 결과

다음은 간단하게 만든 예제의 전체 코드입니다. 동영상 파일은 videos 폴더에 넣었다고 가정하겠습니다.

결과는 다음과 같습니다.

분석

코드를 하나하나 분석해보겠습니다.

  • video 태그로 동영상을 넣습니다. 자동으로 시작하고, 반복되도록 합니다.
  • 동영상 위에 들어갈 텍스트를 만듭니다.
  • 동영상과 텍스트를 div 태그로 묶습니다.

  • 웹페이지에 여백이 없게 만듭니다.

  • 동영상이 정해진 높이를 벗어나면 보이지 않도록 overflow 속성을 정합니다.
  • 텍스트를 동영상 위에 올릴 수 있도록 position 속성을 설정합니다.

  • 동영상이 좌우로 꽈 차게 나오도록 width를 정합니다.

  • 텍스트가 동영상 위로 올라가도록 position 속성을 정합니다.

  • 텍스트가 세로 가운데 나오도록 의 위치를 조정하고, 모양을 정합니다.

CSS 강좌