사이트 만들기/메가박스 만들기
메가박스 사이트 만들기 07 - 영화 차트 구조잡기
yumino
2019. 12. 24. 02:52
반응형
<!DOCTYPEhtml\>
<htmllang\="ko"\>
<head\>
<metacharset\="UTF-8"\>
<metaname\="viewport"content\="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"\>
<metahttp-equiv\="X-UA-Compatible"content\="ie=edge"\>
<metaname\="author"content\="webstoryboy"\>
<metaname\="description"content\="메가박스 사이트 따라하면서 배우는 튜토리얼입니다."\>
<metaname\="keywords"content\="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기"\>
<title\>메가박스 사이트 코딩하기</title\>
<!-- CSS -->
<linkrel\="stylesheet"href\="assets/css/reset07.css"\>
<linkrel\="stylesheet"href\="assets/css/style07.css"\>
<linkrel\="stylesheet"href\="assets/css/swiper.css"\>
<linkrel\="stylesheet"href\="assets/fonts/font-awesome.css"\>
<!-- 파비콘 -->
<linkrel\="shortcut icon"href\="assets/icons/favicon.ico"\>
<linkrel\="apple-touch-icon-precomposed"href\="assets/icons/favicon\_72.png"/>
<linkrel\="apple-touch-icon-precomposed"sizes\="96x96"href\="assets/icons/favicon\_96.png"/>
<linkrel\="apple-touch-icon-precomposed"sizes\="144x144"href\="assets/icons/favicon\_144.png"/>
<linkrel\="apple-touch-icon-precomposed"sizes\="192x192"href\="assets/icons/favicon\_192.png"/>
<!-- 페이스북 메타 태그 -->
<metaproperty\="og:title"content\="메가박스 사이트 만들기"/>
<metaproperty\="og:url"content\="[https://github.com/webstoryboy/megabox2019](https://github.com/webstoryboy/megabox2019)"/>
<metaproperty\="og:image"content\="[https://webstoryboy.github.io/megabox2019/mega.jpg](https://webstoryboy.github.io/megabox2019/mega.jpg)"/>
<metaproperty\="og:description"content\="메가박스 사이트 따라하면서 배우는 튜토리얼입니다."/>
<!-- 트위터 메타 태그 -->
<metaname\="twitter:card"content\="summary"\>
<metaname\="twitter:title"content\="메가박스 사이트 만들기"\>
<metaname\="twitter:url"content\="[https://github.com/webstoryboy/megabox2019/](https://github.com/webstoryboy/megabox2019/)"\>
<metaname\="twitter:image"content\="[https://webstoryboy.github.io/megabox2019/mega.jpg](https://webstoryboy.github.io/megabox2019/mega.jpg)"\>
<metaname\="twitter:description"content\="메가박스 사이트 따라하면서 배우는 튜토리얼입니다."\>
<!-- 웹 폰트-->
<linkhref\="[https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean](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\]-->
<style>
/\* 여백 초기화 \*/
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:0none;}
/\* 버튼 초기화 \*/
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;}
}
/\* 레이아웃 \*/
#mNav {display: none; position: absolute; top: 10px; right: 14px;}
#header {width: 100%; border-bottom: 1pxsolid#c6c6c6;}
#banner {position: relative;}
/\* 가운데 영역 \*/
.container {position: relative; width: 1280px; margin: 0auto; background: rgba(0,0,0,0); }
/\* 로우 영역 \*/
.row {padding: 028px;}
/\* 모바일 메뉴 \*/
.ham {display: block; width: 25px; height: 10px; background: rgba(0,0,0,0); padding: 15px10px10px10px;}
.hamspan {position: relative; display: block; width: 25px; height: 4px; background: #39106a;}
.hamspan:before {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; bottom: \-7px;
}
.hamspan:after {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; top: \-7px;
}
/\* 헤더 영역 \*/
.headerh1 {float: left;}
.headerh1em {padding: 15px8px5px0; display: inline-block;}
.headerh1emimg {width: 155px;}
.headerh1strong {display: block; position: absolute; left: 194px; top: 23px;}
.headerh1strongimg {width: 126px;}
.header.nav {float: right;}
.header.navul {border-left: 1pxsolid#c6c6c6}
.header.navulli {float: left; width: 103px; text-align: center; border-right: 1pxsolid#c6c6c6;}
.header.navullia {display: block; padding: 19px10px; font-size: 17px; font-weight: 700; color: #444;}
/\* 배너 \*/
.banner\_menu {overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; z-index: 10;}
.banner\_menua {color: #fff; font-size: 16px; transition: all0.3s;}
.banner\_menua:hover {color: #c1c1c1;}
.banner\_menu.bm\_left {float: left;}
.banner\_menu.bm\_leftul {padding-top: 7px;}
.banner\_menu.bm\_leftli {display: inline; position: relative; margin-right: 30px;}
.banner\_menu.bm\_leftli.total {margin-right: 20px;}
.banner\_menu.bm\_leftli.totala {font-size: 14px; padding: 3px10px; display: inline-block; border: 1pxsolid#fff; transition: all0.3s;}
.banner\_menu.bm\_leftli.totala:hover {background: #fff; border-color: #000; color: #000;}
.banner\_menu.bm\_right {float: right; overflow: hidden;}
.banner\_menu.bm\_rightul {float: left;}
.banner\_menu.bm\_rightul:first-child {padding-top: 7px;}
.banner\_menu.bm\_rightli {position: relative; display: inline; text-align: center; margin-right: 20px;}
.banner\_menu.bm\_rightli.line {margin-right: 30px;}
.banner\_menu.bm\_rightli.white {margin-right: 10px;}
.banner\_menu.bm\_rightli.whitea {width: 80px; background-color: #fff; color: #3a0e6a; padding: 7px30px9px30px; display: inline-block; border: 1pxsolid#fff;}
.banner\_menu.bm\_rightli.purple {margin-right: 0;}
.banner\_menu.bm\_rightli.purplea {width: 80px; background-color: #3a0e6a; color: #fff; padding: 7px30px9px30px; display: inline-block; border: 1pxsolid#6e40c4;}
.banner\_menuli.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/swiper01.jpg) no-repeatcentercenter; background-size: cover;}
.slider.ss2 {background: url(../img/swiper01.jpg) no-repeatcentercenter; background-size: cover;}
.slider.ss3 {background: url(../img/swiper01.jpg) no-repeatcentercenter; background-size: cover;}
.slider.swiper-slideh2 {position: relative; display: inline-block; font-size: 62px; line-height: 70px; color: #fff; margin-top: 200px;}
.slider.swiper-slideh2:after {content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.3); position: absolute; left: 0; bottom: \-35px;}
.slider.swiper-slideh2em {display: block; font-size: 59px; font-weight: 100;}
.slider.swiper-slidep {font-size: 27px; color: #fff; padding-top: 55px;}
/\* 무비 \*/
.movie {padding: 100px0;}
.movie\_title {margin-bottom: 60px;}
.movie\_titleul {overflow: hidden; width: 848px; margin: 0auto;}
.movie\_titleli {float: left; width: 210px; text-align: center; border: 1pxsolid#c4c4c4; margin-right: \-1px;}
.movie\_titlelia {display: block; padding: 15px0; font-size: 18px; color: #666; font-weight: 700;}
.movie\_titleli.activea {background: #666; color: #fff;}
.movie\_chart {height: 592px;}
.movie\_chart > div {overflow: hidden;}
.movie\_chart > div > div {float: left; width: 292px; height: 592px; margin-right: 16px;}
.movie\_chart > div > div:last-child {margin-right: 0;}
.movie\_chart > div > div.poster {position: relative;}
.movie\_chart > div > div.posterimg {display: block;}
.movie\_chart > div > div.poster.rank {position: absolute; top: 17px; left: 0; width: 50px; height: 50px; font-size: 22px; box-shadow: 3px3px8pxrgba(0,0,0,0.5); line-height: 50px; background-color: #38116a; text-align: center;}
.movie\_chart > div > div.poster.rankstrong {color: #fff; text-shadow: 2px2px3pxrgba(0,0,0,1);}
.movie\_chart > div > div.poster.mx {position: absolute; top: 17px; right: 17px;}
.movie\_chart > div > div.poster.mxspan {width: 103px; height: 25px; display: block;}
.movie\_chart > div > div.poster.mx.m {background-position: 0\-75px;}
.movie\_chart > div > div.poster.mx.b {background-position: 0\-100px;}
.movie\_chart > div > div.infor {background: #fff; padding: 17px; border: 1pxsolid#d9d9d9;}
.movie\_chart > div > div.inforh3 {color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie\_chart > div > div.inforh3strong{}
.movie\_chart > div > div.inforh3span {width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: \-2px;}
.movie\_chart > div > div.inforh3span.all {background-position: \-87px\-125px;}
.movie\_chart > div > div.inforh3span.a12 {background-position: \-58px\-125px;}
.movie\_chart > div > div.inforh3span.a15 {background-position: 0px\-125px;}
.movie\_chart > div > div.inforh3span.a19 {background-position: \-29px\-125px;}
.movie\_chart > div > div.infor.infor\_btna {display: inline-block; background: #f2f2f2; font-size: 18px; padding: 15px30px;}
/\* 미디어쿼리 \*/
@media (max-width: 1290px){
.container {width: 100%;}
.header.navulli {width: 93px;}
.header.navullia {font-size: 15px; padding: 17px10px}
.headerh1em {padding: 11px8px5px0;}
.headerh1strong {top: 19px;}
.swiper-button-prev, .swiper-button-next {display: none;}
}
@media (max-width: 1024px){
#mNav {display: block;}
.nav {display: none;}
.row {padding: 024px;}
.headerh1 {float: none; text-align: center;}
.headerh1strong {left: 24px;}
.banner\_menu.bm\_leftul {display: none;}
.banner\_menu.bm\_rightul:first-child {display: none;}
}
@media (max-width: 960px){
.slider {height: 500px;}
.slider.swiper-slideh2 {margin-top: 170px; font-size: 37px; line-height: 45px;}
.slider.swiper-slideh2:after {bottom: \-15px;}
.slider.swiper-slideh2em {font-size: 34px;}
.slider.swiper-slidep {font-size: 16px; padding-top: 35px;}
}
@media (max-width: 768px){
.row {padding: 016px;}
#mNav {right: 6px;}
.headerh1 {text-align: left;}
.headerh1strong {display: none;}
}
@media (max-width: 600px){
.slider {height: 400px;}
.slider.swiper-slideh2 {margin-top: 140px; font-size: 24px; line-height: 30px;}
.slider.swiper-slideh2:after {bottom: \-5px;}
.slider.swiper-slideh2em {font-size: 20px;}
.slider.swiper-slidep {font-size: 14px; padding-top: 25px;}
.banner\_menu {top: 16px;}
.banner\_menu.bm\_rightli.whitea {font-size: 14px; padding: 3px5px5px5px; color: #fff; background: rgba(0,0,0,0.6); border-color:#fff;}
.banner\_menu.bm\_rightli.purplea {font-size: 14px; padding: 3px5px5px5px; 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){
}
</style>
</head\>
<body\>
<headerid\="header"\>
<divclass\="container"\>
<divclass\="row"\>
<divclass\="header clearfix"\>
<h1\>
<ahref\="#"\>
<em\><imgsrc\="assets/img/logo.png"alt\="MEGABOX"\></em\>
<strong\><imgsrc\="assets/img/logo-sub.png"alt\="LIFE THEATER"\></strong\>
</a\>
</h1\>
<navid\="mNav"\>
<h2class\="ir\_so"\>메가박스 전체메뉴</h2\>
<ahref\="#"class\="ham"\><span\></span\></a\>
</nav\>
<navclass\="nav"\>
<ulclass\="clearfix"\>
<li\><ahref\="#"\>영화</a\></li\>
<li\><ahref\="#"\>큐레이션</a\></li\>
<li\><ahref\="#"\>영화관</a\></li\>
<li\><ahref\="#"\>특별관</a\></li\>
<li\><ahref\="#"\>스토어</a\></li\>
<li\><ahref\="#"\>이벤트</a\></li\>
<li\><ahref\="#"\>로그인</a\></li\>
</ul\>
</nav\>
</div\>
</div\>
</div\>
</header\>
<!-- //header -->
<sectionid\="banner"\>
<h2class\="ir\_so"\>최신 영화 소식</h2\>
<divclass\="banner\_menu"\>
<divclass\="container"\>
<divclass\="row"\>
<divclass\="bm\_left"\>
<ul\>
<liclass\="total"\><ahref\="#"\><iclass\="fa fa-bars"aria-hidden\="true"\></i\> 전체메뉴</a\></li\>
<liclass\="line"\><ahref\="#"\>필름 소사이어티</a\></li\>
<li\><ahref\="#"\>클래식 소사이어티</a\></li\>
</ul\>
</div\>
<divclass\="bm\_right"\>
<ul\>
<liclass\="line"\><ahref\="#"\>고객센터</a\></li\>
<liclass\="line"\><ahref\="#"\>멤버쉽</a\></li\>
<li\><ahref\="#"\>VIP</a\></li\>
</ul\>
<ul\>
<liclass\="white"\><ahref\="#"\>상영시간표</a\></li\>
<liclass\="purple"\><ahref\="#"\>빠른 예매</a\></li\>
</ul\>
</div\>
</div\>
</div\>
</div\>
<divclass\="silder"\>
<divclass\="swiper-container"\>
<divclass\="swiper-wrapper"\>
<divclass\="swiper-slide ss1"\>
<divclass\="container"\>
<divclass\="row"\>
<h2\>캡틴 마블 <em\>Captain Marvel</em\></h2\>
<p\>새로운 히어로, 어벤져스의 희망</p\>
</div\>
</div\>
</div\>
<divclass\="swiper-slide ss2"\>
<divclass\="container"\>
<divclass\="row"\>
<h2\>캡틴 마블 <em\>Captain Marvel</em\></h2\>
<p\>새로운 히어로, 어벤져스의 희망</p\>
</div\>
</div\>
</div\>
<divclass\="swiper-slide ss3"\>
<divclass\="container"\>
<divclass\="row"\>
<h2\>캡틴 마블 <em\>Captain Marvel</em\></h2\>
<p\>새로운 히어로, 어벤져스의 희망</p\>
</div\>
</div\>
</div\>
</div\>
<divclass\="swiper-pagination"\></div\>
<divclass\="swiper-button-prev"\></div\>
<divclass\="swiper-button-next"\></div\>
</div\>
</div\>
</section\>
<!-- banner -->
<sectionid\="movie"\>
<divclass\="container"\>
<divclass\="row"\>
<divclass\="movie"\>
<h2class\="ir\_so"\>최신 영화 정보</h2\>
<divclass\="movie\_title"\>
<ul\>
<liclass\="active"\><ahref\="#"\>박스오피스</a\></li\>
<li\><ahref\="#"\>최신개봉작</a\></li\>
<li\><ahref\="#"\>상영예정작</a\></li\>
<li\><ahref\="#"\>큐레이션</a\></li\>
</ul\>
</div\>
<divclass\="movie\_chart"\>
<divclass\="chart\_cont1"\>
<div\>
<divclass\="poster"\>
<figure\>
<imgsrc\="assets/img/poster01.jpg"srcsets\="assets/img/poster01@2.jpg 2x"alt\="침묵"\>
</figure\>
<divclass\="rank"\><strong\>1</strong\></div\>
<divclass\="mx"\>
<spanclass\="icon m ir\_pm"\>MX</span\>
<spanclass\="icon b ir\_pm"\>Boutique</span\>
</div\>
</div\>
<divclass\="infor"\>
<h3\><spanclass\="icon all ir\_pm"\>전체관람가 </span\><strong\>침묵</strong\></h3\>
<divclass\="infor\_btn"\>
<ahref\="#"\>상세보기</a\>
<ahref\="#"\>예매하기</a\>
</div\>
</div\>
</div\>
<div\>
<divclass\="poster"\>
<figure\>
<imgsrc\="assets/img/poster02.jpg"srcsets\="assets/img/poster02@2.jpg 2x"alt\="신세계"\>
</figure\>
<divclass\="rank"\><strong\>2</strong\></div\>
<divclass\="mx"\>
<spanclass\="icon m ir\_pm"\>MX</span\>
<spanclass\="icon b ir\_pm"\>Boutique</span\>
</div\>
</div\>
<divclass\="infor"\>
<h3\><spanclass\="icon a12 ir\_pm"\>전체관람가 </span\><strong\>신세계</strong\></h3\>
<divclass\="infor\_btn"\>
<ahref\="#"\>상세보기</a\>
<ahref\="#"\>예매하기</a\>
</div\>
</div\>
</div\>
<div\>
<divclass\="poster"\>
<figure\>
<imgsrc\="assets/img/poster03.jpg"srcsets\="assets/img/poster01@3.jpg 2x"alt\="마스터"\>
</figure\>
<divclass\="rank"\><strong\>3</strong\></div\>
<divclass\="mx"\>
<spanclass\="icon m ir\_pm"\>MX</span\>
<spanclass\="icon b ir\_pm"\>Boutique</span\>
</div\>
</div\>
<divclass\="infor"\>
<h3\><spanclass\="icon a15 ir\_pm"\>전체관람가 </span\><strong\>마스터</strong\></h3\>
<divclass\="infor\_btn"\>
<ahref\="#"\>상세보기</a\>
<ahref\="#"\>예매하기</a\>
</div\>
</div\>
</div\>
<div\>
<divclass\="poster"\>
<figure\>
<imgsrc\="assets/img/poster04.jpg"srcsets\="assets/img/poster04@2.jpg 2x"alt\="마약왕"\>
</figure\>
<divclass\="rank"\><strong\>4</strong\></div\>
<divclass\="mx"\>
<spanclass\="icon m ir\_pm"\>MX</span\>
<spanclass\="icon b ir\_pm"\>Boutique</span\>
</div\>
</div\>
<divclass\="infor"\>
<h3\><spanclass\="icon a19 ir\_pm"\>전체관람가 </span\><strong\>마약왕</strong\></h3\>
<divclass\="infor\_btn"\>
<ahref\="#"\>상세보기</a\>
<ahref\="#"\>예매하기</a\>
</div\>
</div\>
</div\>
</div\>
</div\>
<!-- //chart\_cont1 -->
<divclass\="chart\_cont2"\>
</div\>
<!-- //chart\_cont2 -->
<divclass\="chart\_cont3"\>
</div\>
<!-- //chart\_cont3 -->
<divclass\="chart\_cont4"\>
</div\>
<!-- //chart\_cont4 -->
</div\>
</div\>
</div\>
</div\>
</section\>
<!-- //movie-->
<!-- 자바스크립트 라이브러리 -->
<scriptsrc\="assets/js/jquery.min\_1.12.4.js"\></script\>
<scriptsrc\="assets/js/modernizr-custom.js"\></script\>
<scriptsrc\="assets/js/ie-checker.js"\></script\>
<scriptsrc\="assets/js/swiper.min.js"\></script\>
<script\>
varmySwiper = newSwiper ('.swiper-container', {
navigation: {
nextEl:'.swiper-button-next',
revEl:'.swiper-button-prev',
},
pagination: {
el:'.swiper-pagination',
type:'bullets',
},
autoplay: {
delay:5000,
},
})
</script\>
</body\>
</html\>
반응형