풀 스크린 배경 이미지는 화면 크기에 따라 커지거나 작아지기 때문에 화질이 뛰어난 이미지를 사용해야 한다 하지만 고화질의 배경이미지는 파일 용량이 커서 사이트가 느려지거나 이미지를 불러오는데 시간이 걸릴 수 있기 때문에 반드시 파일 용량을 줄이는 작업을 한 후에 풀 스크린 배경으로 적용해야 한다
CSS3를 사용해 풀 스크린 배경 만들기
웹 문서에서 이미지로 풀 스크린 배경을 만드는 가장 간단한 방법은 CSS3에 새로 추가된 background-size 속성을 사용하는 것이다
이 속성을 사용하면 배경 이미지의 크기를 다양하게 조절할 수 있다. 그 중에서 cover 값으로 배경 이미지의 너비를 브라우저 화면 가득하게 표시할 수 있다
이 CSS 속성은 <body> 태그보다는 <html> 태그에서 사용했을 때 브라우저 화면 높이에 맞게 배경이미지를 표시할 수 있다.
Ex.
jQuery 플러그인을 사용해 풀 스크린 배경 만들기
CSS 속성을 일일히 나열하기 어렵고 여러 브라우저를 고려하는게 번거롭다면 자바스크립트를 사용하는 방법도 있다.
특히 스마트폰이나 태블릿 등 다양한 화면 크기를 다 만족시켜야 한다면 자바스크립트가 더 편리할 것이다
대부분 jQuery 플러그인 형태로 제공하므로 소스 파일 문서 안에 포함한 후 몇 가지 메서드만 사용하면 된다
여기서는 Backstretch.js 플러그인과 슬라이드 쇼를 만들 때 유용한 Vegas 플러그인을 사용해 연습해보자
이미지로 풀 스크린 배경을 만들 때 사용하는 jQuery 플러그인 중 하나가 Backstretch.js 이다 사용방법이 편리해서 다른 플러그인에 비해 많이 쓰이고 있다
다운로드한 backstretch.min.js 파일을 웹 문서에 포함한 후 $.backstretch() 메서드를 사용하는데, 괄호 안에 배경 이미지 파일을 지정하면 된다
$.backstretch("이미지 파일");
Ex.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>모던 웹 디자인</title>
<link href="css/bs.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>Startup Company</h1>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$(function(){
$.backstretch("images/office-1.jpg");
});
</script>
</body>
</html>
위의 예제에서 배경 이미지 파일을 지정한 위치에 다음과 같은 형식으로 여러 개의 배경 이미지 파일과 전환 시간을 지정하면 풀 스크린 배경 이미지를 슬라이드 쇼로 보여줄 수 있다
이미지 파일은 대괄호 [] 안에 쉼표 , 로 구분해 나열해주고 화면에 표시되는 시간은 duration 속성으로, 페이드 효과 시간은 fade 속성으로 지정한다
$.backstretch(["이미지 파일1, 이미지 파일2",],{duration: 시간, fade: 시간});
Ex.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Startup Company</title>
<link href="css/bs.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>Startup Company</h1>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$(function(){
$.backstretch([
"images/office-1.jpg", "images/office-2.jpg", "images/office-3.jpg"
], {duration:3500, fade:750});
});
</script>
</body>
</html>
Vegas 플러그인을 사용해 슬라이드 쇼 효과 추가하기
Backstretch.js와 함께 많이 사용하는 또 다른 jQuery 플러그인은 Vegas 플러그인이다
이 플러그인을 사용하려면 소스인 js 파일과 css 파일이 필요하다
Vegas 플러그인에서 필요한 스타일 시트 파일을 추가하려면 10\css 폴더에 vegas.min.css 파일이 포함되어 있을때 다음 코드를 </head> 태그 앞에 추가해야 한다
<link href="css/vg.css" rel="stylesheet" >
<link href="css/vegas.min.css" rel="stylesheet">
</head>
다음으로 jquery.js 파일과 vegas.js 을 포함하는 코드를 </body> 앞에 추가해야 한다
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/vegas.min.js"></script>
</body>
Vegas 플러그인에서는 slides 배열을 사용해 풀 스크린 배경 이미지를 슬라이드 쇼로 표시한다
아래 기본 형식에서 풀 스크린 배경을 표시할 수 있는 괄호 안에 쓸 수 있는 대상은 문서 전체뿐만 아니라 웹 문서 안의 어떤 요소도 될 수 있다.
$(대상).vegas({
slides:[{src:'파일'},{src:'파일'}....{src:'파일'}]
});
Ex.
Fullscreen Background Image
Veagas.js 플러그인을 이용한
풀스크린 배경 이미지.
$(function(){
$('body').vegas({
slides:[
{src:'images/nature-1.jpg'},
{src:'images/nature-2.jpg'},
{src:'images/nature-3.jpg'}
]
})
})
동영상이 포함된 배경 슬라이드 쇼
vegas 플러그인에서는 이미지뿐만 아니라 동영상을 포함하여 배경 슬라이드 쇼를 만들 수 있다.
슬라이드 쇼를 만들기 위한 slides 배열 안에 video 요소를 넣으면 되는데, video 요소에서는 src와 loop, mute 옵션을 사용한다
모던 브라우저 구식 버전까지 고려한다면 MP4와 WebM, Ogv 형식의 동영상 파일도 준비해야 한다
예를 들어 풀 스크린 배경으로 swans.mp4 동영상을 넣고 싶다면 다음 코드를 사용한다
Ex.
Fullscreen Background Image
Veagas.js 플러그인을 이용한
풀스크린 배경 이미지.
$(function(){
$('body').vegas({
slides:[
{src:'images/swans.jpg',
video:{
src: ['videos/swans.mp4'],
loop:true,
mute:true
}
}
]
});
});
이미지와 동영상을 섞어서 풀 스크린 배경 슬라이드 쇼로 만들려면 다음 코드를 사용한다
Ex.
Fullscreen Background Image
Veagas.js 플러그인을 이용한
풀스크린 배경 이미지.
$(function(){
$('body').vegas({
slides:[
{src:'images/nature-1.jpg'},
{src:'images/nature-2.jpg'},
{src:'images/nature-3.jpg'},
{src:'images/swans.jpg',
video:{
src: ['videos/swans.mp4'],
loop:false,
mute:true
}
}
],
delay:3500
});
});
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-1 캐러셀이란? (0) | 2026.02.25 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-2 풀 스크린 배경 동영상 직접 만들기 (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-3 플렉스 박스 사용하기 (0) | 2026.02.24 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.24 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.23 |