본문 바로가기
사이트 만들기/메가박스 만들기

메가박스 사이트 만들기 07 - 영화 차트 구조잡기

by yumino 2019. 12. 24.
반응형
<!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\>

 

반응형

관련글

댓글

티스토리툴바