CGV
메가박스 사이트 따라 만들기 - 오프닝 영역
메가박스 사이트 따라 만들기 - 오프닝 영역
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영화 차트 이미지 슬라이드 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영화 차트 구조잡기 이미지 관련 태그 : 이미지를 불러올 때 사용 : 이미지를 표현할 때 사용 : 이미지를 설명할 때 사용 : 이미지를 화면 크기에 따라 사용, 반응형 이미지와 관련된 태그, 태그와 같이 사용 반응형 사이트 1. 유동 레이아웃 2. 미디어쿼리 3. 반응형 이미지 : 이미지에 width:100%를 하면 됨. 단, 이미지 크기와 용량, 레디나 디바이스 대응의 문제가 생김 css 검사 서비스 사이트 http://www.css-validator.org/validator.html.ko : css 오류를 알려줌 결과 HTML 최신 영화 정보 박스오피스 최신개봉작 상영예정작 큐레이션 1 MX Boutique 전체관람가 침묵 상세보기 예매하기 2 MX Boutique 12세 침묵 상세보기 예매하기 3 ..
메가박스 사이트 따라 만들기 - 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/..
메가박스 사이트 따라 만들기 - 배너영역
메가박스 사이트 따라 만들기 - 배너영역
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..
메가박스 사이트 따라 만들기 - 헤더영역
메가박스 사이트 따라 만들기 - 헤더영역
2022.02.13기본 셋팅 링크를 걸 때 많이 씁니다. Emmit 기능 ul>li*7>a[] float float을 사용한 상위 박스의 높이값이 0으로 설정됩니다. 즉, 영역이 사라집니다. 해결 방법 1. 똑같이 float를 사용 2. clear:both;를 사용 3. overflow:idden; 사용 4. .clearfix 사용 아래로 갈수록 추천하는 방법 → reset에 .clearfix 설정 결과 HTML 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 reset.css @charset "utr-8"; /* 여백 초기화 */ body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, ..
메가박스 사이트 따라 만들기 - 기본셋팅
메가박스 사이트 따라 만들기 - 기본셋팅
2022.02.13기본 셋팅 pc화면에서 비율을 줄여 모바일 화면에서 보일 수 있도록 하는 기술입니다. 익스플로어 브라우저를 위한 것입니다. 현재는 구 익스를 많이 사용하지 않아 죽은 소스입니다. 결과