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

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

예제로 사용한 동영상

예제에서 사용한 동영상은 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 / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

개요 들여쓰기와 내어쓰기는 text-indent 속성으로 만든다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 된다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 준다. 문법 text-indent: length | initial | inherit length : px, em, rem 등으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 문단은 들여쓰기를 한 것이다. 두 번째 문단은 내어쓰기를 한 것이다. 내어쓰기한 부분이 영역을 ...

CSS / Grid / grid-template-columns, grid-template-rows

CSS / Grid / grid-template-columns, grid-template-rows

grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들이 않습니다. 속성값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 100px 50% auto라면 3열이 만들어지고, 1열의 너비는 100px, 2열의 너비는 50%, 3열의 너비는 남은 공간 전부가 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Grid / 실전 예제

CSS / Grid / 실전 예제

높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다. break-all : 글자 기준으로 줄바꿈한다. keep-all : 단어 ...

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정한다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈한다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...