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; }
  • 텍스트가 세로 가운데 나오도록 의 위치를 조정하고, 모양을 정합니다.

Related Posts

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / 반응형 레이아웃 만들기

CSS / 반응형 레이아웃 만들기

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

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 / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성

CSS / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성

animation-duration animation-duration은 애니메이션의 진행 시간을 정하는 속성입니다. 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다. 문법 animation-duration: time | initial | inherit time : 시간을 정합니다. 기본값은 0입니다. 단위는 s(초) 또는 ms(1000분의 1초)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 3초에 걸쳐 박스가 커지는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { from { width: 0px; height: ...

CSS / 애니메이션 / transform / scale – 2D 확대 또는 축소하기

CSS / 애니메이션 / transform / scale – 2D 확대 또는 축소하기

transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면에서의 확대 또는 축소입니다. IE는 버전 10부터 지원합니다. 문법 transform: scale( 2.0 ); 가로와 세로 모두 2배 확대합니다. transform: scale( 2.0, 1.5 ); 가로로 2배, 세로로 1.5배 확대합니다. transform: scaleX( 2.0 ); 가로로 2배 확대합니다. transform: scaleX( 2.0 ) scaleY( 1.5 ); 가로로 2배, 세로로 1.5배 확대합니다. 예제 마우스를 올렸을 때 확대됩니다. 그 ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...

CSS 강좌