메가박스 사이트 만들기 강의번호 22 - 마무리 및 Github custom.js (function($){ //배너 이미지 슬라이드 var mySwiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', type: 'bullets', }, autoplay: { delay: 5000, }, }); //영화차트 이미지 슬라이드 var swiper = new Swiper('.swiper-container2', { slidesPerView: 4, spaceBetween: 24, mous..
메가박스 사이트 만들기 강의번호 21 - Youtube API movie.js (function($){ /* 트레일러 영상 플레이어를 활성화 */ /* YouTube iframe API: https://developers.google.com/youtube/player_parameters */ (function handleTrailer() { // 셀렉터 캐시 var $selector = { body: $( "body" ), overlay: $( "#blackout" ), modal: $( "#trailerModal" ), showButton: $( "#showTrailer" ), hideButton: $( "#hideTrailer" ), }; // 플레이어 var player = { obj: null, ..
메가박스 사이트 만들기 강의번호 20 - 탭메뉴/스킵메뉴 style.css /*스킵 메뉴*/ #skip {position: relative;} #skip a{position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px;border: 1px solid #fff; color: #fff; text-align: center; background: #333; } #skip a:active, #skip a:focus{top: 0;} index.html 최신 영화 소식 새로운 이벤트 새로운 영화
메가박스 사이트 만들기 강의번호 19 - 푸터영역 완성! style.css /*푸터영역*/ .footer_sns{position: absolute; right: 17px; top: 33px; z-index: 1;} .footer_sns li{display: inline-block; margin: 0 2px;} .footer_sns li a{display: block; width: 36px; height: 36px;} .footer_sns li.s1{background-position: 0 -375px;} .footer_sns li.s2{background-position: -36px -375px;} .footer_sns li.s3{background-position: -72px -375px;} .foot..
메가박스 사이트 만들기 강의번호 18 - 헬프영역 반응형 style.css /*미디어쿼리*/ @media (max-width: 1290px){ .container{width: 100%;} .header .nav ul li{width: 93px;} .header .nav ul li a{width: 91px; font-size: 15px; padding: 17px 10px; } .header h1 em{padding: 11px 8px 5px 0;} .header h1 strong{top: 19px;} .swiper-button-prev, .swiper-button-next{display: none;} } @media (max-width: 1024px){ #mNav{display: block;} .nav{di..
메가박스 사이트 만들기 강의번호 17 - 고객센터/SVG 완성! style.css /*고객센터*/ .service ul{overflow: hidden;} .service li{float: left; width: 50%; height: 193px; box-sizing: border-box; border: 1px solid #d7d7d7; text-align: center} .service li a{} .service li a span{display: block; width: 120px; height: 120px; margin: 20px auto 0 auto; overflow: hidden} .service li a strong{color: #666; font-size: 18px; font-weight: 5..
메가박스 사이트 만들기 강의번호 16 - 메가박스 할인카드 완성! style.css /*할인카드*/ .card{padding: 17px;} .card ul{} .card ul li{position: relative;border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; min-height: 102px; box-sizing: border-box;} .card ul li span{position: absolute; left: 17px; top: 17px;} .card ul li span img{width: 105px;} .card ul li strong{display: block; font-size: 18px; padding-left: 120px; c..