코딩/메가박스
영화 차트영역 구조잡기
zzzeeeram
2019. 12. 21. 19:47
<section id="movie">
<div class="container">
<div class="row">
<div class="movie">
<h2 class="ir_so">최신 영화 정보</h2>
<div class="movie_tit">
<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="info">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="info_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@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="info">
<h3><span class="icon a12 ir_pm">12세 관람가</span><strong>침묵</strong></h3>
<div class="info_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@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="info">
<h3><span class="icon a15 ir_pm">15세 관람가</span><strong>침묵</strong></h3>
<div class="info_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@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="info">
<h3><span class="icon a19 ir_pm">19세 관람가</span><strong>침묵</strong></h3>
<div class="info_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>
<!--//movie_class-->
</div>
</div>
</section>
<!--//movie-->style.css
/* movie */
.movie {padding: 100px 0;}
.movie_tit {overflow: hidden; margin-bottom: 60px;}
.movie_tit ul {width: 848px; margin: 0 auto;}
.movie_tit ul li {float: left; width: 210px; text-align: center; border:1px solid #c4c4c4; margin-right: -1px;}
.movie_tit ul li a {display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700;}
.movie_tit ul li.active a{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: 18px;}
.movie_chart > div > div:last-child {margin-right: 0;}
.movie_chart > div > div .poster {position: relative;}
.movie_chart > div > div .poster img{display: block;}
.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; font-size: 22px;}
.movie_chart > div > div .poster .rank strong {color: #fff;}
.movie_chart > div > div .poster .mx {position: absolute; top: 17px; right: 17px;}
.movie_chart > div > div .poster .mx span{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 .info {background: #fff; padding: 17px; border: 1px solid #d9d9d9;}
.movie_chart > div > div .info h3 {color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie_chart > div > div .info span {width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: -2px;}
.movie_chart > div > div .info span.all {background-position: -88px -125px;}
.movie_chart > div > div .info span.a12 {background-position: -58px -125px;}
.movie_chart > div > div .info span.a15 {background-position: 0px -125px;}
.movie_chart > div > div .info span.a19 {background-position: -29px -125px;}
.movie_chart > div > div .info strong {}
.movie_chart > div > div .info .info_btn {}
.movie_chart > div > div .info .info_btn a{display: inline-block; background: #f2f2f2; font-size: 18px; padding: 15px 30px;}