※ Full Screen Landing Page 구현
1. Full Screen Landing Page 구현 : 이미지 파일 용량 줄이기(최적화)
landing page 구현시 용량은 적은 이미지를 활용한다!
Front-End 웹 Landing Page 구현 시 이미지 파일의 용량이 크면
자칫, 웹사이트 구동에 시간이 걸릴 수 있습니다. 그렇기 때문에,
다음과 같은 이미지 파일 용량을 줄여주는 최적화 웹 사이트를
활용하는 것도 필요합니다.
[이미지 파일 용량 줄여주는 최적화 웹사이트 : TinyPNG
– Compress WebP, PNG and JPEG images intelligently]
https://tinypng.com/
[실습 확인]
test.JPG(약 1.8MB) 파일의 용량을 TinyPNG 활용해서 줄여보시기 바랍니다.
[test.JPG 이미지 파일 최적화 용량 비교]
8bit = 1byte
1Kbyte = 1,000byte
1Mbyte = 1,000Kbyte = 1,000,000byte
1Gbyte = 1,000Mbyte = 1,000,000,000byte
[원본 이미지 크기]
1,782KB = 약 1.8MB
[최적화 이미지 크기]
237KB = 약 0.2MB
2. CSS2/CSS3 활용 FullScreen 배경 구현
1) CSS3 background-size 속성 사용
[예시 : 1) CSS3 FullScreen bg_size_cover.html]
: 배경 이미지의 너비를 브라우저 화면 가득하게 표시하는 cover값 활용함.
참고로, CSS 속성은 body 태그 보다는 html 태그에서 사용했을 때
웹브라우저 화면 높이에 맞게 배경 이미지를 표현할 수 있습니다.
2) 기존 CSS2 활용 FullScreen 배경 구현
[예시 : 2) CSS_FullScreen_img.html]
: CSS3가 아닌 기존의 CSS만으로 FullScreen 배경 구현 시에는
background-size 속성이 아닌 img 태그를 사용하여 이미지를 삽입하고,
div 태그로 텍스트나 다른 요소를 그 위에 올려놓는 방식으로 구현할 수 있음
3. jQuery 플러그인 사용 FullScreen 배경 구현
스마트폰이나 태블릿 등 다양한 화면 크기를 만족시켜주려면 Javascript 활용이 좀 더 편리합니다.
1) Backstretch.js 플러그인 : jQuery 파일(jquery.js 파일 또는 jquery.min.js 파일도 필요함)
https://www.jquery-backstretch.com/
2) backstretch.min.js 파일을 웹 문서 포함 후 $.backstretch() 메서드를 활용함.
$.backstretch("이미지 파일 주소 경로 지정함");
[예시 : 3) jQuery_FullScreen_backstretch_1.html]
3) 배경 이미지 여러개 지정 $.backstretch() 메서드 활용
앞의 예제에서 배경 이미지 파일을 지정한 위치에 여러 개의 배경 이미 지 파일과
전환 시간을 지정하면 FullScreen 배경 이미지를 슬라이드 쇼로 보여줄 수 있습니다.
이미지 파일은 대괄호（［ ］） 안에 쉼표（，）로 구분해 나열해 주고,
화면에 표시되는 시간은 duration 속성 （밀리초 단위）으로,
페이드 효과 시간은 fade 속성（밀리초 단위）으로 지 정합니다.
$.backstretch（［"이미지 파일1, 이미지 파일2"，...］, {duration : 시간，fade : 시간}）;
다음 예시는 화면에 꽉차는 세 개의 배경 이미지를 3.5초마다 자동으로 넘기며 보여줍니다.
[예시 : 4) jQuery_FullScreen_backstretch_2.html]
4) jQuery Vegas 플러그인 활용 슬라이드 쇼 효과 배경 이미지 제작
1) Vegas 플러그인 : jQuery 파일(jquery.js 파일 또는 jquery.min.js 파일도 필요함)
2) 다음과 같이 jQuery 플러그인과 Vegas 플러그인 js, css 파일을 연결해 줍니다.
<link href="css/vg.css" rel="stylesheet">
<link href="css/vegas.min.css" rel="stylesheet">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/vegas.min.js"></script>
5) Vegas 플러그인에서는 slides 배열을 사용해 FullScreen 배경 이미지를 슬라이드 쇼로
표시 합니다. 아래 기본 형식에서 FullScreen 배경을 표시할 수 있는 괄호 안에 쓸 수 있는
대상은 문서 전체뿐만 아니라 웹 문서 안의 어떤 요소도 될 수 있습니다.
$(대상).vegas({
slides: [{ src : '파일'}, {src : '파일'}, … {src : '파일'} ]
});
다음 예시는 문서 전체에 nature-1.jpg, nature-2.jpg, nature-3.jpg 이미지를
배경 슬라이드 쇼로 보여주고，이미지 슬라이드 간의 속도를 3.5초로 지정했습니다.
[예시 : 5) jQuery_FullScreen_vegas_1.html]
6) Vegas 플러그인으로 동영상이 포함된 배경 슬라이드 쇼 구현하기
: Vegas 플러그인에서는 이미지뿐만 아니라 동영상을 포함하여 배경 슬라이드 쇼도
만들수 있습니다. 슬라이드 쇼를 만들기 위한 slides 배열 안에 video 요소를 넣으면 되는데,
video 태그에서는 src, loop, mute 옵션값을 사용합니다.
구형 웹브라우저까지 고려한다면 MP4와 WebM, Ogv 형식의 동영상 파일도 준비해야 합니다.
그리고 동영상 배경을 지원하지 않는 브라우저를 위해 대체 이미지도 준비합니다.
[예시 : 6) jQuery_FullScreen_vegas_2.html]
7) Vegas 플러그인으로 이미지와 동영상이 섞인 FullScreen 배경 슬라이드 쇼 구현
다음 예시는 앞서, "5)"과 "6)"의 Vegas FullScreen 효과를 섞어서 구현합니다.
[예시 : 7) jQuery_FullScreen_vegas_3.html]
[Vegas 플러그인 옵션 참고 웹사이트]
https://vegas.jaysalvat.com/documentation/settings/
8) tubular 플러그인 활용 : 유튜브 동영상으로 FullScreen 배경 구현
[중요 : 웹페이지 실행 확인은 웹서버 또는 라이브 서버로 실행해서 확인해야 합니다]
[예시 : 9) jQuery_FullScreen_tubular_youtube.html]
동영상은 파일 용량도 크고 로딩 속도도 중요하기 때문에 일반 웹 서버보다 유튜브나 비메오 같은
동영상 공유 사이트에 업로드해 놓고 가져와서 사용하는 것이 편리합니다.
배경으로 사용할 동영상이 유튜브에 있을 경우 그 동영상을 풀 스크린 배경으로 사용할 수 있게
해주는 tubular 플러그인을 활용해 보겠습니다.
tubular 플러그인 웹사이트 : https://www.seanmccambridge.com/tubular/
tubular.js 플러그인은 결과 화면을 온라인에서만 확인할수 있기 때문에 반드시 개인 서버나
호스팅 서버 에 플러그인과 HTML 문서를 업로드한 후 확인해야 합니다.
tubular 플러그인은 구글의 프로젝트중 하나로 다음의
https://code.google.com/archive/p/jquery-tubular/에 접속한 후 왼쪽 메뉴에서 [Download]를
클릭하면 압축 파일로 다운로드할 수 있습니다.
① [다음 : tubular.js 플러그인 다운로드 웹사이트]
https://code.google.com/archive/p/jquery-tubular/
② 다운로드한 파일의 압축을 푼후 jquery.tubular.1.0.js 파일을 원하는 폴더에 넣고
다음과 같이 연결해서 활용합니다.
[다음]
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
③ tubular.js 플러그인은 #wrapper라는 요소로 문서 전체를 감싼 후 그 요소에 유튜브 동영상을
배경으로 연결해 줍니다. 따라서 <body> 시작 태그와 </body> 종료 태그의 문서 내용 전체를
감싸는 〈div〉를 추가합니다.
<body>
<div id="wrapper"></div>
④ 동영상 아이디(id) 찾기 및 스크립트 실행하기
이미 유튜브에 올려놓은 동영상이 있다면 그 동영상을 사용하면 됩니다.
만약 준비되지 않았다면 free stock 등으로 검색해서 무료로 사용할 수 있는 동영상으로
연습할 수 있습니다. 참고로, 유튜브 동영상을 사용할 때는 해당 동영상 제작자에게
허락을 받으시기 바랍니다. 또한 유튜브 동영상 중에는 광고가 삽입된 것들이 있는데
이 광고는 삭제할 수 없습니다.
⑤ 배경으로 사용할 유튜브 동영상을 선택했다면 재생 화면의 주소 표시줄을 살펴 보시기 바랍니다.
주소 표시줄에서 watch?v= 다음의 문자열이 이 동영상의 아이디(id)입니다.
아이디(id)를 복사해 두시기 바랍니다.
⑥ 동영상 아이디만 알면 tubular.js를 실행하는 것은 간단합니다. 다음 코드를〈/body〉태그 앞에
삽입합니다.
[다음]
<script>
$("document").ready(function() {
var options = {
videoId : 'spiHw2VYbK4',
mute : true // Chrome 웹브라우저는 mute 음소거가 기본 설정되어 있음
// 웹 실행 후 좌측 상단 "소리 키우기"를 클릭하면 소리가 들리게 됨.
};
$('#wrapper').tubular(options);
});
</script>
⑦ 참고로, 웹 페이지에 유튜브 동영상이 배경으로 나오는지 확인하려면 FileZilla 같은
FTP 프로그램으로 웹 서버에 업로드 해야 합니다. 이때 jquery.js파일과
vjquery.tubular.1.0.jsj 파일이 있는 폴더도 함께 업로드해야 합니다.
⑧ css폴더 안에 있는 tb-result.css 파일에는 웹브라우저 창의 위쪽과 왼쪽에 생기는
여백 마진값과 패딩값을 0으로 초기화해 주며, a태그 CSS 표현도 적용해 줍니다.
[tb.css 파일]
/* 웹브라우저 창의 위쪽과 왼쪽에 생기는 여백 마진값과 패딩값을 0으로 초기화 함 */
* {
margin:0;
padding:0;
}
/* 웹브라우저 좌측 상단에 나타나는 a 태그 메뉴들에 대한 CSS 표현값을 지정해 줌 */
a {
text-decoration:none;
margin:10px 30px;
font-weight: bold;
color:#757bf6;
}
⑨ 유튜브 동영상 실행 옵션 설정
<div id="wrapper">
<!-- 유튜브 동영상에 배경 음악이 포함된 것들이 있지만 tubular.js에서는
기본적으로 동영상의 배경 음악을 음소거 시킵니다(mute:true).
그리고 웹사이트 방문자가 배경 음악을 켜거나 동영상 재생을 조절할 수 있도록
옵션을 화면에 표시할 수 있습니다. #wrapper 요소 안에 다음의 소스 코드를
추가해 줍니다. -->
<a href="#" class="tubular-play">재생</a>
<a href="#" class="tubular-pause">일시정지</a>
<a href="#" class="tubular-volume-up">소리 키우기</a>
<a href="#" class="tubular-volume-down">소리 줄이기</a>
<a href="#" class="tubular-mute">소리 끄기</a></p>
</div>
⑩ tubular.js 플러그인에 사용할 수 있는 옵션과 기본값은 다음과 같습니다.
[다음]
옵션 기본값 설명
ratio 16/9 16/9와 4/3 중에서 선택
videold 동영상마다 다름 재생할 유튜브 동영상 아이디
mute true 음소거
repeat true 동영상 반복
width $(window).width() 동영상 너비
wrapperZIndex 99 동영상 컨트롤러의 z-index
playButtonClass 'tubular-play' 재생 링크
pauseButtonClass 'tubular-pause' 일시정지 링크
muteButtonClass 'tubular-mute' 음소거 링크
volumeUpCIass 'tubular-volume-up' 볼륨업 링크
volumeDownClass 'tubular-volume-down' 볼름다운 링크
increaseVolueBy 10 볼륨업 크기
start 0 동영상 시작 위치
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
tinypng.com
※ html5shiv 파일 활용
인터넷 익스플로러 8 이하 버전에서는 <video>태그를 비롯한
HTML5의 새로운 태그를 인식하지 못합니다.
따라서 배경 동영상 대신 CSS에서 지정한 배경 이미지라도 표시하기 위해
최소한 video태그의 속성을 이해할 수 있어야 합니다.
이를 위해 html5shiv.js 파일을 웹 문서에 링크해서
인터넷 익스플로러 8 이하 버전에서도 HTML5 태그를 인식할 수 있도록 해 줍니다.
html5shiv.js 파일은 github.com/aFarkas/html5shiv/archive/master.zip 를 다운로드한 후에
dist 폴더 안에 있는 html5shiv.js를 원하는 폴더로 옮겨 다음과 같이 사용하면 됩니다.
다음 코드에서〈!--[if lt IE 9]〉는 ‘인터넷 익스플로러 9 이하일 때 그다음 줄을 실행하라’는
의미입니다. 그래서 인터넷 익스플로러 10 이상 또는 다른 브라우저에서는 이 조건을 보고
그냥 건너 띄게 됩니다.
[다음 코드]
<!-[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
예제1) CSS3_FullScreenBG_size_cover
호환성
만약에 인터넷익스플로러9 보다 작은 버전에서는 html5 호환성을 위해 경로(script)로 지정된 html5 활용한다
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->lt = less than (작은)
gt = greater than (큰)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 활용 FullScreen 배경 구현</title>
<!-- 1. CSS3 background-size 속성 사용 -->
<!-- : 배경 이미지의 너비를 부라우저 화면 가득하게 표시하는 cover 값 활용함 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap" rel="stylesheet">
<style>
html{
/* 배경이미지를 반복하지 않고 화면 가운데 배치함 */
background: url(images/mountain_downsizing.jpg ) no-repeat center center fixed;
/* 배경이미지 크기를 대상요소(html, 즉 웹 문서)에 가득 차게 표시함 */
background-size: cover; /*이미지 전체사이즈 화면을 줄였을 때 이미지가 잘리지 않음*/
}
#content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1{
color: white;
font-size: 8em;
font-style: italic;
text-shadow: 6px 2px 3px #222, 8px 8px 3px black;
text-transform: uppercase;
font-family: 'IBM Plex Sans', sans-serif;
}
</style>
</head>
<body>
<div id="content">
<h1>Sky & Birds</h1>
</div>
<!-- 조건부 주석**
만약에 인터넷익스플로러9 보다 작은 버전에서는 html호환성을 위해 (경로)스크립트 소스 html 5를 활용 -->
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</body>
</html>
예제 2) CSS3_FullScreen_img
호환성 주석 달기
html mark up
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 활용 FullScreen 배경 구현</title>
<!-- CSS3 가 아닌 기존의 CSS만으로 FullScreen 배경 구현시에는 -->
<!-- background-size 속성이 아닌 img태그를 사용하여 이미지를 삽입하고,
div 태그로 텍스트나 다른 요소를 그 위에 올려놓는 방식으로 구현할 수 있습니다-->
<style>
@font-face {
font-family: '60sSTRIPE';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/60sSTRIPE.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.bg{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1{
color: white;
font-size: 8em;
font-style: italic;
text-shadow: 2px 2px 3px #222, 2px 2px 3px black;
text-transform: uppercase;
font-family: '60sSTRIPE';
}
</style>
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<img src="images/sky.jpg" alt="배경 이미지" class="bg">
<div id="content">
<h1>SKY & Birds</h1>
</div>
</body>
</html>
예제3) jQuery_FullScreen_backstretch_1
배경만 있음
다운로드 백스트레치 나우 클릭 > 다른이름 저장
demos
using backstrectch as a slideshow 탭 선택
markup > script 경로 잡기
붙여넣기
bs.css 링크 걸어주기
bs.css 파일에 글씨체 넣기
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Backstretch 활용 FullScreen 구현</title>
<link rel="stylesheet" href="css/bs.css">
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>People with Music</h1>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$(function(){
$.backstretch('images/people.jpg');
});
</script>
</body>
</html>예제 4)jQuery_FullScreen_backstretch_2.html
fade 화면 전환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Backstretch 활용 FullScreen 구현</title>
<link rel="stylesheet" href="css/bs.css">
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>People with Music</h1>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$(function(){
$.backstretch([
"images/people.jpg"
, "images/people-2.jpg"
, "images/people-3.jpg"
], { duration: 3000, fade: 750 });
});
</script>
</body>
</html>vegas
예제5) jquery_Fullscreen_vegas_1
set up 들어가기
문서 전체 (body태그)에 플러그인을 적용합니다.
배경이미지 3개로 이루어진 배열 소스를 지정해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Vegas 활용</title>
<link rel="stylesheet" href="css/vegas.min.css">
<link rel="stylesheet" href="css/vg.css">
<!-- 조건부 주석**
만약에 인터넷익스플로러9 보다 작은 버전에서는 html호환성을 위해 (경로)스크립트 소스 html 5를 활용 -->
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>FullScreen Background Image</h1>
<p>
<strong><a href="http://Vegas.jaysalvat.com">
Vegas.js</a></strong>
플러그인을 이용한 <br>풀스크린 배경이미지 구현!
</p>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/vegas.min.js"></script>
<script>
$(function(){
//문서 전체 (body태그)에 플러그인을 적용합니다.
$("body").vegas({
// 배경이미지 3개로 이루어진 배열 소스를 지정해줍니다.
slides: [
{ src: "images/nature-1.jpg" },
{ src: "images/nature-2.jpg" },
{ src: "images/nature-3.jpg" },
],
//슬라이드 간 전환 속도 5300밀리초(3.5초)
delay: 3500,
});
});
</script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
#content{
position: absolute;
left: 10%;
top: 40%;
margin-right: 50px;
padding: 30px 50px;
background: rgba(35, 35, 35, 0.1);
}
h1{
color: white;
font-size: 3em;
font-family: 'Gowun Dodum', sans-serif;
text-shadow: 1px 1px 3px black;
}
p{
padding-top: 20px;
color: white;
font-family: 'Gowun Dodum', sans-serif;
text-shadow: 1px 1px 1px black;
font-size: 1.5em;
font-weight: bold;
line-height: 2em;
}
a, a:visited{
text-decoration: none;
color: white;
}:visited - a태그 클릭한 후 바뀌는 색상 설정
예제 6) vegas 동영상 넣기
사진 안나오게 하고싶으면 초반이미지 주석처리하면됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Vegas 활용</title>
<link rel="stylesheet" href="css/vegas.min.css">
<link rel="stylesheet" href="css/vg.css">
<!-- 조건부 주석**
만약에 인터넷익스플로러9 보다 작은 버전에서는 html호환성을 위해 (경로)스크립트 소스 html 5를 활용 -->
<!--[if lt IE9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>FullScreen Background Image</h1>
<p>
<strong><a href="http://Vegas.jaysalvat.com">
Vegas.js</a></strong>
플러그인을 이용한 <br>풀스크린 배경이미지 구현!
</p>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/vegas.min.js"></script>
<script>
$(function(){
//문서 전체 (body태그)에 플러그인을 적용합니다.
$("body").vegas({
slides: [
// 초반 이미지나타나게함
// { src: "videos/sea.jpg" },
{
//video{} 안에 배경 동영상과 옵션값 지정함
video: {
// src 속성을 사용해 동영상 지정해줌
src:['videos/sea.mp4'],
// loop 속성을 사용해 동영상 반복재생 여부 지정함
loop: true,
// 동영상을 무음상태(음소거 상태)로 만들어줌
mute:true
}
},
],
//슬라이드 간 전환 속도 5300밀리초(3.5초)
delay: 3500,
});
});
</script>
</body>
</html>'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| CAROUSEL (0) | 2023.08.07 |
|---|---|
| 주소 API 연동 (0) | 2023.08.04 |
| [JAVASCRIPT] AJAX _2 (0) | 2023.08.03 |
| [JQUERY] 플러그인 (0) | 2023.08.02 |
| [JAVASCRIPT]DOM (0) | 2023.08.02 |