공부/메가박스 사이트 따라만들기
메가박스 사이트 따라 만들기 - 새로운 영화 영역 1
메가박스 사이트 따라 만들기 - 새로운 영화 영역 1
2022.02.13새로운 영화 영역 background: #ccc url(../img/new01.jpg) center center; → center는 X축과 Y축을 의미합니다. 컨텐츠 요소를 가운데로 오게 하는 방법 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 결과 HTML 새로운 영화 style.css /* 새로운 영화 */ .new { padding: 100px 0; position: relative; } .new h2 { font-size: 30px; font-weight: 500; margin-bottom: 20px; } .new .new_left { position: relative; margin-right: 423px; h..
메가박스 사이트 따라 만들기 - 오프닝 영역
메가박스 사이트 따라 만들기 - 오프닝 영역
2022.02.13오프닝 영역 글씨는 안 보이고 이미지만 보이게 함 → class에 ir_pm을 넣어줌 결과 HTML Grand Opening 2019.01 ~ 2019.03 LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요! 리뉴얼 오픈 경기도안양12월 8일 리뉴얼 오픈 경기도인덕원 사거리12월 8일 리뉴얼 오픈 경기도용인테크노밸리12월 8일 style.css /* 오프닝 */ .opening { padding: 100px 0; text-align: center; color: #bb9b51; } .opening h2 { margin-bottom: 15px; } .opening h2 .grand { background-position: 0 -175px; display: inline-block; width: 3..
메가박스 사이트 따라 만들기 - 이벤트 영역
메가박스 사이트 따라 만들기 - 이벤트 영역
2022.02.13이벤트 영역 이미지는 인라인 구조이기 때문에 폰트 사이즈도 영역이 잡힘 → 이미지에 display: block;을 주기 결과 HTML 새로운 이벤트 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 { overflow: hidden; float: left; width: 66%; margin-right: 2%; } .event .event_left .event_box1 { float: left; width: 50%; } .ev..
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
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 새로운 히어로, ..