티스토리 뷰
메가박스 사이트 만들기
강의번호 07 - 영화 차트 구조잡기
완성!
style.css
@charset "utf-8";
/* 레이아웃 */
#mNav{display: none; position: absolute; top: 13px; right:14px;}
#header{width:100%; border-bottom: 1px solid #c6c6c6;}
#benner{position: relative;}
/* 가운데 영역 */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0);}
/*로우 영역*/
.row {padding: 0 28px;}
/*모바일 메뉴*/
.ham {display: block; width: 25px; height: 10px; background: rgba(0,0,0,0.0); padding: 15px 10px 10px 10px;}
.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;
}
.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: 24px;}
.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{overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; 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{position: relative; display: inline; margin-right: 30px;}
.banner_menu .bm_left li.toral{margin-right: 20px;}
.banner_menu .bm_left li.toral a {font-size: 14px; padding: 3px 10px; display: inline-block; border: 1px solid #fff; transition: all 0.3s}
.banner_menu .bm_left li.toral 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.white a{width: 80px; background-color: #fff; color: #3a0e6a; padding: 7px 30px 9px 30px; border: 1px solid #fff; display: inline-block}
.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; border: 1px solid #6240c4; display: inline-block}
.banner_menu li.line:after{content: ''; width: 1px;height: 14px;background: #fff; position: absolute; right: -18px; top: 2px;}
/*슬라이드*/
.slider{width: 100%; height: 600px;}
.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 h2{position: relative; display: inline-block; font-size: 62px; line-height: 70px; color: #fff; margin-top: 200px; }
.slider .swiper-slide h2:after{content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.7); position: absolute; left: 0; bottom: -35px;}
.slider .swiper-slide h2 em{display: block; font-size: 59px; font-weight: 100; }
.slider .swiper-slide p {font-size: 27px; padding-top: 35px; color: #fff;}
/*무비*/
.movie{padding: 100px 0;}
.movie .movie_title{margin-bottom: 60px;}
.movie .movie_title ul{overflow: hidden; width: 848px; margin: 0 auto;}
.movie .movie_title li{float: left; width: 210px; text-align: center; border: 1px solid #c4c4c4 ;margin-right: -1px;}
.movie .movie_title li a{display: block;padding: 15px 0;font-size: 18px; color: #666; font-weight: 700;}
.movie .movie_title li.active a {background: #666; color: #fff}
.movie .movie_chart {height: 592px;}
.movie .movie_chart > div{overflow: hidden}
.movie .movie_chart > div > div{float: left; width: 288px; height: 592px; margin-right: 18px; margin-right: 18px;}
.movie .movie_chart > div > div .poster{position: relative;}
.movie .movie_chart > div > div .poster img{display: block;}
.movie .movie_chart > div > div .poster .rank{position: absolute; top: 17px; left: 0; width: 50px;height: 50px;line-height: 50px; background-color: #38116a; text-align: center}
.movie .movie_chart > div > div .poster .rank strong{color: #fff}
.movie .movie_chart > div > div .poster .mx{position: absolute; top: 17px; right: 17px;}
.movie .movie_chart > div > div .poster .mx span{width: 103px; height: 25px; display: block;}
.movie .movie_chart > div > div .poster .mx .m{background-position: 0 -75px;}
.movie .movie_chart > div > div .poster .mx .b {background-position: 0 -100px;}
.movie .movie_chart > div > div .infor{background: #fff; padding: 17px; border: 1px solid #d9d9d9}
.movie .movie_chart > div > div .infor h3{color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie .movie_chart > div > div .infor h3 strong{}
.movie .movie_chart > div > div .infor h3 span{width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: -2px}
.movie .movie_chart > div > div .infor h3 span.all {background-position: -87px -125px;}
.movie .movie_chart > div > div .infor h3 span.a12 {background-position: -58px -125px;}
.movie .movie_chart > div > div .infor h3 span.a15 {background-position: -0px -125px;}
.movie .movie_chart > div > div .infor h3 span.a19 {background-position: -29px -125px;}
.movie .movie_chart > div > div .infor .infor_btn a {display: inline-block; background: #f2f2f2; font-size: 18px; padding: 15px 29px;}
/*미디어쿼리*/
@media (max-width: 1290px){
.container{width: 100%;}
.header .nav ul li{width: 93px;}
.header .nav ul li a{width: 91px; font-size: 15px; padding: 17px 10px; }
.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}
.header h1{float: none; text-align: center}
.header h1 strong{left: 24px;}
.row {padding: 0 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: 140px; font-size: 37px; line-height: 30px;}
.slider .swiper-slide h2:after{bottom: -5px;}
.slider .swiper-slide h2 em {font-size: 20px;}
.slider .swiper-slide p{font-size: 16px; padding-top: 25px;}
}
@media (max-width: 768px){
#mNav{right: 6px;}
.row {padding: 0 16px;}
.header h1{text-align: left}
.header h1 strong{display: none}
}
@media (max-width: 600px){
.slider{height: 400px;}
.slider .swiper-slide h2 {margin-top: 160px; font-size: 24px; line-height: 35px;}
.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;}
.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,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}
.swiper-pagination-bullet {width: 13px !important; height: 13px!important;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
}
reset.css
@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;}
}
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>메가박스 사이트 코딩하기</title>
<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="loga">
<meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
<!-- 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://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&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-->
<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="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-->
<!-- banner -->
<section id="benner">
<h2 class="ir_so">최신 영화 소식</h2>
<div class="banner_menu">
<div class="container">
<div class="row">
<div class="bm_left">
<ul>
<li class="toral"><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>
<!-- Slides -->
<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>
<!-- //Slides -->
</section>
<!-- //banner -->
<!--movie-->
<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.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 a19 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.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 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/poster04.jpg" srcset="assets/img/poster04.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 a15 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>
<!--chart_cont2-->
<div class="chart_cont3">
</div>
<!--chart_cont3-->
<div class="chart_cont4">
</div>
<!--chart_cont4-->
</div>
</div>
</div>
</div>
</section>
<!-- 자바스크립트 라이브러리 -->
<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.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,
},
});
</script>
</body></html>UP NEXT : 코딩/메가박스
댓글
© 2018 webstoryboy