메가박스 사이트 만들기 강의번호 15 - 공지사항 완성! style.css /*help*/ .help {overflow: hidden;padding-bottom: 200px;} .help article {float: left; width: 32%; margin-right: 2%;} .help article > div {border: 1px solid #dbdbdb; height: 350px;} .help article.help_box3 {margin-right: 0;} .help article h3 {font-size: 30px; font-weight: 500; margin-bottom: 20px;} /*공지사항*/ .notice{padding: 17px;position: relative;} .notic..
메가박스 사이트 만들기 강의번호 14 - 새로운 영화 영역2 완성! reset.css * input style */ input {background-image: none;} input[type=button], input[type=reset], input[type=text], input[type=password], input[type=submit], input[type=search], input[type=tel], input[type=email] { -webkit-appearance: none; border-radius: 0 } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -w..
메가박스 사이트 만들기 강의번호 13 - 새로운 영화 영역 완성! style.css /*오프닝*/ .opening{padding: 100px 0; text-align: center; color: #bb9b51;} .opening h2{} .opening h2 .grand{background-position: 0 -175px; display: inline-block; width: 330px; height: 50px; margin-bottom: 15px;} .opening .date{background-position: 0 -225px; display: inline-block; width: 260px; height: 45px;} .opening .desc{font-size: 35px; font-weight:..
메가박스 사이트 만들기 강의번호 12 - 오프닝 영역 완성! style.css /*오프닝*/ #opening{margin: 17px 0; background: url(../img/bg01.jpg) no-repeat center top; background-size: cover;} .opening{padding: 100px 0; text-align: center; color: #bb9b51;} .opening h2{} .opening h2 .grand{background-position: 0 -175px; display: inline-block; width: 330px; height: 50px;} .opening .date{background-position: 0 -225px; display: inline..
메가박스 사이트 만들기 강의번호 11 - 이벤트 영역 완성! style.css /*이벤트*/ .event {overflow: hidden; padding: 100px 0;} .event img{display: block} .event h2{font-size: 30px; font-weight: 500; margin-bottom: 20px;} .event .event_left{float: left; width: 66%; margin-right: 2%;} .event .event_left .event_box1{float: left; width: 50%;} .event .event_left .event_box2{float: left; width: 50%;} .event .event_right{float: lef..
메가박스 사이트 만들기 강의번호 10 - 영화 차트 이미지 슬라이드 반응형 완성! sytle.css /*미디어쿼리*/ @media (max-width: 1290px){ .container{width: 100%;} .header .nav ul li{width: 93px;} .header .nav ul li a{width: 91px; font-size: 15px; padding: 17px 10px; } .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: b..
메가박스 사이트 만들기 강의번호 09 - 영화 차트 이미지 슬라이드 완성! style.css @charset "utf-8"; /* 레이아웃 */ #mNav{display: none; position: absolute; top: 13px; right:14px;} #header{width:100%; border-bottom: 1px solid #c6c6c6;} #benner{position: relative;} /* 가운데 영역 */ .container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0);} /*로우 영역*/ .row {padding: 0 28px;} /*모바일 메뉴*/ .ham {display: bloc..
메가박스 사이트 만들기 강의번호 08 - 영화 차트 탭 메뉴 완성! style.css @charset "utf-8"; /* 레이아웃 */ #mNav{display: none; position: absolute; top: 13px; right:14px;} #header{width:100%; border-bottom: 1px solid #c6c6c6;} #benner{position: relative;} /* 가운데 영역 */ .container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0);} /*로우 영역*/ .row {padding: 0 28px;} /*모바일 메뉴*/ .ham {display: block; w..