헤더 반응형

메가박스 사이트 만들기

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

web's 동영상 바로가기

네번째 강의 : 헤더 반응형

1.max-width : 1290일때

2.max-width : 1024일때

3.max-width : 768일때

<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="LIFE 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 -->

@charset "utf-8";

/*레이아웃*/
#mNav {display: none; position: absolute; top: 10px; right: 14px;}
#header {width: 100%; border-bottom: 1px solid #c6c6c6;}
#banner {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); 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;
}

/*미디어쿼리*/
@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;}
}
@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;}
}
@media (max-width: 960px){
    
}
@media (max-width: 768px){
    .row {padding: 0 16px;}
    .mNav { right: 6px;}
    .header h1 {text-align: left;}
    .header h1 strong {display: none;}
    
}
@media (max-width: 480px){
    
}
@media (max-width: 320px){
    
}