메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
2022.02.13영화 차트 이미지 슬라이드 반응형 모바일에서도 원활히 볼 수 있도록 디바이스 크기에 따라 조절합니다. 결과 style.css @media (max-width: 960px) { .movie_title ul { width: auto; } .movie_title li { width: 25%; box-sizing: border-box; } } @media (max-width: 768px) { body { background: #d9d7e0; } #movie .row { background: #fff; margin: 24px; padding: 24px; } #movie .ir_so { position: static; width: auto; height: auto; line-height: normal; text-i..
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더
2022.02.13영화 차트 이미지 슬라이드 6초가 지날 때마다 슬라이드가 죄측으로 움직이도록 설정합니다. (https://swiperjs.com/)에서 원하는 슬라이더 소스를 가져와서 사용합니다. * 구조를 잘 잡아야함 결과 HTML 1 MX Boutique 전체관람가 침묵 상세보기 예매하기 2 MX Boutique 12세 침묵 상세보기 예매하기 3 MX Boutique 15세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 이하 3개의 컨텐츠에도 동일하게 넣어줍니다. j..
메가박스 사이트 따라 만들기 - 영화 차트 탭
메가박스 사이트 따라 만들기 - 영화 차트 탭
2022.02.13영화 차트 탭 메뉴 버튼을 클릭하면 해당 컨텐츠에 연결되게 합니다. 그림자 효과 글자에 그림자를 넣을 때는 text-shadow를 사용함 결과 js //영화차트 탭 메뉴 var movBtn = $(".movie_title > ul > li"); var movCont = $(".movie_chart > div"); movCont.hide().eq(0).show(); movBtn.click(function (e) { e.preventDefault(); var target = $(this); var index = target.index(); movBtn.removeClass("active"); target.addClass("active"); movCont.css("display", "none"); movCon..
메가박스 사이트 따라 만들기 - 영화 차트 구조
메가박스 사이트 따라 만들기 - 영화 차트 구조
2022.02.13영화 차트 구조잡기 이미지 관련 태그 : 이미지를 불러올 때 사용 : 이미지를 표현할 때 사용 : 이미지를 설명할 때 사용 : 이미지를 화면 크기에 따라 사용, 반응형 이미지와 관련된 태그, 태그와 같이 사용 반응형 사이트 1. 유동 레이아웃 2. 미디어쿼리 3. 반응형 이미지 : 이미지에 width:100%를 하면 됨. 단, 이미지 크기와 용량, 레디나 디바이스 대응의 문제가 생김 css 검사 서비스 사이트 http://www.css-validator.org/validator.html.ko : css 오류를 알려줌 결과 HTML 최신 영화 정보 박스오피스 최신개봉작 상영예정작 큐레이션 1 MX Boutique 전체관람가 침묵 상세보기 예매하기 2 MX Boutique 12세 침묵 상세보기 예매하기 3 ..
메가박스 사이트 따라 만들기 - 배너 반응형
메가박스 사이트 따라 만들기 - 배너 반응형
2022.02.13배너 반응형 아래의 글이 위의 글과 너무 떨어져 있을 경우 위의 글에 line-height값을 줄여줍니다. https://fontawesome.com/사이트에서 소스를 다운받아 아이콘을 사용할 수 있습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 결과 HTML 전체메뉴 필름 소사이어티 클래식 소사이어티 캡틴 마블 Captain Marvel 새로운 히어로, 어벤져스의 희망 캡틴 마블 Captain Marvel 새로운 히어로, 어벤져스의 희망 캡틴 마블 Captain Marvel 새로운 히어로, ..
메가박스 사이트 따라 만들기 - swiper 이용
메가박스 사이트 따라 만들기 - swiper 이용
2022.02.13swiper.js 슬라이드 배너 만들기 https://swiperjs.com/에서 필요한 소스 가져오기 결과 HTML 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 style.css /* 배너 */ .banner_menu { overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; z-index: 10; } /* 슬라이드 */ .slider { width: 100%; height: 600px; } .slider .ss1 { background: url(../img/..
메가박스 사이트 따라 만들기 - header 반응형
메가박스 사이트 따라 만들기 - header 반응형
2022.02.13모바일 메뉴 미디어쿼리 @media 반응형 웹 페이지를 제작하려면 뷰포트와 미디어 쿼리를 사용해야 합니다. @media 화면 크기를 지정해놔서(1280px) 이보다 작아지면 스크롤바가 생깁니다. → 1차적으로 .container{width: 100%;} :before 정석은 ::(2개) 써서 익스플로어 8, 9까지 먹히게 합니다. 결과 HTML 메가박스 전체메뉴 style.css /* 레이아웃 */ #mNav { display: none; position: absolute; top: 10px; right: 14px; } /* 모바일 메뉴 */ .ham { display: block; width: 25px; height: 10px; background: rgba(0, 0, 0, 0); padding: 15..
메가박스 사이트 따라 만들기 - 배너영역
메가박스 사이트 따라 만들기 - 배너영역
2022.02.13배너 영역 ir 효과 대체 텍스트를 제공합니다. (background를 통해 이미지를 표현하면 대체 문자를 표현할 수 없습니다.) 결과 HTML 최신 영화 소식 전체메뉴 필름 소사이어티 클래식 소사이어티 고객센터 멤버쉽 VIP 상영시간표 빠른 예매 style.css /* 배너 */ .banner_menu { overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; } .banner_menu a { color: #fff; font-size: 16px; transition: all 0.3s; } .banner_menu a:hover { color: #c1c1c1; } .banner_menu .bm_left { f..