티스토리 뷰
반응형
메가박스 사이트 만들기 06. 배너 반응형
<!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 -->
<!-- 자바스크립트 라이브러리 -->
<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;}
.slider .swiper-slide h2 {position: relative; font-size: 62px; line-height: 70px; color: #fff; margin-top: 200px; display: inline-block;}
.slider .swiper-slide h2:after {
content: ''; width: 100%; height: 1px;
background: rgba(255,255,255,.7);
position: absolute; left: 0; bottom: -35px;
}
.slider .swiper-slide h2 em {display: block; font-size: 59; font-weight: 100;}
.slider .swiper-slide p {font-size: 17px; color: #fff; padding-top: 55px;}
/* 미디어쿼리 */
@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;}
.swiper-button-prev, .swiper-button-next {display: none;}
}
@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;}
.banner_menu .bm_left ul {display: none;}
.banner_menu .bm_right ul:first-child {display: none;}
}
@media (max-width: 960px){
.slider {height: 500px;}
.slider .swiper-slide h2 {margin-top: 170px; font-size: 37px; line-height: 45px;}
.slider .swiper-slide h2:after {bottom: -15px;}
.slider .swiper-slide h2 em {font-size: 34px;}
.slider .swiper-slide p {font-size: 16px; padding-top: 35px;}
}
@media (max-width: 768px){
.row {padding: 0 16px;}
#mNav {right: 6px;}
.header h1 {text-align: left;}
.header h1 strong {display:none;}
}
@media (max-width: 600px){
.slider {height: 400px;}
.slider .swiper-slide h2 {margin-top: 140px; font-size: 24px; line-height: 30px;}
.slider .swiper-slide h2:after {bottom: -5px;}
.slider .swiper-slide h2 em {font-size: 20px;}
.slider .swiper-slide p {font-size: 14px; padding-top: 25px;}
.banner_menu {top: 16px;}
.banner_menu .bm_right li.white a {font-size: 14px; padding: 3px 5px 5px 5px; color: #fff; background: rgba(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,6); border-color: #fff;}
.swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
}
@media (max-width: 480px){}
@media (max-width: 320px){}출력화면
reference: Webstoryboy
UP NEXT : Coding/메가박스 따라 만들기
댓글
Skin Design Copyright 2018 webstoryboy