메가박스 사이트 만들기

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

티스토리 뷰

Coding/메가박스 따라 만들기

메가박스 사이트 만들기_05.배너-Swiper.js

르푸 2019. 12. 20. 23:14

메가박스 사이트 만들기 05.배너 - swiper.js

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="chlee">
    <meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
    <meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, chlee, 사이트 만들기, 따라하기">
    <title>메가박스 사이트 코딩하기</title>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/swiper.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="assets/icons/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="96x96" href="assets/icons/favicon_96.png" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/icons/favicon_144.png" />
    <link rel="apple-touch-icon-precomposed" sizes="192x192" href="assets/icons/favicon_192.png" />

    <!-- 페이스북 메타 태그 -->
    <meta property="og:title" content="메가박스 사이트 만들기" />
    <meta property="og:url" content="https://chlee129.tistory.com/category/%EC%BD%94%EB%94%A9/%EB%A9%94%EA%B0%80%EB%B0%95%EC%8A%A4" />
    <meta property="og:image" content="https://tistory4.daumcdn.net/tistory/3344041/skin/images/megabox.jpg" />
    <meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
   
    <!-- 트위터 메타 태그 -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="메가박스 사이트 만들기">
    <meta name="twitter:url" content="https://chlee129.tistory.com/category/%EC%BD%94%EB%94%A9/%EB%A9%94%EA%B0%80%EB%B0%95%EC%8A%A4">
    <meta name="twitter:image" content="https://tistory4.daumcdn.net/tistory/3344041/skin/images/megabox.jpg">
    <meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">

    <!-- 웹폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean" rel="stylesheet">
    
    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
      <script src="assets/js/html5shiv.min.js"></script>
      <script type="text/javascript">
         alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
      </script>
   <![endif]-->
</head>
<body>
   <header id="header">
      <div class="container">
         <div class="row">
            <div class="header clearfix">
               <h1>
                  <a href="#">
                     <em><img src="assets/img/logo.png" alt="MEGABOX"></em>
                     <strong><img src="assets/img/logo-sub.png" alt="LIFE THEATER"></strong>
                  </a>
               </h1>
               <nav id="mNav">
                  <h2 class="ir_so">메가박스 전체메뉴</h2>
                  <a href="#" class="ham"><span></span></a>
               </nav>
               <nav class="nav">
                  <ul class="clearfix">
                     <li><a href="#">영화</a></li>
                     <li><a href="#">큐레이션</a></li>
                     <li><a href="#">영화관</a></li>
                     <li><a href="#">특별관</a></li>
                     <li><a href="#">스토어</a></li>
                     <li><a href="#">이벤트</a></li>
                     <li><a href="#">로그인</a></li>
                  </ul>  
               </nav>
            </div>
         </div>
      </div>
   </header>
   <!-- //header -->

   <section id="banner">
      <h2 class="ir_so">최신 영화 소식</h2>
      <div class="banner_menu">
         <div class="container">
            <div class="row">
               <div class="bm_left">
                  <ul>
                     <li class="total"><a href="#">전체메뉴</a></li>
                     <li class="line"><a href="#">필름 소사이어티</a></li>
                     <li><a href="#">크래식 소사이어티</a></li>
                  </ul>
               </div>
               <div class="bm_right">
                  <ul>
                     <li class="line"><a href="#">고객센터</a></liclass="line">
                     <li class="line"><a href="#">멤버쉽</a></liclass="line">
                     <li><a href="#">VIP</a></li>
                  </ul>
                  <ul>
                     <li class="white"><a href="#">상영시간표</a></li>
                     <li class="purple"><a href="#">빠른예매</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div class="slider">
         <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide ss1">Slide 1</div>
              <div class="swiper-slide ss2">Slide 2</div>
              <div class="swiper-slide ss3">Slide 3</div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
         </div>   
      </div>
   </section>
   <!-- //banner -->
    



   <!-- 자바스크립트 라이브러리 -->
   <script src="assets/js/jquery.min_1.12.4.js"></script>
   <script src="assets/js/modernizr-custom.js"></script>
   <script src="assets/js/ie-checker.js"></script>
   <script src="assets/js/swiper.min.js"></script>
   <script>
      var swiper = new Swiper('.swiper-container',{
         pagination: {
            el: '.swiper-pagination',
         },
         navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
         },
         autoplay: {
            delay: 5000,
         },
      });
  </script>
</body>
</html>

style.css

@charset "utf-8";

/* 레이아웃 */
#mNav {display:none; position: absolute; top: 10px; right: 14px;}
#header {width: 100%; border-bottom: 1px solid #c6c6c6;}
#banner {position: relative;}

/* 가운데 영역 */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,.0);}

/*로우 영역*/
.row {padding: 0 28px;}

/* 모바일 메뉴 */
.ham {display: block; width: 30px; height: 10px;  
    padding: 15px 10px 10px 10px;}
.ham span {display: block; width: 25px; height: 4px; background: #39106a; position: relative;}
.ham span:before {
    content:'';
    width: 25px; height: 4px; background: #39106a;
    position: absolute; left: 0; bottom: -7px;
}
.ham span:after {
    content:'';
    width: 25px; height: 4px; background: #39106a;
    position: absolute; left: 0; top: -7px;
}

/* 헤더 영역 */
.header h1 {float: left;}
.header h1 em {padding: 15px 8px 5px 0; display: inline-block;}
.header h1 em img {width: 155px;}
.header h1 strong {display: block; position: absolute; left: 194px; top: 23px;}
.header h1 strong img {width: 126px;}
.header .nav {float: right;}
.header .nav ul {border-left: 1px solid #c6c6c6;}
.header .nav ul li {float:left; width: 103px; text-align: center; border-right: 1px solid #c6c6c6;}
.header .nav ul li a {
    display: block; padding: 19px 10px; 
    font-size: 17px; font-weight: 700; color: #444;
}

/* 배너 */
.banner_menu {position:absolute; left: 0; top: 20px; width: 100%; height: 100px; overflow:hidden; z-index: 10;}
.banner_menu a {color: #fff; font-size: 16px; transition: all 0.3s;}
.banner_menu a:hover {color: #c1c1c1;}
.banner_menu .bm_left {float: left;}
.banner_menu .bm_left ul {padding-top: 7px;}
.banner_menu .bm_left li {display: inline; margin-right: 30px; position: relative;}
.banner_menu .bm_left li.total {margin-right: 20px;}
.banner_menu .bm_left li.total a {
    font-size: 14px; padding: 3px 10px; display: inline-block;
    border: solid 1px #fff;
    transition: all 0.3s;
}
.banner_menu .bm_left li.total a:hover {background: #fff; border-color: #000; color: #000;}
.banner_menu .bm_right {float: right; overflow: hidden;}
.banner_menu .bm_right ul {float: left;}
.banner_menu .bm_right ul:first-child {padding-top: 7px;}
.banner_menu .bm_right li {
    display: inline; text-align: center; margin-right: 20px; 
    position: relative;
}
.banner_menu .bm_right li.line {margin-right: 30px;}
.banner_menu .bm_right li.white {margin-right: 10px;}
.banner_menu .bm_right li.white a {
    width: 80px; background-color: #fff; color: #3a0e6a; 
    padding: 7px 30px 9px 30px; display: inline-block; border: 1px solid #fff; 
}
.banner_menu .bm_right li.purple {margin-right: 0;}
.banner_menu .bm_right li.purple a {
    width: 80px; background-color: #3a0e6a; color: #fff; 
    padding: 7px 30px 9px 30px; display: inline-block; border: 1px solid #6e40c4; 
}
.banner_menu li.line:after {
    content: '';
    width: 1px; height: 14px; background: #fff;
    position: absolute; right: -8px; top: 2px;
}

/* 슬라이드 */
.slider {width: 100%; height: 600px;}
.slider .ss1{background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .ss2{background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .ss3{background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}



/* 미디어쿼리 */
@media (max-width: 1290px){
    .container {width: 100%;}
    .header .nav ul li {width: 93px;}
    .header .nav ul li a {font-size: 15px; padding: 17px 18px;}
    .header h1 em {padding: 11px 8px 5px 0;}
    .header h1 strong {top:19px;}
}
@media (max-width: 1024px){
    #mNav {display: block;}
    .nav {display: none;}
    .row {padding: 0 24px;}
    .header h1 {float: none; text-align: center;}
    .header h1 strong {left: 24px;}
}
@media (max-width: 960px){}
@media (max-width: 768px){
    .row {padding: 0 16px;}
    #mNav {right: 6px;}
    .header h1 {text-align: left;}
    .header h1 strong {display:none;}
}
@media (max-width: 480px){}
@media (max-width: 320px){}

swiper.css

/**
 * Swiper 4.5.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 **/
 .swiper-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
  float: left;
}
.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform opacity;
  z-index: 5;
}
.swiper-slide .container {z-index: 20;}
.swiper-slide:after {
  content: ''; 
  position: absolute; 
  z-index: 2; 
  left: 0; top: 0; 
  width: 100%; height: 100%; 
  background: #000; 
  opacity: .5;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  left: 16px;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  right: 16px;
  left: auto;
}
.swiper-button-lock {
  display: none;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 100%;
  background: #ccc;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

출력화면

reference: Webstoryboy

swiper.js : https://swiperjs.com/demos/

르 푸 노 트Eat Study Record♥

인기글

태그

흔적

티스토리 뷰

메가박스 사이트 만들기_05.배너-Swiper.js

티스토리툴바

르 푸 노 트Eat Study Record♥

인기글

태그

흔적

티스토리 뷰

메가박스 사이트 만들기_05.배너-Swiper.js

UP NEXT : Coding/메가박스 따라 만들기

티스토리툴바