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

CSS
Created 2020-03-05 Last Modified 2021-12-22

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

예제로 사용한 동영상

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

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

전체 코드와 결과

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

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body { padding: 0px; margin: 0px; }
      .jb-box { width: 100%; height: 500px; overflow: hidden;margin: 0px auto; position: relative; }
      video { width: 100%; }
      .jb-text { position: absolute; top: 50%; width: 100%; }
      .jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <video muted autoplay loop>
        <source src="videos/Network.mp4" type="video/mp4">
        <strong>Your browser does not support the video tag.</strong>
      </video>
      <div class="jb-text">
        <p>Lorem Ipsum Dolor</p>
      </div>
    </div>
  </body>
</html>

결과는 다음과 같습니다.

분석

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

<div class="jb-box">
  <video muted autoplay loop>
    <source src="videos/Network.mp4" type="video/mp4">
    <strong>Your browser does not support the video tag.</strong>
  </video>
  <div class="jb-text">
    <p>Lorem Ipsum Dolor</p>
  </div>
</div>

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

body { padding: 0px; margin: 0px; }

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

.jb-box { width: 100%; height: 500px; overflow: hidden;margin: 0px auto; position: relative; }

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

video { width: 100%; }

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

.jb-text { position: absolute; top: 50%; width: 100%; }

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

.jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }

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

CSS

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / line-height / 줄 높이 정하는 속성

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...

CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기

content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 자동 증가하는 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset, counter-increment, counter이다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정한다. 그리고 counter로 일련 번호를 붙인다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / border-width / 테두리 두께 정하는 속성

개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 테두리의 두께를 xx로 만든다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / z-index / 요소의 수직 위치 정하는 속성

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...