웹 디자인부터 코딩까지 이루어지는 수업입니다.
메가박스 사이트를 포토샵을 이용하여
디자인을 하고 반응형 사이트를 만드는 강의입니다.
디자인을 원하지 않으면 메가박스 코딩부터 보셔도 무관합니다.
사용프로그램
Adobe PhotoshopCC 2018 GO
brackets GO
웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공
도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.
참고 자료
닷홈 go
구글 폰트 go
swiper API go
소스 다운로드 : megabox2019
PSD 파일 다운 받기 : www.dropbox.com
인스타그램 보기 : instagram.com/webstoryboy
포폴 만들기 스터디 모임 : https://cafe.naver.com/crossbrowsing
<!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/reset11.css">
<link rel="stylesheet" href="assets/css/style11.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://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">
<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></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">
<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="swiper-container2">
<div class="chart_cont1 swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>5</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">19세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>6</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">19세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>7</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">19세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>8</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">19세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_cont1-->
<div class="swiper-container2">
<div class="chart_cont2 swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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>
<!-- //chart_cont2-->
<div class="swiper-container2">
<div class="chart_cont3 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@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 class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" 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">12세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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>
<!-- //chart_cont3-->
<div class="swiper-container2">
<div class="chart_cont4 swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" 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">12세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" 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">15세</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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 class="swiper-slide">
<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>
<span class="icon b ir_pm">Boutique</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>
<!-- //chart_cont4-->
</div>
</div>
</div>
</div>
</section>
<!-- //movie -->
<section id="event">
<div class="container">
<div class="row">
<div class="event">
<h2>새로운 이벤트</h2>
<div class="event_left">
<div class="event_slider">
<img src="assets/img/event01.jpg" srcset="assets/img/event01@2.jpg 2x" alt="시티 패키지">
</div>
<div class="event_box1">
<img src="assets/img/event02.jpg" srcset="assets/img/event02@2.jpg 2x" alt="남포항점 2019 시즌할인권">
</div>
<div class="event_box2">
<img src="assets/img/event03.jpg" srcset="assets/img/event03@2.jpg 2x" alt="설 선물 이수점 전용 관람권 런칭">
</div>
</div>
<div class="event_right">
<img src="assets/img/event04.jpg" srcset="assets/img/event04@2.jpg 2x" alt="사표 대신 영화표">
</div>
</div>
</div>
</div>
</section>
<!-- //event -->
<!-- 자바스크립트 라이브러리 -->
<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 mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
autoplay: {
delay: 5000,
},
});
//영화차트 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 24,
// mousewheel: {
// invert: true,
// },
keyboard: {
enabled: true,
onlyInViewport: false,
},
// autoplay: {
// delay: 6000,
// },
breakpoints: {
600: {
slidesPerView: 1.4,
spaceBetween: 24
},
768: {
slidesPerView: 2,
spaceBetween: 24
},
960: {
slidesPerView: 3,
spaceBetween: 24
}
}
});
//영화차트 탭 메뉴
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>
@charset "utf-8";
/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0; padding:0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em,address {font-style: normal;}
/* 블릿기호 초기화 */
ul,li,ol {list-style:none;}
/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}
/* 테두리 초기화 */
img,fieldset {border:0 none;}
/* 버튼 초기화 */
button {border: 0;}
/* 반응형 */
video,img {width: 100%;}
/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}
/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
/* 아이콘 이미지 최적화 작업 */
.icon {background-image: url(../img/icon.png);}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx){
.icon {background-image: url(../img/icon@2.png); background-size: 500px;}
}
@charset "utf-8";
/* 레이아웃 */
#mNav {display: none; position: absolute; top: 23px; right: 16px;}
#header {position: fixed; left: 0; top: 0; z-index: 9999; border-bottom: 1px solid #ccc; width: 100%; height: 50px; background: #fff;}
#banner {position: relative; background:rgba(0,0,0,0.1);}
#movie {background-color: #f2f2f2;}
/* 가운데 영역 */
.container {position: relative; width: 1280px; margin: 0 auto; /* background:rgba(0,0,0,0.1); */ }
/* 로우 영역 */
.row {padding: 0 16px;}
/* 모바일 메뉴 */
.ham {display: block; width: 25px; height: 4px;}
.ham span {position: relative; display: block; width: 25px; height: 4px; background: #39106a;}
.ham span::before {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; bottom: -7px;
transition: transform 0.3s;
}
.ham span::after {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; top: -7px;
transition: transform 0.3s;
}
/* 헤더 */
.header h1 {float: left; position: relative;}
.header h1 em {padding: 8px 8px 3px 0px; display: inline-block;}
.header h1 em img {width: 155px; }
.header h1 strong {display: block; position: absolute; left: 170px; top: 14px;}
.header h1 strong img {width: 157px;}
.header .nav {float: right; }
.header .nav ul {border-left: 1px solid #c6c6c6;}
.header .nav li {float: left; width: 85px; text-align: center; border-right: 1px solid #c6c6c6; }
.header .nav li a {display: block; padding: 14px 10px; font-size: 15px; font-weight: 700; color: #444;}
/* 배너 */
.banner_menu {overflow: hidden; position: absolute; left: 0; top: 65px; width: 100%; height: 100px; 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; position: relative;}
.banner_menu .bm_left li {margin-right: 30px;}
.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: 1px solid #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 {position: relative; display: inline; text-align: center; margin-right: 20px;}
.banner_menu .bm_right li.line {margin-right: 30px}
.banner_menu .bm_right li.white {margin-right: 10px;}
.banner_menu .bm_right li.purple {margin-right: 0;}
.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 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: -18px; top: 2px;}
/* 슬라이드 */
.slider {width: 100%;}
.slider .ss1 {background: url(../img/main_slider01_2000.jpg) no-repeat center center; background-size: cover;}
.slider .ss2 {background: url(../img/main_slider02_2000.jpg) no-repeat center center; background-size: cover;}
.slider .ss3 {background: url(../img/main_slider03_2000.jpg) no-repeat center center; background-size: cover;}
.slider .swiper-slide {text-align: center;}
.slider .swiper-slide.ss3 {text-align: left;}
.slider .swiper-slide h3 {font-size: 60px; color: #fff; margin-top: 250px; opacity: 1; }
.slider .swiper-slide p {font-size: 24px; color: #bbb; margin-bottom: 200px; font-weight: 100;}
/* 무비 */
.movie {padding: 100px 0;}
.movie_title {overflow: hidden; margin-bottom: 60px;}
.movie_title ul {overflow: hidden; width: 848px; margin: 0 auto;}
.movie_title li {float: left; width: 210px; margin-right: -1px; text-align: center; border: 1px solid #c4c4c4;}
.movie_title li a {display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700;}
.movie_title li.active a {background: #666; color: #fff;}
.movie_chart {overflow: hidden; }
.movie_chart > div > div > div {display: inline-block; width: 292px; margin-right: 23px; }
.movie_chart > div > div > div:last-child {margin-right: 0;}
.movie_chart > div > div > div .poster {position: relative;}
.movie_chart > div > div > div .poster img {display: block;}
.movie_chart > div > div > div .poster .rank {position: absolute; top: 17px; left: 0; width: 50px; height: 50px; line-height: 50px; background-color: #38116a; text-align: center; box-shadow: 3px 3px 8px rgba(0,0,0,0.5);}
.movie_chart > div > div > div .poster .rank strong {color: #fff; font-size: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5)}
.movie_chart > div > div > div .poster .mx {position: absolute; top: 17px; right: 17px;}
.movie_chart > div > div > div .poster .mx span {width: 103px; height: 25px; display: block;}
.movie_chart > div > div > div .poster .mx .m {background-position: 0 -75px;}
.movie_chart > div > div > div .poster .mx .b {background-position: 0 -100px;}
.movie_chart > div > div > div .infor {background: #fff; padding: 17px; border: 1px solid #d9d9d9;}
.movie_chart > div > div > div .infor h3 {color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie_chart > div > div > div .infor h3 strong {padding-left: 0px;}
.movie_chart > div > div > div .infor h3 span {width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: -2px;}
.movie_chart > div > div > div .infor h3 span.all {background-position: -87px -125px;}
.movie_chart > div > div > div .infor h3 span.a12 {background-position: -58px -125px;}
.movie_chart > div > div > div .infor h3 span.a15 {background-position: 0 -125px;}
.movie_chart > div > div > div .infor h3 span.a19 {background-position: -29px -125px;}
.movie_chart > div > div > div .infor .infor_btn {overflow: hidden;}
.movie_chart > div > div > div .infor .infor_btn a {display: block; float: left; width: 49%; margin-right: 2%; padding: 10px 0; text-align: center; background: #f2f2f2; color: #666; font-size: 18px;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {margin-right: 0;}
/* 이벤트 */
.event {overflow: hidden; padding: 100px 0;}
.event img {display: block;}
.event h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.event_left {float: left; width: 66%; margin-right: 2%;}
.event_left .event_box1 {float: left; width: 50%;}
.event_left .event_box2 {float: left; width: 50%;}
.event_right {float: left; width: 32%;}
/* 미디어 쿼리 */
@media (max-width: 1290px){
.container {width: 100%;}
#header .row {padding-right: 0;}
.header .nav li:last-child {border-right: 0;}
.slider .swiper-slide.ss3 {text-align: center;}
}
@media (max-width: 1024px){
.header h1 em {padding: 11px 11px 8px 0px; }
.header h1 em img {width: 135px; }
.header h1 strong {left: 150px; top: 18px;}
.header h1 strong img {width: 117px;}
}
@media (max-width: 960px){
#mNav {display: block;}
.header .nav {display: none;}
.header h1 {text-align: center; float: none;}
.header h1 em {padding-right: 0;}
.header h1 strong {left: 0px;}
.banner_menu .bm_left ul {display: none;}
.banner_menu .bm_right ul:first-child {display: none;}
.slider {height: 500px;}
.slider .swiper-slide h3 {margin-top: 210px; font-size: 40px;}
.slider .swiper-slide p {margin-bottom: 100px; font-size: 20px;}
.movie_title ul {width: auto;}
.movie_title li {width: 25%; box-sizing: border-box; padding-right: 1px;}
}
@media (max-width: 768px){
body {background: #d9d7e0;}
#movie {background-color: transparent;}
#movie .row {margin: 24px; padding: 24px; background: #fff;}
#movie .ir_so {position: static; width: auto; height: auto; line-height: normal; text-indent: 0; font-size: 24px; font-weight: bold; padding-bottom: 20px;}
.movie {padding: 0;}
.movie_title {margin-bottom: 30px;}
.movie_title ul {position: relative; padding-bottom: 10px;}
.movie_title ul:before {content: ''; position: absolute; z-index: 1; left: 0; bottom: 0px; width: 100%; height: 2px; background: #e1e1e1;}
.movie_title li {width: auto; border: 0;}
.movie_title li a {position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 35px;}
.movie_title li.active a:before {content: ''; position: absolute; z-index: 10000; left: 0; bottom: -10px; width: 100%; height: 2px; background: #666;}
.movie_title li.active a {background: none; color: #666;}
#event .row {padding: 0 24px;}
.event {padding: 24px; background: #fff;}
.event h2 {font-size: 24px; font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px;}
.event_left {width: 100%; margin-right: 0;}
.event_right {display: none;}
}
@media (max-width: 600px){
.header h1 strong {display: none}
.header h1 {text-align: left;}
.banner_menu .bm_right li.white a {font-size: 14px; padding: 3px 5px 5px 5px; color:#fff; background: rgba(0,0,0,0.6); border-color:#fff;}
.banner_menu .bm_right li.purple a {font-size: 14px; padding: 3px 5px 5px 5px; color:#fff; background: rgba(0,0,0,0.6); border-color:#fff;}
.slider {height: 400px;}
.slider .swiper-slide h3 {margin-top: 200px; font-size: 30px; }
.slider .swiper-slide p {margin-bottom: 100px; font-size: 12px;}
.swiper-button-prev, .swiper-button-next {display: none;}
.swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
#movie .container {position: relative;}
#movie .container:after {content: ''; position: absolute; z-index: 20; top: 0; right: 0; width: 8px; height: 100%; background: #d9d7e0;}
#movie .row {position: relative; margin: 8px; padding: 16px; background: #fff; margin-right: 0; padding-right: 0;}
#movie .row:after {content: ''; position: absolute; top: 0; right: 0; z-index: 10; width: 24px; height: 100%; background: #fff;}
#movie .ir_so {font-size: 18px; padding-bottom: 10px;}
.movie_title {margin-bottom: 20px;}
.movie_title ul {padding-bottom: 8px; overflow-x: auto;white-space: nowrap;}
.movie_title li a {font-size: 14px; margin-right: 15px;}
.movie_title li.active a:before {bottom: -8px;}
.movie_chart {position: relative; z-index: 30;}
.movie_chart > div > div > div .infor {padding: 5px;}
.movie_chart > div > div > div .infor h3 {text-align: center; margin: 5px 0 10px; }
.movie_chart > div > div > div .infor h3 strong {display: block; font-size: 19px; color: #222; font-weight: 300;}
.movie_chart > div > div > div .infor h3 span {display: none;}
.movie_chart > div > div > div .infor .infor_btn a {width: 52%; margin-left: 24%; display: block; margin-right: 0; padding: 5px; color: #777; margin-bottom: 5px; box-sizing: border-box; font-size: 14px; background: none; border: 1px solid #ddd;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {display: none;}
#event .row {padding: 0 8px;}
.event {padding: 16px;}
.event h2 {font-size: 18px; margin-bottom: 0;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
.movie_title li a {margin-right: 9px;}
}
/**
* 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;
}
.movie_chart .swiper-slide:after {
background: transparent;
}
.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;
}
//배너 이미지 슬라이드
var swiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 5000,
},
});
//영화차트 이미지 슬라이드
var swiper = new Swiper('.swiper-container2',{
slidesPerView: 4,
spaceBetween: 24,
mousewheel: {
invert: true,
},
keyboard: {
enabled: true,
onlyInViewport: false,
},
autoplay: {
delay: 6000,
},
breakpoints: {
600: {
slidesPerView: 1.4,
spaceBetween: 24
},
768: {
slidesPerView: 2,
spaceBetween: 24
},
960: {
slidesPerView: 3,
spaceBetween: 24
}
}
});
//영화차트 탭 메뉴
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");
});
728x90
