메가박스 사이트 만들기 02 - 헤더영역

메가박스 사이트 만들기

강의번호 02 - 헤더영역

 

완성!

reset.css

@charset "utf-8";


/* 여백 초기화 */
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:0 none;}

/* 버튼 초기화 */
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;}

style.css

@charset "utf-8";
    
/* 레이아웃 */
#header{width:100%; height: 63px; border-bottom: 1px solid #c6c6c6; background: rgba(0,0,0,0);}

/* 가운데 영역 */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0);}

/*로우 영역*/
.row {padding: 0 24px;}

/*헤더 영역*/
.header {}
.header h1{float: left;}
.header h1 em {padding: 15px 8px 5px 0; display: inline-block}
.header h1 em img{width: 155px;}
.header h1 strong{display: block; position: absolute; left: 194px; top: 24px;}
.header h1 strong img{width: 126px;}
.header .nav{float: right;}
.header .nav ul{border-left: 1px solid #c6c6c6;}
.header .nav ul li{float: left; width: 103px;text-align: center; border-right: 1px solid #c6c6c6;}
.header .nav ul li a {display: block;padding: 19px 10px;font-size: 17px; font-weight: 700; color: #444}

index.html

<!--header-->
    <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="THEATER"></strong>
                        </a>
                    </h1>
                    <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-->