메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 열두번째 강의 : 오프닝 영역 평소 화면 max-width 960일때 max-width 768일때 max-width 600일때 Grand Opening 2019.01 ~ 2019.03 LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요! 리뉴얼 오픈 경기도안양12월 8일 리뉴얼 오픈 경기도인덕원 사거리12월 8일 리뉴얼 오픈 경기도용인테크노밸리12월 8일 /*오프닝*/ .opening {padding: 100px 0; text-align: center; color: #bb9b51;} .opening h2 {margin-bottom: 15px;} .opening h2 .grand {background..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 열한번째 강의 : 이벤트 영역 평소 화면 max-width 768일때 max-width 600일때 새로운 이벤트 /* 이벤트 */ .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 ..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 열번째 강의 : 영화 차트 이미지 슬라이드 반응형 평소 화면 max-width 960 일때 max-width 768 일때 max-width 600 일때 max-width 320 일때 @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 .swip..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 아홉번째 강의 : 영화 차트 이미지 슬라이드 //영화차트 이미지 슬라이드 var mySwiper = new Swiper('.swiper-container2', { slidesPerView: 4, spaceBetween: 24, // mousewheel: { // invert: true, // }, keyboard: { enabled: true, onlyInViewport: false, }, autoplay: { delay: 5000, }, }); .movie_chart {overflow: hidden; height: 592px;} .movie_chart > div > div > div {float: left;..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 여덟번째 강의 : 영화 차트 탭 메뉴 1 mx Botique 전체관람가 침묵 상세보기 예매하기 2 mx Botique 12세 신세계 상세보기 예매하기 3 mx Botique 15세 마스터 상세보기 예매하기 4 mx Botique 19세 마약왕 상세보기 예매하기 1 mx Botique 전체관람가 침묵 상세보기 예매하기 2 mx Botique 12세 신세계 상세보기 예매하기 3 mx Botique 15세 마스터 상세보기 예매하기 4 mx Botique 19세 마약왕 상세보기 예매하기 1 mx Botique 전체관람가 침묵 상세보기 예매하기 2 mx Botique 12세 신세계 상세보기 예매하기 3 mx Botiq..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 일곱번째 강의 : 영화 차트 구조잡기 최신 영화 정보 박스오피스 최신개봉작 상영예정작 큐레이션 1 mx Botique 전체관람가 침묵 상세보기 예매하기 2 mx Botique 12세 신세계 상세보기 예매하기 3 mx Botique 15세 마스터 상세보기 예매하기 4 mx Botique 19세 마약왕 상세보기 예매하기 /*무비*/ .movie {padding: 100px 0;} .movie_title {margin-bottom: 60px;} .movie_title ul {overflow: hidden; width: 848px; margin: 0 auto;} .movie_title li {float: left; ..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 여섯번째 강의 : 배너 반응형 평소 화면 반응형 max-width: 1290px일때 반응형 max-width: 1024px일때 반응형 max-width: 960일때 반응형 max-width: 768px일때 반응형 max-width: 600px일때 캡틴 마블 Captain Marvel 새로운 히어로, 어벤져스의 희망 캡틴 마블 Captain Marvel 새로운 히어로, 어벤져스의 희망 캡틴 마블 Captain Marvel 새로운 히어로, 어벤져스의 희망 /*슬라이드*/ .slider {width: 100%; height: 600px;} .slider .ss1 {background: url(../img/swipe..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 다섯번째 강의 : Swiper.js Slide 1 Slide 2 Slide 3 /*슬라이드*/ .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) ..
메가박스 사이트 만들기 동영상 보며 코딩하기 -메가박스 사이트 만들기 web's 동영상 바로가기 네번째 강의 : 헤더 반응형 1.max-width : 1290일때 2.max-width : 1024일때 3.max-width : 768일때 메가박스 전체메뉴 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 @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; widt..