배너 반응형

메가박스 사이트 만들기

동영상 보며 코딩하기 -메가박스 사이트 만들기 

web's 동영상 바로가기

여섯번째 강의 : 배너 반응형

평소 화면

반응형 max-width: 1290px일때

반응형 max-width: 1024px일때

반응형 max-width: 960일때

반응형 max-width: 768px일때

반응형 max-width: 600px일때

<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 -->

/*슬라이드*/
.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; 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.3); 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; 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 10;}
    .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,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;} 
}