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 / aspect-ratio / 요소의 가로 세로 비율 정하는 속성
개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성이다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있다. 문법 aspect-ratio: auto | number / number | initial | inherit auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정한다. number / number : 가로 대 세로. 세로가 생략된 ...
배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성
개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online
CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...
display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...
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 속성입니다. 예를 들어 ...
체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / list-style-image / 목록의 마커로 이미지 사용하기
개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...
CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...