메가박스 사이트 만들기 강의번호 07 - 영화 차트 구조잡기 완성! 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..
메가박스 사이트 만들기 강의번호 06 - 배너반응형 완성! 1024px 완성! 600px style.css .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.7); position: absolute; left: 0; bottom: -35px;} .slider .swiper-slide h2 em{display: block; font-s..
메가박스 사이트 만들기 강의번호 05 - swiper.js 완성! style.css /*슬라이드*/ .slider{width: 100%; height: 600px;} .slider .ss1{background: url(../img/main_slider01_2000.jpg) no-repeat center center; background-size: cover; } .slider .ss2{background: url(../img/main_slider02_2000.jpg) no-repeat center center; background-size: cover; } .slider .ss3{background: url(../img/main_slider03_2000.jpg) no-repeat center center..
메가박스 사이트 만들기 강의번호 04 - 헤더 반응형 : 모바일 메뉴 완성! 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: blo..
메가박스 사이트 만들기 강의번호 03 - 배너영역 완성! reset.css /* IR 효과 */ .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */ .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */ .ir_so {overflow: hidden; position:absolute; width:0..
메가박스 사이트 만들기 강의번호 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', Apple..