Megabox
08. 메가박스 사이트 만들기 - 영화 차트 탭 메뉴
수콩!
2019. 12. 26. 14:54
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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="webstoryboy">
<meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
<title>메가박스 사이트 코딩하기 : 영화 차트 탭 메뉴</title>
<!-- css -->
<link rel="stylesheet" href="assets/css/reset08.css">
<link rel="stylesheet" href="assets/css/style08.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://github.com/webstoryboy/megabox2019" />
<meta property="og:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg" />
<meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
<!-- 트위터 메타 태그 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="메가박스 사이트 만들기">
<meta name="twitter:url" content="https://github.com/webstoryboy/megabox2019/">
<meta name="twitter:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg">
<meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&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">
<div class="banner_menu">
<h2 class="ir_so">배너 영역</h2>
<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="custom/faq.html">고객센터</a></li>
<li class="line"><a href="#">멤버쉽</a></li>
<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">
<h3>어벤져스 : 앤드게임</h3>
<p>역대 최단 기간 1000만 관객 돌파 기록 </p>
</div>
</div>
</div>
<div class="swiper-slide ss2">
<div class="container">
<div class="row">
<h3>어벤져스 : 앤드게임</h3>
<p>역대 최단 기간 1000만 관객 돌파 기록 </p>
</div>
</div>
</div>
<div class="swiper-slide ss3">
<div class="container">
<div class="row">
<h3>어벤져스 : 앤드게임</h3>
<p>역대 최단 기간 1000만 관객 돌파 기록 </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">
<h2 class="ir_so">최신 영화 정보</h2>
<div class="container">
<div class="row">
<div class="movie">
<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 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세 이상 관람</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 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세 이상 관람</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 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세 이상 관람</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="침묵">
</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/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세 이상 관람</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/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세 이상 관람</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 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세 이상 관람</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/poster09.jpg" srcset="assets/img/poster09@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/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">19세 이상 관람</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 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세 이상 관람</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 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">15세 이상 관람</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/poster04.jpg" srcset="assets/img/poster04@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 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세 이상 관람</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/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세 이상 관람</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/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">15세 이상 관람</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="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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,
},
});
//영화차트 탭 메뉴
var movBtn = $(".movie_title > ul > li");
var movCont = $(".movie_chart > div");
movCont.hide().eq(0).show();
movBtn.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
movBtn.removeClass("active");
target.addClass("active");
movCont.css("display","none");
movCont.eq(index).css("display","block");
});
</script>
</body>
</html>