티스토리 뷰

반응형

메가박스 사이트 만들기 08.영화차트 탭 메뉴

<!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="stylesheet" href="assets/css/font-awesome.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="#"><i class="fa fa-bars" aria-hidden="true"></i>
                        전체메뉴</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">
                 <div class="container">
                    <div class="row">
                        <h2>캡틴 마블 <em>Captain Marvel</em></h2>
                        <p>새로운 히어로, 어벤져스의 희망</p>
                    </div>
                 </div>
              </div>
              <div class="swiper-slide ss2">
                  <div class="container">
                     <div class="row">
                        <h2>캡틴 마블 <em>Captain Marvel</em></h2>
                        <p>새로운 히어로, 어벤져스의 희망</p>
                     </div>
                  </div>
              </div>
              <div class="swiper-slide ss3">
                  <div class="container">
                     <div class="row">
                        <h2>캡틴 마블 <em>Captain Marvel</em></h2>
                        <p>새로운 히어로, 어벤져스의 희망</p>
                     </div>
                  </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
         </div>   
      </div>
   </section>
   <!-- //banner -->

   <section id="movie">
      <div class="container">
         <div class="row">
            <div class="movie">
               <h2 class="ir_so">최신 영화 정보</h2>
               <div class="movie_title">
                  <ul>
                     <li class="active"><a href="#">박스오피스</a></li>
                     <li><a href="#">최신개봉작</a></li>
                     <li><a href="#">상영예정작</a></li>
                     <li><a href="#">큐레이션</a></li>
                  </ul>      
               </div>
               <div class="movie_chart">
                  <div class="chart_cont1">
                     <div>
                        <div class="poster">
                           <figure>
                               <img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="침묵">
                           </figure>
                           <div class="rank"><strong>1</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon all ir_pm">전체 관람가</span> <strong>침묵</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg" alt="신세계">
                           </figure>
                           <div class="rank"><strong>2</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a12 ir_pm">전체 관람가</span> <strong>신세계</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg" alt="마스터">
                           </figure>
                           <div class="rank"><strong>3</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a15 ir_pm">전체 관람가</span> <strong>마스터</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg" alt="마약왕">
                           </figure>
                           <div class="rank"><strong>4</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a19 ir_pm">전체 관람가</span> <strong>마약왕</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- //chart_cont1 -->

                  <div class="chart_cont2">
                     <div>
                        <div class="poster">
                           <figure>
                               <img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="her">
                           </figure>
                           <div class="rank"><strong>1</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon all ir_pm">전체 관람가</span> <strong>her</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg" alt="괴물">
                           </figure>
                           <div class="rank"><strong>2</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a12 ir_pm">전체 관람가</span> <strong>괴물</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg" alt="겟아웃">
                           </figure>
                           <div class="rank"><strong>3</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a15 ir_pm">전체 관람가</span> <strong>겟아웃</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg" alt="문라이트">
                           </figure>
                           <div class="rank"><strong>4</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a19 ir_pm">전체 관람가</span> <strong>문라이트</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- //chart_cont2 -->

                  <div class="chart_cont3">
                     <div>
                        <div class="poster">
                           <figure>
                               <img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="보헤미안랩소디">
                           </figure>
                           <div class="rank"><strong>1</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon all ir_pm">전체 관람가</span> <strong>보헤미안랩소디</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg" alt="신세계">
                           </figure>
                           <div class="rank"><strong>2</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a12 ir_pm">전체 관람가</span> <strong>신세계</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg" alt="침묵">
                           </figure>
                           <div class="rank"><strong>3</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a15 ir_pm">전체 관람가</span> <strong>침묵</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg" alt="마약왕">
                           </figure>
                           <div class="rank"><strong>4</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a19 ir_pm">전체 관람가</span> <strong>마약왕</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- //chart_cont3 -->

                  <div class="chart_cont4">
                     <div>
                        <div class="poster">
                           <figure>
                               <img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="침묵">
                           </figure>
                           <div class="rank"><strong>1</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon all ir_pm">전체 관람가</span> <strong>침묵</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg" alt="her">
                           </figure>
                           <div class="rank"><strong>2</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a12 ir_pm">전체 관람가</span> <strong>her</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg" alt="마스터">
                           </figure>
                           <div class="rank"><strong>3</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a15 ir_pm">전체 관람가</span> <strong>마스터</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                     <div>
                        <div class="poster">
                           <figure>
                              <img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg" alt="겟아웃">
                           </figure>
                           <div class="rank"><strong>4</strong></div>
                           <div class="mx">
                              <span class="icon m ir_pm">Mx</span>
                              <span class="icon b ir_pm">Boutique</span>
                           </div>
                        </div>
                        <div class="infor">
                           <h3><span class="icon a19 ir_pm">전체 관람가</span> <strong>겟아웃</strong></h3>
                           <div class="infor_btn">
                              <a href="#">상세보기</a>
                              <a href="#">예매하기</a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- //chart_cont4 -->
               </div>
            </div>
         </div>
      </div>
   </section>
   <!-- //movie -->
    



   <!-- 자바스크립트 라이브러리 -->
   <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,
         },
      });
      
      //영화차트 탭 메뉴
      let movBtn = $(".movie_title > ul > li");
      let movCont = $(".movie_chart > div");

      movCont.hide().eq(0).show();
      
      movBtn.click(function(e){
         e.preventDefault();
         let target = $(this);
         let index = target.index();
         // alert(index);
         movBtn.removeClass("active");
         target.addClass("active");
         movCont.css("display","none");
         movCont.eq(index).css("display","block");
      });
   </script>
</body>
</html>

출력화면

reference: Webstoryboy

댓글
Skin Design Copyright 2018 webstoryboy